Pagination is used to divide pages, this helps lighten page weight as well as giving the user a sense of where they are on the site.

Only one page can be active, and it should be clear which page is. The chevrons provide a way to navigate between the pages, as well as using the number links.

# Component

Pagination states

# Rules


  • Make sure the minimum touch point (48pt) is observed
  • Make sure there are multiple ways of navigating


  • Add more than the maximum amount of links shown in the above images
  • Change the styling of the component

# Structure

Pagination specifications

# Specifications

Min height Padding(x) Padding(y) Gutters Radius
48pt 16pt 12pt 4pt 50%

# Typography

Font size Line height
16pt 24pt
Last Updated: 10/6/2020, 8:34:39 AM