Pagination

List for paginating links. Three elements are expected in the list: A previous page label, a group of page numbers, and a "next page" label.

.c-pagination
<ul class="c-pagination t-links t-uppercase t-lsp-b t-size-xs t-align-center t-weight-bold" aria-label="Pagination">
  <li class="t-align-left">
    <a href="#">
      <span class="c-icon c-icon--baseline c-pagination__icon c-pagination__icon--prev">
        <svg aria-hidden="true">
          <use xlink:href="#long-arrow-left"></use>
        </svg>
      </span>
      Previous<span class="is-sr-only"> Page</span>
    </a>
  </li>
  <li>
    <ul class="l-align-center-children">
      <li class="is-hidden-until-bp-m">
        <a class="c-pagination__count" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="is-hidden-until-bp-m">
        <a class="c-pagination__count" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="is-hidden-until-bp-m c-pagination__count" aria-label="You're on page 3">
        <span aria-hidden="true"> 3</span>
      </li>
      <li class="is-hidden-until-bp-m" aria-hidden="true">…</li>
      <li class="is-hidden-until-bp-m">
        <a class="c-pagination__count" href="#" aria-label="Skip to page 100">100</a>
      </li>
    </ul>
  </li>
  <li class="t-align-right">
    <a href="#">
      Next<span class="is-sr-only"> Page</span>
      <span class="c-icon c-icon--baseline c-pagination__icon c-pagination__icon--next">
        <svg aria-hidden="true">
          <use xlink:href="#long-arrow-right"></use>
        </svg>
      </span>
    </a>
  </li>
</ul>