Digital pattern library

Pagination

Pagination links indicate a series of additional content that exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results.

Rules for pagination

Options available

Pagination

Pagination must be used on galleries, tables and search results that have multiple pages.

Code

Pagination with disabled and active states

Links are customisable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Code

Small pagination

This sizing must be used on internal web applications.

Code

Pager

Simple 'previous' and 'next' links for pagination implementations with light markup and styles. These can be used at the bottom of a blog post or news article to allow the user to proceed to another post.

Code

Pager with disabled state

Pager links also use the general disabled utility class from the pagination. Disabled links are to be used when there is no preceeding or following pages to navigate to

Code