Pagination

Taxonomic name: A-PAGINATION

CORE COMPONENT

Archive - Updated 06/12/19. Current version

Atom

v.4.16.0

Updated markup to improve accessibility via use of appropriate roles and aria being applied. It is also possible now for the current page to be a link rather than only a span.

<p class="u-text--center u-no-print">Showing ... of ...</p>
<div class="a-pagination">
	<ul class="a-pagination-list a-list-plain">
		<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary a-pagination-list__item--selected"><span>...</span></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--primary"><a href="...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="...">...</a></li>
		<li class="a-pagination-list__item a-pagination-list__item--secondary"><a href="...">...</a></li>
	</ul>
	<p class="a-pagination__previous"><a href="..."><span>Previous</span></a></p>
	<p class="a-pagination__next"><a href="..."><span>Next</span></a></p>
</div>

v.4.9.0

Support for using button elements instead of anchor elements has been added to allow for different implementations.

Prior to v.3.1.0

Hover (light blue) and selected state (green), text and arrow colour were all updated in v.3.1.0.

Style of pagination prior to 3.1.0