1.6 atoms.pagination Pagination

Toggle example guides Toggle HTML markup

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">&laquo;</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">&raquo; </span>
            <span>Volgende</span>
        </a>
    </li>
</ul>
Source: components/atoms/pagination/_pagination.scss, line 1