Pagination

<section id="top" class="iv-stack iv-u-gap-6">
  <nav class="iv-pagination" aria-label="Pagination">
    <ul class="iv-pagination__list">
      <li><span class="iv-pagination__link" aria-disabled="true">Previous</span></li>
      <li><a class="iv-pagination__link" href="#top" aria-current="page" aria-label="Page 1, current page">1</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 2">2</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 3">3</a></li>
      <li><span class="iv-pagination__ellipsis" aria-hidden="true">…</span></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 24">24</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Next page">Next</a></li>
    </ul>
  </nav>

  <nav class="iv-pagination" aria-label="Pagination, last page">
    <ul class="iv-pagination__list">
      <li><a class="iv-pagination__link" href="#top" aria-label="Previous page">Previous</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-label="Page 23">23</a></li>
      <li><a class="iv-pagination__link" href="#top" aria-current="page" aria-label="Page 24, current page">24</a></li>
      <li><span class="iv-pagination__link" aria-disabled="true">Next</span></li>
    </ul>
  </nav>

  <p class="iv-u-m-0 iv-u-text-sm">
    Every page link points back to this section: the fixture demonstrates the
    states, not a real archive. A previous or next step with no destination is a
    <code>&lt;span&gt;</code> with <code>aria-disabled="true"</code>, so it is
    neither focusable nor a link to nowhere.
  </p>
</section>