1. Base
  2. Centered
  3. Wide
  4. Pager

Base

<nav class="mi-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="mi-pagination mi-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="mi-pagination mi-pagination-align-center mi-font-upper mi-font-strong">
    <ul>
        <li class="prev"><a href="">&lt; Prev</a></li>
        <li class="mi-w100">
            <ul>
                <li><a href="">...</a></li>
            </ul>
        </li>
        <li class="next"><a href="">Next &gt;</a></li>
    </ul>
</nav>

Pager

<nav class="mi-pagination mi-pager">
    <ul>
        <li class="mi-pager-prev"><a href="">Previous</a></li>
        <li class="mi-pager-next"><a href="">Next</a></li>
    </ul>
</nav>

<nav class="mi-pagination mi-pager mi-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="mi-pagination mi-pager mi-pager-flat">
    <ul>
        <li class="prev">
            <span>Prev</span>
            <a href="">...</a>
        </li>
        <li class="next">
            <span>Next</span>
            <a href="">...</a>
        </li>
    </ul>
</nav>