# Pagination

First item selected:

```html
<nav role="navigation" aria-label="Page navigation">
  <ul class="Pagination">
    <li class="Pagination__item">
      <a href="#" class="Pagination__link Pagination__link--current" aria-current="page">
        <span class="accessibility-hidden">Current Page, Page 1</span>
        <span aria-hidden="true">1</span>
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 2">
        <span class="accessibility-hidden">page</span>
        2
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 3">
        <span class="accessibility-hidden">page</span>
        3
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 4">
        <span class="accessibility-hidden">page</span>
        4
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 5">
        <span class="accessibility-hidden">page</span>
        5
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Button Button--secondary Button--symmetrical">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
        </svg>
        <span class="accessibility-hidden">Next</span>
      </a>
    </li>
  </ul>
</nav>
```

Middle item selected:

```html
<nav role="navigation" aria-label="Page navigation">
  <ul class="Pagination">
    <li class="Pagination__item">
      <a href="#" class="Button Button--secondary Button--symmetrical">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/icons/svg/sprite.svg#chevron-left" />
        </svg>
        <span class="accessibility-hidden">Previous</span>
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 11">
        <span class="accessibility-hidden">page</span>
        11
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 12">
        <span class="accessibility-hidden">page</span>
        12
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link Pagination__link--current" aria-current="page">
        <span class="accessibility-hidden">Current Page, Page 13</span>
        <span aria-hidden="true">13</span>
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 14">
        <span class="accessibility-hidden">page</span>
        14
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 15">
        <span class="accessibility-hidden">page</span>
        15
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Button Button--secondary Button--symmetrical">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
        </svg>
        <span class="accessibility-hidden">Next</span>
      </a>
    </li>
  </ul>
</nav>
```

Last item selected:

```html
<nav role="navigation" aria-label="Page navigation">
  <ul class="Pagination">
    <li class="Pagination__item">
      <a href="#" class="Button Button--secondary Button--symmetrical">
        <svg width="24" height="24" aria-hidden="true">
          <use xlink:href="/icons/svg/sprite.svg#chevron-left" />
        </svg>
        <span class="accessibility-hidden">Previous</span>
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 109">
        <span class="accessibility-hidden">page</span>
        109
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 110">
        <span class="accessibility-hidden">page</span>
        110
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 111">
        <span class="accessibility-hidden">page</span>
        111
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link" aria-label="Go to Page 112">
        <span class="accessibility-hidden">page</span>
        112
      </a>
    </li>
    <li class="Pagination__item">
      <a href="#" class="Pagination__link Pagination__link--current" aria-current="page">
        <span class="accessibility-hidden">Current Page, Page 113</span>
        <span aria-hidden="true">113</span>
      </a>
    </li>
  </ul>
</nav>
```
