Pagination

Various flexible pagination options for your site

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>

Pager

<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>

Published by using 200 words.