Pagination

Numbered page links with previous/next controls and ellipsis for collapsed ranges. The active page uses aria-current="page". Sizes go from --sm (32px) to --lg (48px).

Default pagination

<nav class="ln-pagination" aria-label="Pagination">
  <ul class="ln-pagination__list">
    <li><a class="ln-pagination__link" href="#">&larr; Prev</a></li>
    <li><a class="ln-pagination__link" href="#">1</a></li>
    <li><a class="ln-pagination__link" href="#">2</a></li>
    <li><a class="ln-pagination__link" href="#" aria-current="page">3</a></li>
    <li><a class="ln-pagination__link" href="#">4</a></li>
    <li><span class="ln-pagination__ellipsis">&hellip;</span></li>
    <li><a class="ln-pagination__link" href="#">12</a></li>
    <li><a class="ln-pagination__link" href="#">Next &rarr;</a></li>
  </ul>
</nav>

Simple pagination

<nav class="ln-pagination ln-pagination--simple" aria-label="Pagination">
  <ul class="ln-pagination__list">
    <li><a class="ln-pagination__link" href="#">&larr; Previous</a></li>
    <li><a class="ln-pagination__link" href="#">Next &rarr;</a></li>
  </ul>
</nav>

Compact pagination

<nav class="ln-pagination ln-pagination--compact" aria-label="Pagination">
  <ul class="ln-pagination__list">
    <li><a class="ln-pagination__link" href="#">&larr;</a></li>
    <li><span class="ln-pagination__summary">Page 3 of 12</span></li>
    <li><a class="ln-pagination__link" href="#">&rarr;</a></li>
  </ul>
</nav>

Text pagination

<nav class="ln-pagination ln-pagination--text" aria-label="Pagination">
  <ul class="ln-pagination__list">
    <li><a class="ln-pagination__link" href="#">&larr; Prev</a></li>
    <li><a class="ln-pagination__link" href="#">1</a></li>
    <li><a class="ln-pagination__link" href="#">2</a></li>
    <li><a class="ln-pagination__link" href="#" aria-current="page">3</a></li>
    <li><a class="ln-pagination__link" href="#">4</a></li>
    <li><span class="ln-pagination__ellipsis">&hellip;</span></li>
    <li><a class="ln-pagination__link" href="#">12</a></li>
    <li><a class="ln-pagination__link" href="#">Next &rarr;</a></li>
  </ul>
</nav>

Reference

Class	Description	Responsive
`.ln-pagination`	Pagination container	No
`.ln-pagination__list`	Flex row of page links	No
`.ln-pagination__link`	Individual page link or arrow	No
`.ln-pagination__ellipsis`	Truncation indicator	No
`.ln-pagination__summary`	Page count summary text	No
`.ln-pagination--sm`	Smaller link targets	No
`.ln-pagination--simple`	Previous / Next only	No
`.ln-pagination--compact`	Compact link style	No
`.ln-pagination--text`	Text-link style pagination	No