Abyss component
Pagination
Pagination can be used as a method of navigating through multiple pages of related content, while also highlighting which page you are currently viewing.
When to use
-
For pages that show things like listings, directories and search results
When not to use
-
As general navigation
Anatomy
- Results per page: optional control to display that allows users to change how many rows to display per page
- Extended pagination: there is also compact variation available for smaller UI areas such as on tablet or mobile
- Result count: optional element to display information about the data being displayed
Demos & variations
Pagination - extended variant
Pagination - compact variant
Article cards
Demo live on the content hub category pages.
Flu shot finder
Demo live on the flu shot finder.
Search results
Demo pagination on a search results page. Due to technical limitations the pagination on search is only styled to appear like the Abyss component.
Placement
Pagination should be found below the list of related content or search results.