Lexicon v1.0.32

Pager

Default Pager

Pager is a styled ul component to use with your pagination module.

<nav>
<ul class="pager">
    <li class="disabled previous"><a href="#">&larr; Older</a></li>
    <li class="active next"><a href="#">Newer &rarr;</a></li>
</ul>
</nav>

Aligned Pager

Align pager elements on the left and right side of its container with class previous and next.

<nav>
    <ul class="pager">
        <li class="previous"><a href="#">&larr; Older</a></li>
        <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
</nav>

Disabled Pager

<nav>
    <ul class="pager">
        <li class="disabled previous"><a href="#">&larr; Older</a></li>
        <li class="active next"><a href="#">Newer &rarr;</a></li>
    </ul>
</nav>

Pager Sizes

Add pager-sm or pager-lg to any pager component to make it smaller or bigger.

Small

<nav>
    <ul class="pager pager-sm">
        <li class="previous"><a href="#">&larr; Older</a></li>
        <li class="active next"><a href="#">Newer &rarr;</a></li>
    </ul>
</nav>

Default

Large

<nav>
    <ul class="pager pager-lg">
        <li class="previous"><a href="#">&larr; Older</a></li>
        <li class="active next"><a href="#">Newer &rarr;</a></li>
    </ul>
</nav>