pagination.html.twig in Simple Style Guide 8

<a name="pagination"></a>

<h3 class="simple-styleguide--sectionhead">{{ default_pattern }}</h3>

<div class="simple-styleguide">

    <p><strong>Full Pager:</strong></p>
    <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
        <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
        <ul class="pager__items js-pager__items">
            <li class="pager__item is-active">
                <a href="?page=0" title="Current page"><span class="visually-hidden">Current page</span>1</a>
            </li>
            <li class="pager__item">
                <a href="?page=1" title="Go to page 2"><span class="visually-hidden">Page</span>2</a>
            </li>
            <li class="pager__item">
                <a href="?page=2" title="Go to page 3"><span class="visually-hidden">Page</span>3</a>
            </li>
            <li class="pager__item">
                <a href="?page=3" title="Go to page 4"><span class="visually-hidden">Page</span>4</a>
            </li>
            <li class="pager__item pager__item--ellipsis" role="presentation">
                …
            </li>
            <li class="pager__item pager__item--next">
                <a href="?page=1" title="Go to next page" rel="next">
                    <span class="visually-hidden">Next page</span>
                    <span aria-hidden="true">Next ›</span>
                </a>
            </li>
            <li class="pager__item pager__item--last">
                <a href="?page=19" title="Go to last page">
                    <span class="visually-hidden">Last page</span>
                    <span aria-hidden="true">Last »</span>
                </a>
            </li>
        </ul>
    </nav>

    <p><strong>Mini Pager:</strong></p>
    <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
        <h4 class="pager__heading visually-hidden">Pagination</h4>
        <ul class="pager__items js-pager__items">
            <li class="pager__item pager__item--previous">
                <a href="/local-eats?page=0" title="Go to previous page" rel="prev">
                    <span class="visually-hidden">Previous page</span>
                    <span aria-hidden="true">‹ Previous</span>
                </a>
            </li>
            <li class="pager__item is-active">
                Page 2
            </li>
            <li class="pager__item pager__item--next">
                <a href="/local-eats?page=2" title="Go to next page" rel="next">
                    <span class="visually-hidden">Next page</span>
                    <span aria-hidden="true">Next ›</span>
                </a>
            </li>
        </ul>
    </nav>
</div>