Pagination

The pagination component serves as a way to navigate between pages of lengthy content.

The link for the current page of results visible should always include aria-current="page".

The cmp-pagination__link class adds pagination styles to the <a> link.

The ... (ellipsis) signifies truncation. It can be enabled by adding a cmp-pagination__item--jump class to the link AFTER the ellipsis. The ellipsis will be displayed as the item BEFORE that link.

View

<nav class="cmp-pagination">

  <a class="cmp-pagination__link cmp-pagination__link--prev" href="#">
    <svg class="cmp-pagination__icon">
      <use xlink:href="#icon-arrow-left"></use>
    </svg>
    <span class="util-visually-hidden">Previous</span>
  </a>
  <a class="cmp-pagination__link cmp-pagination__link--next" href="#">
    <svg class="cmp-pagination__icon">
      <use xlink:href="#icon-arrow-right"></use>
    </svg>
    <span class="util-visually-hidden">Next</span>
  </a>

  <ol class="cmp-pagination__list">
    <li class="cmp-pagination__item">
      <a class="cmp-pagination__link" href="#" aria-current="page">1</a>
    </li>
    <li class="cmp-pagination__item">
      <a class="cmp-pagination__link" href="#">2</a>
    </li>
    <li class="cmp-pagination__item">
      <a class="cmp-pagination__link" href="#">3</a>
    </li>
    <li class="cmp-pagination__item cmp-pagination__item--jump">
      <a class="cmp-pagination__link" href="#">8</a>
    </li>
  </ol>
</nav>