Digital pattern library

Pagination

Pagination links indicate a series of related content 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 or inboxes.


Default pagination

Default pagination should be used on galleries that have multiple pages and search results.

Code


Disabled and active states

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

Code

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

Code

Small pagination

Remove .pagination-lg class to revert pagination to a smaller size. This sizing is to 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 to allow the user to proceed to another post.


Default pager

Code

Optional 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