Sometimes, you may only want to display a limited number of items from your database, whether for design clarity or better performance. The good news is that this is already possible in Super by enabling the database load limit, allowing you to control how many items are shown at a time based on your preference.
For example, if your database contains 12 items but you only want to display 10, you can simply set the load limit in Notion first.
Click the Settings Icon in your Database
Choose Layout
Look for Load Limit
In Super:
Go to your Dashboard
Click Option Section
Scroll down and look for Database Load Limit
Click Enable
This allows you to control how many items are initially shown, ensuring your page only displays the exact number you prefer.
Using nth Child
Since there are only selected numbers for load limit in Notion, you can specify the number of items you wanted to show on your Database by using CSS:
If you want to strictly show specific number of items using CSS (even if more are loaded), you can hide the rest using :nth-child.
Here's a sample scenario where I only want to show 5 items.
Add the following to your Code>CSS:
/* Hide all items after the 5th one */
.notion-collection-gallery .notion-collection-card:nth-child(n+6) {
display: none !important;
}
How it works:
nth-child(n+6)targets the 6th item onwards(NOTE: You can always change the number on your nth child depending on your needs.)
Everything after the 5th card will be hidden
When to use this:
You already have more items loaded (e.g., 10 from Notion)
But you only want to visually show 5 on the page