Pagination

The .pl-c-pagination component provides navigation for paginated data. Previous and Next buttons flank numbered page buttons. The active page uses aria-current="page".

Semantic HTML

<nav class="pl-c-pagination" aria-label="Page navigation">
  <button class="pl-c-pagination__nav" disabled>‹ Prev</button>
  <button class="pl-c-pagination__page" aria-current="page">1</button>
  <button class="pl-c-pagination__page">2</button>
  <button class="pl-c-pagination__page">3</button>
  <span class="pl-c-pagination__ellipsis">…</span>
  <button class="pl-c-pagination__page">12</button>
  <button class="pl-c-pagination__nav">Next ›</button>
</nav>

Class contract