{{#> web/layout/default title="Pagination" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Pagination Current First</h2>

    <div class="docs-Stack docs-Stack--start">

      <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--medium Button--symmetrical">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
              </svg>
              <span class="accessibility-hidden">Next</span>
            </a>
          </li>
        </ul>
      </nav>

    </div>

  </div>

</section>



<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Pagination Current Middle</h2>

    <div class="docs-Stack docs-Stack--start">

      <nav role="navigation" aria-label="Page navigation">
        <ul class="Pagination">
          <li class="Pagination__item">
            <a href="#" class="Button Button--secondary Button--medium Button--symmetrical">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/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--medium Button--symmetrical">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
              </svg>
              <span class="accessibility-hidden">Next</span>
            </a>
          </li>
        </ul>
      </nav>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Pagination Current Last</h2>

    <div class="docs-Stack docs-Stack--start">

      <nav role="navigation" aria-label="Page navigation">
        <ul class="Pagination">
          <li class="Pagination__item">
            <a href="#" class="Button Button--secondary Button--medium Button--symmetrical">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/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>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Pagination Current First Centered</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <nav class="mb-800 text-center" 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--medium Button--symmetrical">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
              </svg>
              <span class="accessibility-hidden">Next</span>
            </a>
          </li>
        </ul>
      </nav>

    </div>

  </div>

</section>

{{/web/layout/default }}