A pagination is used to split long lists or tables in smaller sets.
View in Groundhog
List and table lengths should always be adjusted to their use cases. Avoid unnecessary pagination whenever possible.
Show more button is the preferred and recommended variant of pagination.
As the list is divided into equal parts, the button shows the number of entries of the next part, if possible. As soon as there are no more entries available, the
Show more button is hidden.
Once expanded, the list cannot be collapsed anymore without a full page reload.
Show more button
width: 20px height: 20px fill: $turquoise-600
color: $turquoise-600 text-align: center
x: 20px y: 8px
Variants and behavior
Pagers should be used when space is limited and not flexible. For example if the selection in a table affects content underneath.
color: $gray-600 text-align: centered in 32px box
font-family: Bernina Sans Bold font-weight: 700 color: $gray-900
width: 32px height: 32px
x: 8px y: 20px
font-color: $gray-700 background-color: $gray-100 border-radius: 3px
font-color: $gray-800 background-color: $gray-100 border-radius: 3px
The pager needs to display the first and the last page all the time.
The arrow on the right of the pagination navigates to the next page, the arrow on the left to the previous page.
Up to seven pages can be represented directly with the page numbers. If there are more than seven pages, the remaining pages are hidden behind three dots. These dots are not clickable.