Components

Pagination

Pagination should be provided for sections of your site or app that require users to easily transition to and from pages that are grouped together in some way. See the multi-page pagination component (directly below), or the simpler pager alternative.

The active c-pagination__link should have no href attribute. Likewise, the c-pager__link class for the 'previous' and 'next' arrows should have no href attribute if there are no further pages to go to. When there is a link for a pagination item, then an <a> tag with a href and link should be used for the c-pagination__link.

JavaScript class: .js-pagination

.c-pagination--small

Small pagination

.c-pagination--large

Large pagination

.c-pagination--centered

Centered pagination

<nav class="c-pagination [modifier class] js-pagination">
  <ul class="c-pagination__list">
    <li class="c-pagination__item is-disabled">
      <a class="c-pagination__link" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="c-pagination__item is-active"><a class="c-pagination__link">1</a></li>
    <li class="c-pagination__item"><a href="#0" class="c-pagination__link">2</a></li>
    <li class="c-pagination__item"><a href="#0" class="c-pagination__link">3</a></li>
    <li class="c-pagination__item"><a href="#0" class="c-pagination__link">4</a></li>
    <li class="c-pagination__item"><a href="#0" class="c-pagination__link">5</a></li>
    <li class="c-pagination__item">
      <a href="#0" class="c-pagination__link" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Pager

The pager is the simpler default pager style pagination.

The disabled c-pager__link should have no href attribute on it. The 'previous' and 'next' should also have no href attribute if there are no further pages to go to. When there is a link for a pager item, then an <a> tag with a href and link should be used for the c-pager__link class.

.c-pager--aligned

Aligned pager links

<nav class="c-pager [modifier class] js-pager">
  <ul class="c-pager__list">
    <li class="c-pager__item c-pager__item-previous is-disabled"><a class="c-pager__link"><span aria-hidden="true">&larr;</span> Previous</a></li>
    <li class="c-pager__item c-pager__item-next"><a href="#0" class="c-pager__link">Next <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>