Navigation

Pagination

The pagination component is displayed at the bottom of each index page and allows the user to navigate forwards and backwards through the pages without having to return to the links at the top of the page.

Open this pagination example in a new tab
HTML
<nav class="occlss-pagination" role="navigation" aria-label="Pagination">
  <ul class="occlss-pagination__list">
    <li class="occlss-pagination__item occlss-pagination__item--previous">
      <a href="javascript:void(0);" class="occlss-pagination__link" rel="prev">
        <span class="occlss-pagination__link-title">Previous</span>
        <span class="occlss-u-visuallyhidden">:</span>
        <span class="occlss-pagination__link-label">Overview</span>
      </a>
    </li>
    <li class="occlss-pagination__item occlss-pagination__item--next">
      <a href="javascript:void(0);" class="occlss-pagination__link" rel="next">
        <span class="occlss-pagination__link-title">Next</span>
        <span class="occlss-u-visuallyhidden">:</span>
        <span class="occlss-pagination__link-label">What you need before applying for a permit</span>
      </a>
    </li>
  </ul>
</nav>

Changelog

1.0.0

  • Component added