Navigation Elements: Pagination

For content that span multiple pages (e.g., collection items, catalog items). Arrows are added via CSS for easy customization. 


<nav class="nav nav--pagination" role="navigation" aria-label="Pagination">
    <span class="nav--pagination__prev"></span>
    <a href="page.html" class="nav--pagination__here" aria-disabled="true"><span>Page </span>1 <span>Current Page</span></a>
    <a href="page.html"><span>Page </span>2</a>
    <a href="page.html"><span>Page </span>3</a>
    <a href="page.html"><span>Page </span>4</a>
    <a href="page.html"><span>Page </span>5</a>
    <a href="page.html"><span>Page </span>6</a>
    <a href="page.html"><span>Page </span>7</a>
    <a href="page.html"><span>Page </span>8</a>
    <a href="page.html"><span>Page </span>9</a>
    <span class="nav--pagination__spread"></span>
    <a href="page.html"><span>Page </span>19</a>
    <a href="page.html" class="nav--pagination__next"><span>Next Page</span></a>
</nav>