Sections

Pagination

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

Classes

Section titled Classes

Class	Applied to	Description
`.s-pagination`	`N/A`	Base pagination style that is used universally.
`.s-pagination--item`	`N/A`	A child element that’s used as a link and labeled with the page number.
`.is-selected`	`.s-pagination--item`	Active state that’s applied to the current page.
`.s-pagination--item__clear`	`.s-pagination--item`	Clears the background and removes any interactivity. Used for ellipses and descriptions.

Example

Section titled Example

<nav class="s-pagination" aria-label="pagination">
    <ul>
        <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>
            <a class="s-pagination--item" href="…">
                <span class="v-visible-sr">page</span>
                3
            </a>
        </li>
        <li>
            <a class="s-pagination--item" href="…">
                <span class="v-visible-sr">page</span>
                4
            </a>
        </li>
        <li>
            <a class="s-pagination--item" href="…">
                <span class="v-visible-sr">page</span>
                5
            </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" href="…">
                Next
                <span class="v-visible-sr">page</span>
            </a>
        </li>
    </ul>
</nav>

Legacy example

Section titled Legacy example

Note:The below markup has been deprecated due to insufficient accessibility. Please use the new markup above.

<div class="s-pagination">
    <a class="s-pagination--item is-selected" href="…" aria-current="page">
        <span class="v-visible-sr">page</span>
        1
    </a>
    <a class="s-pagination--item" href="…">
        <span class="v-visible-sr">page</span>
        2
    </a>
    <a class="s-pagination--item" href="…">
        <span class="v-visible-sr">page</span>
        3
    </a>
    <a class="s-pagination--item" href="…">
        <span class="v-visible-sr">page</span>
        4
    </a>
    <a class="s-pagination--item" href="…">
        <span class="v-visible-sr">page</span>
        5
    </a>
    <span class="s-pagination--item s-pagination--item__clear">…</span>
    <a class="s-pagination--item" href="…">
        <span class="v-visible-sr">page</span>
        122386
    </a>
    <a class="s-pagination--item" href="…">
        Next
        <span class="v-visible-sr">page</span>
    </a>
</div>

page 1 page 2 page 3 page 4 page 5 … page 122386 Next page

Deploys by Netlify