Pagination

Please note: This pattern contains design examples and implementation rules. Front-end code is coming soon!

Overview

Pagination typically divides listing or catalogue content up between pages, defined by how many should be displayed and the sort order specified. Placement is typically on the top right of the listing, and then repeated again in the bottom right beneath the list.

At the beginning or end of pagination

When a user is at either end of the pagination, the appropriate arrow becomes disabled. Disabled arrow has 30% opacity with no interaction.

At the beginning or end of pagination

At the middle of pagination

When a user is at the middle of the pagination, both arrows are active and free to navigate.

At the middle of pagination