Pager

Default pagination in Kube is organized using nav element, with visual cues for the user what is the current page, and page numbers for easier navigation.

Base

<nav class="pager">
    <a href="#" class="is-prev"></a>
    <a href="#">1</a>
    <a href="#" class="is-active">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#" class="is-next"></a>
</nav>

Simple

Previous/Next items are all that you need to navigate the user through pages in most cases.

<nav class="pager">
    <a href="#" class="is-prev">Previous</a>
    <a href="#" class="is-next">Next</a>
</nav>

Current

The .is-current modifier will help to show which page the user is.

<nav class="pager">
    <a href="" class="is-prev">Previous</a>
    <span class="is-current">2 of 10</span>
    <a href="" class="is-next">Next</a>
</nav>

Disabled State

Use the .is-disabled modifier to indicate the off state of the pager item.

<nav class="pager">
    <a href="" class="is-prev is-disabled">Previous</a>
    <a href="" class="is-next">Next</a>
</nav>

Stacked

The stacked pager is the most incredible option to navigate through blog posts, articles, etc.

<nav class="pager is-stacked">
    <a href="#" class="is-prev" data-label="Prev">...</a>
    <a href="#" class="is-next" data-label="Next">...</a>
</nav>