Pagination - Astridd

Overview

Pagination is a group of links which navigates through pages of content when a small set of results are displayed, so as to not overwhelm the user. The Pagination indicates which page of results they are currently on and presents options to navigate to other pages.

Examples

Default variation

<nav class="pagination" role="navigation" aria-label="Pagination">
  <ul class="pagination__list">
    <li  class="pagination__item pagination__item--disabled">
      <span aria-hidden="true">&laquo; Previous</span>
      <span class="show-for-sr">Previous</span>
    </li>
    <li class="pagination__item pagination__item--active">
      <span class="show-for-sr">You're on page</span> 1
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#" aria-label="Page 2">2</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#" aria-label="Page 3">3</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#" aria-label="Next">
        <span aria-hidden="true">Next &raquo;</span>
        <span class="show-for-sr">Next</span>
      </a>
    </li>
  </ul>
</nav>

Usage guidelines

Dos	Donts
Do place Pagination underneath the content on your page.	Don't place the Pagination above the content on your page.
Do use for list or search results pages.

Implementation guidelines

Name	Class	Description
Active state	`.pagination__item--active`	Set the active state to an item within Pagination. Apply to `li` element.
Disabled state	`.pagination__item--disabled`	Set a disabled state to an item within Pagination. Apply to `li` element.