Pagination

Show several page links in a row with optional visible controls for "next" and "previous" pages.

If there are too many links to show in the given space, they are hidden. "Next" and "previous" controls are never hidden.

<nav role="menu" aria-label="Pagination">
  <ul class="Pagination Pagination--withPrevious Pagination--withNext">
    <li>
      <a class="Pagination-item" href="#">
              <span class="Pagination-item Pagination-item--previous">
<svg viewBox="0 0 24 24" width="24" height="24" aria-labelledby="pagination-previous-title" class="Icon">                  <title id="pagination-previous-title">Previous:</title>

  <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" transform="rotate(180 12 12)">
    <polyline points="15 5 22 12 15 19"/>
    <line x1="20" y1="12" x2="2" y2="12"/>
  </g>
</svg>              </span>
            <span class="u-hiddenVisually">Page</span>
            1
          </a>
    </li>
    <li>
      <span class="Pagination-item">
        <span class="u-hiddenVisually">Currently viewing page</span>
        2
      </span>
    </li>
    <li>
      <a class="Pagination-item" href="#">
              <span class="Pagination-item Pagination-item--next">
<svg viewBox="0 0 24 24" width="24" height="24" aria-labelledby="pagination-next-title" class="Icon">                  <title id="pagination-next-title">Next:</title>

  <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="15 5 22 12 15 19"/>
    <line x1="20" y1="12" x2="2" y2="12"/>
  </g>
</svg>              </span>
            <span class="u-hiddenVisually">Page</span>
            3
          </a>
    </li>
    <li>
      <a class="Pagination-item" href="#">
            <span class="u-hiddenVisually">Page</span>
            4
          </a>
    </li>
    <li>
      <a class="Pagination-item" href="#">
            <span class="u-hiddenVisually">Page</span>
            5
          </a>
    </li>
    <li>
      <a class="Pagination-item" href="#">
            <span class="u-hiddenVisually">Page</span>
            6
          </a>
    </li>
    <li>
      <a class="Pagination-item" href="#">
            <span class="u-hiddenVisually">Page</span>
            7
          </a>
    </li>
    <li>
      <a class="Pagination-item" href="#">
            <span class="u-hiddenVisually">Page</span>
            8
          </a>
    </li>
    <li>
      <a class="Pagination-item" href="#">
            <span class="u-hiddenVisually">Page</span>
            9
          </a>
    </li>
    <li>
      <a class="Pagination-item" href="#">
            <span class="u-hiddenVisually">Page</span>
            10
          </a>
    </li>
  </ul>
</nav>