1. Docs
  2. Components
  3. Pagination
Buy Now Contact

Pagination

A list of numbered links, used as a secondary navigation.


<nav class="c-pagination u-justify-between">
    <a class="c-pagination__control" href="#">
        <i class="fa fa-caret-left"></i>
    </a>
    <p class="c-pagination__counter">Page 2 of 3</p>
    <a class="c-pagination__control" href="#">
        <i class="fa fa-caret-right"></i>
    </a>
</nav>

With Numbers


<ul class="c-pagination__list">
        <li class="c-pagination__item">
            <a class="c-pagination__control" href="#">
                <i class="fa fa-caret-left"></i>
            </a>
        </li>
        <li class="c-pagination__item"><a class="c-pagination__link" href="#">2</a></li>
        <li class="c-pagination__item"><a class="c-pagination__link" href="#">3</a></li>
        <li class="c-pagination__item"><a class="c-pagination__link" href="#">4</a></li>
        <li class="c-pagination__item"><a class="c-pagination__link" href="#">5</a></li>
        <li class="c-pagination__item"><a class="c-pagination__link is-active" href="#">4</a></li>
        <li class="c-pagination__item"><a class="c-pagination__link" href="#">6</a></li>
        <li class="c-pagination__item">
            <a class="c-pagination__control" href="#">
                <i class="fa fa-caret-right"></i>
            </a>
        </li>
    </ul>
</nav>

With Buttons


<nav class="c-pagination u-justify-between">
    <a class="c-pagination__control u-text-dark" href="#">
        <i class="fa fa-caret-left u-mr-xsmall"></i>Previous
    </a>
    <a class="c-pagination__control u-text-dark" href="#">
        Next<i class="fa fa-caret-right u-ml-xsmall"></i>
    </a>
</nav>