Pagination

The pagination control is used to split content over a number of pages, and guide users directly to a particular page or to the next or previous page.

• Include a title that describes how many page links are being displayed, and the overall number of links, eg. 'Showing 1 of 15'.
• Consider whether pagination is required - undertake user research activity to understand what an optimum page length would be for your content - it may be longer than you think as scrolling can be less onerous for users than navigating between pages, depending on the scenario.
• A maximum of 10 page number links should be displayed in large and medium views.
• A maximum of 5 page number links should be displayed in a small view.

• Don't use 'first' and 'last' links.
• Must not be used on dark accent colours.

Examples

Notes for developers

Notes for testers

• Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
• Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
• Ensure that when hovering over a link the style changes noticeably.
• Ensure that when a link has focus the style changes noticeably.
• There should be a clear visual distinction between the current page, a hover state for selectable pages, non-selected pages, and Previous and Next links. Do not use first and last links or chevrons.
• Show a maximum of 9 page links in a desktop or tablet view, or a maximum of 5 links for a mobile view.

Code Examples

<p class="u-text--center u-no-print">Showing 8 of 15</p>
<div class="pagination">
	<ul class="pagination__list plain-list">
		<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">4</a></li>
		<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">5</a></li>
		<li class="pagination__list-item pagination__list-item--primary"><a href="#example">6</a></li>
		<li class="pagination__list-item pagination__list-item--primary"><a href="#example">7</a></li>
		<li class="pagination__list-item pagination__list-item--primary pagination__list-item--selected"><span>8</span></li>
		<li class="pagination__list-item pagination__list-item--primary"><a href="#example">9</a></li>
		<li class="pagination__list-item pagination__list-item--primary"><a href="#example">10</a></li>
		<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">11</a></li>
		<li class="pagination__list-item pagination__list-item--secondary"><a href="#example">12</a></li>
	</ul>
	<p class="pagination__previous"><a href="#example"><span>Previous</span></a></p>
	<p class="pagination__next"><a href="#example"><span>Next</span></a></p>
</div>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Keyboard operations

TAB

Tabbing to an anchor should make the social link clearly visually different so that the focus point on the page is obvious to the user

SPACE or ENTER

With focus on an anchor, pressing SPACE or ENTER will open the relevant page.