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>