Pagination

Updated on pzplUI 1.6

Pagination

<nav>
    <ul class="pagination">
        <li class="pag-item"><a class="pag-link" href="#">Previous</a></li>
        <li class="pag-item active" aria-current="page">
            <span class="pag-link">
                            1
                            <span class="sr-only">(current)</span>
            </span>
        </li>
        <li class="pag-item"><a class="pag-link" href="#">2</a></li>
        <li class="pag-item"><a class="pag-link" href="#">3</a></li>
        <li class="pag-item"><a class="pag-link" href="#">Next</a></li>
    </ul>
</nav>
<nav>
    <ul class="pagination">
        <li class="pag-item active" aria-current="page">
            <span class="pag-link">
                            1
                            <span class="sr-only">(current)</span>
            </span>
        </li>
        <li class="pag-item"><a class="pag-link" href="#">2</a></li>
        <li class="pag-item"><a class="pag-link" href="#">3</a></li>
    </ul>
</nav>

Centered pagination

<nav>
    <ul class="pagination center-flex">
        <li class="pag-item active" aria-current="page">
            <span class="pag-link">
                            1
                            <span class="sr-only">(current)</span>
            </span>
        </li>
        <li class="pag-item"><a class="pag-link" href="#">2</a></li>
        <li class="pag-item"><a class="pag-link" href="#">3</a></li>
    </ul>
</nav>

Sizes

<nav>
    <ul class="pagination">
        <li class="pag-item active" aria-current="page">
            <span class="pag-link">
                            1
                            <span class="sr-only">(current)</span>
            </span>
        </li>
        <li class="pag-item"><a class="pag-link" href="#">2</a></li>
        <li class="pag-item"><a class="pag-link" href="#">3</a></li>
    </ul>
</nav>
<nav>
    <ul class="pagination pag-lg">
        <li class="pag-item active" aria-current="page">
            <span class="pag-link">
                            1
                            <span class="sr-only">(current)</span>
            </span>
        </li>
        <li class="pag-item"><a class="pag-link" href="#">2</a></li>
        <li class="pag-item"><a class="pag-link" href="#">3</a></li>
    </ul>
</nav>
<nav>
    <ul class="pagination pag-sm">
        <li class="pag-item active" aria-current="page">
            <span class="pag-link">
                            1
                            <span class="sr-only">(current)</span>
            </span>
        </li>
        <li class="pag-item"><a class="pag-link" href="#">2</a></li>
        <li class="pag-item"><a class="pag-link" href="#">3</a></li>
    </ul>
</nav>