Pagination

Provide pagination links with the multi-page pagination component, or the simpler 'show some more' alternative

Default pagination

Simple pagination mainly used for search results. The buttons are hard to miss, easily scalable, and provides large click areas. Link always go to an unique url, so the result page can be shared and export functionalities across multiple pages can work.

  <ul class="pager">
    <li class="pager-current">1</li>
    <li class="pager-item"><a href="#">2</a></li>
    <li class="pager-item"><a href="#">3</a></li>
    <li class="pager-item"><a href="#">4</a></li>
    <li class="pager-item"><a href="#">5</a></li>
    <li class="pager-item"><a href="#">6</a></li>
    <li class="pager-ellipsis">...</li>
    <li class="pager-item"><a href="#">10</a></li>
    <li class="pager-next"><a href="#">next ›</a></li>
    <li class="pager-last"><a href="#">last »</a></li>
  </ul>

Show more pager

Simple button which which uses ajax to retrieve more item of a result list. Mainly used in overviews (list of stacked nodes). This pager should not be used on tables.