Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
<nav aria-label="Page navigation example">
<ul class="pagination gap-2">
<li class="page-item">
<a class="icon-xl fs-5 page-link pagination_item border-0 rounded-circle icon-shape fw-bold bg-neutral-100 text-900" href="#" aria-label="Previous">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<path class="stroke-dark" d="M9.49554 6.5L4.78125 11L9.49554 15.5" stroke="#111827" stroke-width="1.28571" stroke-linecap="round" stroke-linejoin="round" />
<path class="stroke-dark" d="M17.2143 11H5" stroke="#111827" stroke-width="1.28571" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</li>
<li class="page-item">
<a class="icon-xl fs-5 page-link pagination_item border-0 rounded-circle icon-shape fw-bold bg-neutral-100 text-900" href="#">1</a>
</li>
<li class="page-item">
<a class="icon-xl fs-5 page-link pagination_item border-0 rounded-circle icon-shape fw-bold bg-neutral-100 text-primary" href="#">2</a>
</li>
<li class="page-item">
<a class="icon-xl fs-5 page-link pagination_item border-0 rounded-circle icon-shape fw-bold bg-neutral-100 text-900" href="#">3</a>
</li>
<li class="page-item">
<a class="icon-xl fs-5 page-link pagination_item border-0 rounded-circle icon-shape fw-bold bg-neutral-100 text-900" href="#">...</a>
</li>
<li class="page-item">
<a class="icon-xl fs-5 page-link pagination_item border-0 rounded-circle icon-shape fw-bold bg-neutral-100 text-900" href="#" aria-label="Next">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<path class="stroke-dark" d="M12.5 6.5L17.2143 11L12.5 15.5" stroke="#111827" stroke-width="1.28571" stroke-linecap="round" stroke-linejoin="round" />
<path class="stroke-dark" d="M16.9955 11H4.78125" stroke="#111827" stroke-width="1.28571" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</li>
</ul>
</nav>