Usage
Pagination
First item selected:
<nav role="navigation" aria-label="Page navigation">
<ul class="Pagination">
<li class="Pagination__item">
<a href="#" class="Pagination__link Pagination__link--current" aria-current="page">
<span class="accessibility-hidden">Current Page, Page 1</span>
<span aria-hidden="true">1</span>
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 2">
<span class="accessibility-hidden">page</span>
2
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 3">
<span class="accessibility-hidden">page</span>
3
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 4">
<span class="accessibility-hidden">page</span>
4
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 5">
<span class="accessibility-hidden">page</span>
5
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Button Button--secondary Button--square">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#chevron-right" />
</svg>
<span class="accessibility-hidden">Next</span>
</a>
</li>
</ul>
</nav>Middle item selected:
<nav role="navigation" aria-label="Page navigation">
<ul class="Pagination">
<li class="Pagination__item">
<a href="#" class="Button Button--secondary Button--square">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#chevron-left" />
</svg>
<span class="accessibility-hidden">Previous</span>
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 11">
<span class="accessibility-hidden">page</span>
11
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 12">
<span class="accessibility-hidden">page</span>
12
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link Pagination__link--current" aria-current="page">
<span class="accessibility-hidden">Current Page, Page 13</span>
<span aria-hidden="true">13</span>
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 14">
<span class="accessibility-hidden">page</span>
14
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 15">
<span class="accessibility-hidden">page</span>
15
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Button Button--secondary Button--square">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#chevron-right" />
</svg>
<span class="accessibility-hidden">Next</span>
</a>
</li>
</ul>
</nav>Last item selected:
<nav role="navigation" aria-label="Page navigation">
<ul class="Pagination">
<li class="Pagination__item">
<a href="#" class="Button Button--secondary Button--square">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#chevron-left" />
</svg>
<span class="accessibility-hidden">Previous</span>
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 109">
<span class="accessibility-hidden">page</span>
109
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 110">
<span class="accessibility-hidden">page</span>
110
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 111">
<span class="accessibility-hidden">page</span>
111
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link" aria-label="Go to Page 112">
<span class="accessibility-hidden">page</span>
112
</a>
</li>
<li class="Pagination__item">
<a href="#" class="Pagination__link Pagination__link--current" aria-current="page">
<span class="accessibility-hidden">Current Page, Page 113</span>
<span aria-hidden="true">113</span>
</a>
</li>
</ul>
</nav>