CSS Components and Styleguide

Paginators

Use a paginator when content needs to be broken into multiple pages.

Paginators have a lot of pieces, check the markup for a full view.

Example

A paginator on the 1st page

Showing 1 - 10 of 57

An expanded paginator

Showing 20 - 22 of 42

Markup: components/paginators/paginators.html

                    <p>A paginator on the 1st page</p>
<div class="paginator">
    <span class="paginator__range">Showing 1 - 10 of 57</span>
    <ol class="paginator__list">
        <li class="paginator__item">
            <a
                class="paginator__link paginator__link--active"
                href="#"
                aria-label="Page 1 of 57"
            >1</a>
        </li>
        <li class="paginator__item">
            <a class="paginator__link" href="#" aria-label="Page 2 of 57">2</a>
        </li>
        <li class="paginator__item">
            <a class="paginator__link" href="#" aria-label="Page 3 of 57">3</a>
        </li>
        <li class="paginator__item">&hellip;</li>
        <li class="paginator__item">
            <a class="paginator__link" href="#" aria-label="Page 57 of 57">57</a>
        </li>
        <li class="paginator__item">
            <a class="paginator__link" href="#" title="Next page">
                <svg class="icon icon--md">
                    <use xlink:href="#ei-chevron-right"></use>
                </svg>
            </a>
        </li>
    </ol>
</div>

<p>An expanded paginator</p>
<div class="paginator">
    <span class="paginator__range">Showing 20 - 22 of 42</span>
    <ol class="paginator__list">
        <li class="paginator__item">
            <a class="paginator__link" href="#" title="Previous page">
                <svg class="icon icon--md">
                    <use xlink:href="#ei-chevron-left"></use>
                </svg>
            </a>
        </li>
        <li class="paginator__item">
            <a class="paginator__link" href="#" aria-label="Page 1 of 42">1</a>
        </li>
        <li class="paginator__item">&hellip;</li>
        <li class="paginator__item"><a class="paginator__link" href="#" aria-label="Page 20 of 42">20</a></li>
        <li class="paginator__item">
            <a class="paginator__link  paginator__link--active" href="#" aria-label="Page 21 of 42">21</a>
        </li>
        <li class="paginator__item"><a class="paginator__link" href="#" aria-label="Page 22 of 42">22</a></li>
        <li class="paginator__item">&hellip;</li>
        <li class="paginator__item"><a class="paginator__link" href="#" aria-label="Page 42 of 42">42</a></li>
        <li class="paginator__item">
            <a class="paginator__link" href="#" title="Next page">
                <svg class="icon icon--md">
                    <use xlink:href="#ei-chevron-right"></use>
                </svg>
            </a>
        </li>
    </ol>
</div>

Source: components/paginators/_paginators.scss, line 1