Pagination

<!-- SASS: src/stylesheets/_components/pagination.scss -->

<h6>Pagination - Default</h6>
<nav class="vaux-pagination" aria-label="Pagination Navigation">
    <ul>
        <li class="vaux-pagination-previous vaux-pagination-disabled"><a href="#" aria-label="Previous" tabindex="-1"><span>Previous</span></a></li>
        <li class="vaux-pagination-page-counter">Page 1 of 10</li>
        <li class="vaux-pagination-active"><a href="#" aria-label="Current Page">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="vaux-pagination-next"><a href="#" aria-label="Next"><span>Next</span></a></li>
    </ul>
</nav>

<h6>Pagination - Large Page Count</h6>
<nav class="vaux-pagination" aria-label="Pagination Navigation">
    <ul>
        <li class="vaux-pagination-previous vaux-pagination-disabled" tab-index="-1"><a href="#" aria-label="Previous" tabindex="-1"><span>Previous</span></a></li>
        <li class="vaux-pagination-page-counter">Page 1 of 10</li>
        <li class="vaux-pagination-active"><a href="#" aria-label="Current Page">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="vaux-pagination-ellipsis"><span>. . .</span></li>
        <li><a href="#">50</a></li>
        <li class="vaux-pagination-next"><a href="#" aria-label="Next"><span>Next</span></a></li>
    </ul>
</nav>

<h6>Pagination - Range Example</h6>
<nav class="vaux-pagination" aria-label="Pagination Navigation">
    <ul>
        <li class="vaux-pagination-previous"><a href="#" aria-label="Previous"><span>Previous</span></a></li>
        <li class="vaux-pagination-page-counter">Page 7 of 10</li>
        <li><a href="#">1</a></li>
        <li class="vaux-pagination-ellipsis"><span>. . .</span></li>
        <li class="vaux-pagination-active"><a href="#" aria-label="Current Page">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li><a href="#">11</a></li>
        <li class="vaux-pagination-ellipsis"><span>. . .</span></li>
        <li><a href="#">50</a></li>
        <li class="vaux-pagination-next"><a href="#" aria-label="Next"><span>Next</span></a></li>
    </ul>
</nav>