Kube

Kube

Pagination

Default pagination in Kube is organized using lists, with visual cues for the user what is the current page, and page numbers for easier navigation. Pagination buttons and multiline formats are available out-of-the-box as well.

Base

<nav class=“pagination”>
    <ul>
        <li class=“prev”><a href=””>&larr;</a></li>
        <li>
            <ul>
                <li><span>…</span></li>
                <li><a href=””>…</a></li>
            </ul>
        </li>
        <li class=“next”><a href=””>&rarr;</a></li>
    </ul>
</nav>

Centered

<nav class=“pagination align-center”>
    <ul>
        <li class=“prev”><a href=””>&larr;</a></li>
        <li>
            <ul>
                <li class=“active”><a href=”#”>…</a></li>
                <li><a href=””>…</a></li>
            </ul>
        </li>
        <li class=“next”><a href=””>&rarr;</a></li>
    </ul>
</nav>

Wide

Here you can see an example where previous and next buttons are aligned to the left and to the right, with a link in the center of the page.

<nav class=“pagination align-center upper strong”>
    <ul>
        <li class=“prev”><a href=””>&lt; Prev</a></li>
        <li class=“w100”>
            <ul>
                <li><a href=””>…</a></li>
            </ul>
        </li>
        <li class=“next”><a href=””>Next &gt;</a></li>
    </ul>
</nav>

<nav class=“pagination pager”>
    <ul>
        <li class=“prev”><a href=””>Previous</a></li>
        <li class=“next”><a href=””>Next</a></li>
    </ul>
</nav>

<nav class=“pagination pager align-center”>
    <ul>
        <li class=“prev”><a href=””>Previous</a></li>
        <li class=“next”><a href=””>Next</a></li>
    </ul>
</nav>

Elements within a single list item can be stacked to create a clean and intuitive pagination elements.

<nav class=“pagination pager flat”>
    <ul>
        <li class=“prev”>
            <span class=“label tag”>Prev</span>
            <a href=””>…</a>
        </li>
        <li class=“next”>
            <span class=“label tag”>Next</span>
            <a href=””>…</a>
        </li>
    </ul>
</nav>