Pagination & pager
Pagination
Pagination is used to quickly navigate between pages or results with the option to go forwards and backwards through pages or to quickly jump to a specific page if necessary.
On the first page of results this view indicates that a user is on Page 1 and so an inactive ‘back’ arrow is featured as we are unable to traverse backwards through the results. On pages after Page 1 both the ‘back’ and ‘forwards’ arrows become active and on the final page of results the ‘forwards’ arrow is now inactive as we are now unable to traverse any further forward.
The page number indicated in the middle of the Pagination component is also a form input and allows a user to type within the input and hit Enter/Go to quickly navigate to that particular page. If a user enters a page number that is higher or lower than a page number available they will land on the nearest page available to their entered number.
This pager is always centrally aligned.
<nav class="rc-pagination" data-pagination="" data-pages="10">
<form action="#" method="POST" class="rc-pagination__form">
<button class="rc-btn rc-pagination__direction rc-pagination__direction--prev rc-icon rc-left--xs rc-iconography" aria-label="Previous step" data-prev="" type="submit"></button>
<div class="rc-pagination__steps">
<input type="text" class="rc-pagination__step rc-pagination__step--current" value="1" aria-label="Current step" />
<div class="rc-pagination__step rc-pagination__step--of">
of
<span data-total-steps-label=""></span>
</div>
</div>
<button class="rc-btn rc-pagination__direction rc-pagination__direction--next rc-icon rc-right--xs rc-iconography" aria-label="Next step" data-next="" type="submit"></button>
</form>
</nav>Copied!
Pager
A pager is a visual representation of the current page of paginated content that the user is currently viewing. Use this markup where possible for an individual link, or use this Component's CSS in order to style an individual pagination link whose structure can't be customised.
To center align the pager add a class of rc-pager--center
<ul class="rc-pager">
<li class="rc-pager__item">
<a class="rc-pager__item__link">
<span class="rc-screen-reader-text"></span>
</a>
</li>
<li class="rc-pager__item">
<a class="rc-pager__item__link rc-pager--active">
<span class="rc-screen-reader-text"></span>
</a>
</li>
<li class="rc-pager__item">
<a class="rc-pager__item__link">
<span class="rc-screen-reader-text"></span>
</a>
</li>
<li class="rc-pager__item">
<a class="rc-pager__item__link">
<span class="rc-screen-reader-text"></span>
</a>
</li>
<li class="rc-pager__item">
<a class="rc-pager__item__link">
<span class="rc-screen-reader-text"></span>
</a>
</li>
<li class="rc-pager__item">
<a class="rc-pager__item__link">
<span class="rc-screen-reader-text"></span>
</a>
</li>
</ul>Copied!