Pagination - USAC | Indigo Design System v1.2.0

Overview

Pagination is a user interface pattern that divides content into separate pages. It prevents pages from becoming too long and overwhelming. It’s handy because users are likely to look for what they want close to the top of a page, but may still need to find something lower down in the content.

These pagination guidelines are designed to ensure consistency across all USAC products.

Design and Implementation

Display the pagination component at the bottom of a list or content area when it is long enough that it needs to be broken up.

If it is a list (for example, a data table), pagination allows users to choose how many items they will see on each page. Users can choose to see 25, 50, 75, or 100 records per page.

Users can navigate through the pages by using the next and back arrows or by entering a page number of their choice.

Displaying 25 of 5,120 records No results found. Show records/page of 512 pages

html

Copy to Clipboard

<div class="indi-pagination">
    <div class="indi-pagination__results-label">Displaying 25 of 5,120 records</div>
    <div class="indi-pagination__results">
        <h2 class="indi-pagination__message">No results found.</h2>
    </div>
    <div class="indi-pagination__controls">
        <div class="indi-pagination__controls-cell">
            <span class="indi-pagination__label">Show</span>
            <div class="indi-pagination__select">
                <select aria-label="Page Limit" class="indi-pagination__select-input" id="pagelimit" name="pagelimit">
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="75">75</option>
                    <option value="100">100</option>
                </select>
                <svg class="indi-icon indi-pagination__select-open-icon" aria-labelledby="title">
                    <title>caret-down</title>
                    <use xlink:href="/assets/icons/indi_icons.svg#caret-down">
                </svg>
            </div>
            <span class="indi-pagination__label">records/page</span>
        </div>
        <div class="indi-pagination__controls-cell indi-pagination__controls-cell--nav">
            <ul class="indi-pagination__nav">
                <li class="indi-pagination__nav-cell">
                    <a href="#" aria-label="Previous Page" class="indi-pagination__nav-button indi-pagination__nav-button--previous">
                        <svg class="indi-icon indi-pagination__nav-icon" aria-labelledby="title">
                            <title>caret-left</title>
                            <use xlink:href="/assets/icons/indi_icons.svg#caret-left">
                        </svg>
                    </a>
                </li>
                <li class="indi-pagination__nav-cell">
                    <input aria-label="Page Number" class="indi-pagination__nav-input" id="pagenumber" name="pagenumber" type="number" value="2" /> </li>
                <li class="indi-pagination__nav-cell">
                    <a href="#" aria-label="Next Page" class="indi-pagination__nav-button indi-pagination__nav-button--next">
                        <svg class="indi-icon indi-pagination__nav-icon" aria-labelledby="title">
                            <title>caret-right</title>
                            <use xlink:href="/assets/icons/indi_icons.svg#caret-right">
                        </svg>
                    </a>
                </li>
            </ul>
            <span> of 512 pages </span>
        </div>
    </div>
</div>

Use Guidelines

Use When

A list, such as a data table, has so many items that it’s not easy to show on one screen. This also helps with page load times for lots of data.
Displaying search results.
Moving a user through steps in a process.
Navigating a photo or video gallery.

Don't Use When

Presenting linear content flow. For example, an individual article or story should never be broken up into multiple screens.

Accessibility

Include aria-label attributes on Pagination control elements as descriptive labels:
- <select aria-label="Page Limit"...
- <a href="#" aria-label="Previous Page"...
- <input aria-label="Page Number"...
- <a href="#" aria-label="Next Page"...