Pagination

Glass-effect pagination controls. Build a .ziom-pagination nav of .ziom-pagination-item links; mark the current page with active.

App pagination is generated by Kaminari, which still emits Bootstrap pagination markup. Wrap it in .ziom-pagination-override to apply Ziom styling, or migrate to the native classes below.

Basic

HTML

<nav class="ziom-pagination">
  <a href="#" class="ziom-pagination-item ziom-pagination-prev"><i class="ph ph-caret-left"></i></a>
  <a href="#" class="ziom-pagination-item">1</a>
  <a href="#" class="ziom-pagination-item active">2</a>
  <a href="#" class="ziom-pagination-item">3</a>
  <span class="ziom-pagination-ellipsis">…</span>
  <a href="#" class="ziom-pagination-item">10</a>
  <a href="#" class="ziom-pagination-item ziom-pagination-next"><i class="ph ph-caret-right"></i></a>
</nav>

Simple (Prev / Next)

HTML

<nav class="ziom-pagination-simple">
  <a href="#" class="ziom-btn ziom-btn-secondary">Previous</a>
  <span class="ziom-pagination-simple-info">Page 2 of 10</span>
  <a href="#" class="ziom-btn ziom-btn-secondary">Next</a>
</nav>

Result Count

Showing 1–10 of 100 results

HTML

<div class="ziom-pagination-info">
  Showing <strong>1&ndash;10</strong> of <strong>100</strong> results
</div>