Pagination

Pagination allows you to break up content that doesn't fit on a single page.

Class Type
pagination Pagination A class representing pagination
<nav class="pagination">
  <span href="" class="button is-text is-disabled" aria-label="prev page">
    <span class="icon-cheveron-left" aria-hidden="true"></span>
    <span class="text">Prev</span>
  </span>
  <ol class="pagination-list is-only-desktop">
    <li class="pagination-item">
      <span href="" class="button is-disabled" aria-label="page"><span class="text">1</span></span>
    </li>
    <li class="pagination-item">
      <button class="button is-text /*u-hide*/" aria-label="show prev 5 pages">
        <span class="icon"></span>
      </button>
    </li>
    <li class="pagination-item">
      <button class="button is-text" aria-label="page"><span class="text">2</span></button>
    </li>
    <li class="pagination-item">
      <button class="button is-text" aria-label="page"><span class="text">3</span></button>
    </li>
    <li class="pagination-item">
      <button class="button is-text" aria-label="page"><span class="text">4</span></button>
    </li>
    <li class="pagination-item">
      <button class="button is-text" aria-label="page"><span class="text">5</span></button>
    </li>
    <li class="pagination-item">
      <button class="button is-text" aria-label="show next 5 pages">
        <span class="icon"></span>
      </button>
    </li>
    <li class="pagination-item">
      <button class="button is-text" aria-label="page"><span class="text">20</span></button>
    </li>
  </ol>
  <a href="" class="button is-text" aria-label="next page">
    <span class="text">Next</span>
    <span class="icon-cheveron-right" aria-hidden="true"></span>
  </a>
</nav>

Best Practice

Tips to keep in mind while using pagination:

 pagination within a table
 pagination within a table

Do

Use pagination to help users find information within a table containing a large amount of data.

 pagination within a card
 pagination within a card

Don't

Make your user click through multiple pages to find what they need.