Pistachio the front end framework and pattern library for graze.com

contents:


    pagination

    Sometimes we have lots of content that needs to be split into pages. This is where our pagination component comes in handy.

    The pagination module is set to inline-block by default so you can use the responsive text alignment utilities to influence it's positioning across various viewport sizes. This is the recommended approach (centered on mobile, right aligned on desktop).

    default

    <nav class="pagination text-center text-right-md">
        <p id="pagination-label" class="pagination__description">
            showing 1 to 50 of 243 snacks <a href="#" class="link-aside">view all</a>
        </p>
        <ul role="navigation" aria-labelledby="pagination-label" class="pagination__list">
            <li>
                <a class="pagination__list__item pagination__list__item--disabled" href="#" tabindex="-1" rel="prev" aria-label="Previous">
                    <span aria-hidden="true">
                        <i class="fa fa-chevron-left"></i>
                    </span>
                </a>
            </li>
            <li>
                <a class="pagination__list__item pagination__list__item--active" tabindex="-1" href="#">
                    <span class="sr-only">you're currently on page </span>1
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>2
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>3
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>4
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>5
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#" rel="next" aria-label="Next">
                    <span aria-hidden="true">
                        <i class="fa fa-chevron-right"></i>
                    </span>
                </a>
            </li>
        </ul>
    </nav>

    vertical

    This version use the .pagination--vertical class to stack the description above the pagination and centers it.

    <nav class="pagination pagination--vertical">
        <p id="pagination-label" class="pagination__description">
            showing 1 to 50 of 243 snacks <a href="#" class="link-aside">view all</a>
        </p>
        <ul role="navigation" aria-labelledby="pagination-label" class="pagination__list">
            <li>
                <a class="pagination__list__item pagination__list__item--disabled" href="#" tabindex="-1" rel="prev" aria-label="Previous">
                    <span aria-hidden="true">
                        <i class="fa fa-chevron-left"></i>
                    </span>
                </a>
            </li>
            <li>
                <a class="pagination__list__item pagination__list__item--active" tabindex="-1" href="#">
                    <span class="sr-only">you're currently on page </span>1
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>2
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>3
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>4
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#">
                    <span class="sr-only">page </span>5
                </a>
            </li>
            <li>
                <a class="pagination__list__item" href="#" rel="next" aria-label="Next">
                    <span aria-hidden="true">
                        <i class="fa fa-chevron-right"></i>
                    </span>
                </a>
            </li>
        </ul>
    </nav>