Pagination

Provide pagination links for your site or app with the multi-page pagination component.



Basic example

This simple pagination layout is great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.




States

Links are customizable for different circumstances. Use .disabled for unclickable links, .active to indicate the current page and .elips to indicate a number of pages have been skipped.




Styles

The pagination component can be easily styled a few different ways by simply adding an extra class. Use the .pagination-btns class to style them as individual buttons or the .pagination-borderless for a text-only style.