Pager
The pager allows the user to navigate through multiple pages of search results.
<nav class="occlss-pager" aria-labelledby="pagination-heading">
<strong id="pagination-heading" class="occlss-u-visuallyhidden">Pagination</strong>
<ul class="occlss-pager__items js-pager__items">
<li class="occlss-pager__item occlss-pager__item--first">
<a href="?combine=&page=0" title="Go to first page" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">First page</span>
<span aria-hidden="true">First</span>
</a>
</li>
<li class="occlss-pager__item occlss-pager__item--previous">
<a href="?combine=&page=5" title="Go to previous page" rel="prev" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">Previous page</span>
<span aria-hidden="true">Previous</span>
</a>
</li>
<li class="occlss-pager__item occlss-pager__item--ellipsis" role="presentation">…</li>
<li class="occlss-pager__item">
<a href="?combine=&page=4" title="Go to page 5" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">
Page
</span>5</a>
</li>
<li class="occlss-pager__item">
<a href="?combine=&page=5" title="Go to page 6" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">
Page
</span>6</a>
</li>
<li class="occlss-pager__item is-active">
<a href="?combine=&page=6" title="Current page" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">
Current page
</span>7</a>
</li>
<li class="occlss-pager__item">
<a href="?combine=&page=7" title="Go to page 8" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">
Page
</span>8</a>
</li>
<li class="occlss-pager__item">
<a href="?combine=&page=8" title="Go to page 9" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">
Page
</span>9</a>
</li>
<li class="occlss-pager__item occlss-pager__item--ellipsis" role="presentation">…</li>
<li class="occlss-pager__item occlss-pager__item--next">
<a href="?combine=&page=7" title="Go to next page" rel="next" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">Next page</span>
<span aria-hidden="true">Next</span>
</a>
</li>
<li class="occlss-pager__item occlss-pager__item--last">
<a href="?combine=&page=15" title="Go to last page" class="occlss-pager__link">
<span class="occlss-u-visuallyhidden">Last page</span>
<span aria-hidden="true">Last</span>
</a>
</li>
</ul>
</nav>
Changelog
2.4.2
- Colour for selected item fix
2.2.0
- Heading changed to strong from h4
1.0.0
- Component added