Pagination

Pagination splits content into pages, as seen on questions, tags, users, and jobs listings.

Classes

Class	Description	Parent	Modifies
`.s-pagination`	Base pagination style.	N/A	N/A
`.s-pagination--item`	A child element that's used as a link and labeled with the page number.	`.s-pagination`	N/A
`.s-pagination--item__clear`	Clears the background and removes any interactivity. Used for ellipses and descriptions.	N/A	`.s-pagination--item`
`.s-pagination--item__nav`	Styles the Next or Previous button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page.	N/A	`.s-pagination--item`
`.is-selected`	Active state that's applied to the current page.	N/A	`.s-pagination--item`

Example

<nav class="s-pagination" aria-label="pagination">
    <ul>
        <li>
            <a class="s-pagination--item s-pagination--item__nav" href="#">
                <svg aria-hidden="true">…</svg>
                <span class="v-visible-sr">previous page</span>
            </a>
        </li>
        <li>
            <a class="s-pagination--item is-selected" href="…" aria-current="page">
                <span class="v-visible-sr">page</span>
                1
            </a>
        </li>
        <li>
            <a class="s-pagination--item" href="…">
                <span class="v-visible-sr">page</span>
                2
            </a>
        </li>
        <li>
            <span class="s-pagination--item s-pagination--item__clear">…</span>
        </li>
        <li>
            <a class="s-pagination--item" href="…">
                <span class="v-visible-sr">page</span>
                122386
            </a>
        </li>
        <li>
            <a class="s-pagination--item s-pagination--item__nav" href="…">
                <svg aria-hidden="true">…</svg>
                <span class="v-visible-sr">next page</span>
            </a>
        </li>
    </ul>
</nav>