1.6 atoms.pagination Pagination
A majority of pagination in the site are built from the same base class.
Examples
Default styling
.pagination-sm
Small pagination.
.pagination-lg
Large pagination.
Markup: components/atoms/pagination/pagination.twig
<ul class="pagination [modifier class]">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Vorige</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">» </span>
<span>Volgende</span>
</a>
</li>
</ul>
Source:
components/atoms/pagination/_pagination.scss
, line 1