Pagination

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

Svelte Figma

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

Classes

Class	Parent	Modifies	Description
`.s-pagination`	N/A	N/A	Base pagination style.
`.s-pagination--item`	`.s-pagination`	N/A	A child element that's used as a link and labeled with the page number.
`.s-pagination--item__clear`	N/A	`.s-pagination--item`	Clears the background and removes any interactivity. Used for ellipses and descriptions.
`.s-pagination--item__nav`	N/A	`.s-pagination--item`	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.
`.is-selected`	N/A	`.s-pagination--item`	Active state that's applied to the current page.

Example

Section titled Example

<nav class="s-pagination" aria-label="pagination">
    <ul>
        <li>
            <a class="s-pagination--item s-pagination--item__nav" href="#">
                @Svg.ArrowLeft
                <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>
            <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 s-pagination--item__nav" href="…">
                @Svg.ArrowRight
                <span class="v-visible-sr">next page</span>
            </a>
        </li>
    </ul>
</nav>