Pagination

pagination show more pager

Introduction

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.

Usage

The 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.

Styleguide

Show more button

Pagination style show more elements

Icon

Dropdown open icon

width: 20px
height: 20px
fill: $turquoise-600

Text

color: $turquoise-600
text-align: center

Pagination style show more

x: 20px
y: 8px

Hover state

Hover state show more

fill: $turquoise-700

Active state

Active state show more

fill: $turquoise-800

Variants and behavior

Pager

Pagers should be used when space is limited and not flexible. For example if the selection in a table affects content underneath.

Pagination style pager

Page numbers

color: $gray-600
text-align: centered in 32px box

Active page

font-family: Bernina Sans Bold
font-weight: 700
color: $gray-900

Dots

color: $gray-300

Box

width: 32px
height: 32px

Pagination style pager

x: 8px
y: 20px

Hover state

Hover state pager

font-color: $gray-700
background-color: $gray-100
border-radius: 3px

Active state

Active state pager

font-color: $gray-800
background-color: $gray-100
border-radius: 3px

Behavior

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.

Pager behavior