Example
Markup: components/pagination/pagination.twig
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h4 id="pagination-heading" class="visuallyhidden">Pagination</h4>
<ul class="pager__items">
<li class="pager__item is-active">
<a href="#">
<span class="visuallyhidden">
Current Page
</span>1</a>
</li>
<li class="pager__item">
<a href="#">
<span class="visuallyhidden">
Page
</span>2</a>
</li>
<li class="pager__item">
<a href="" title="Current page">
<span class="visuallyhidden">
Page
</span>3</a>
</li>
<li class="pager__item pager__item--next">
<a href="#" title="Go to next page" rel="next">
<span class="visuallyhidden">Next page</span>
<span aria-hidden="true">››</span>
</a>
</li>
</ul>
</nav>
Source:
_sr18-styleguide.scss
, line 371