Pagination

Pagination communicates the number of elements that can be loaded within a given context. It shows the user where they are and enables direct access to content items.

1. Step-based Pagination

Shows all available and directly selectable pages. The current position is shown via underlining and strong contrast.

2. Stepless Pagination (Linear)

Shows current position and total pages. Navigation is restricted to forwards/backwards linear movement.

3. Dark Theme

White text and indicators for use on dark backgrounds.

<!-- Numbered (Step-based) -->
<div class="pagination pagination--steps pagination--light">
  <button class="pagination__item">1</button>
  <button class="pagination__item is-active">2</button>
</div>

<!-- Counter (Stepless) -->
<div class="pagination pagination--linear pagination--light">
  <button class="pagination__item">←</button>
  <div class="pagination__item">
    <span class="pagination__counter">1</span> / <span class="pagination__total">10</span>
  </div>
  <button class="pagination__item">→</button>
</div>