Sections

Pagination

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

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

<div class="s-pagination">
    <span class="s-pagination--item is-selected">1</span>
    <a class="s-pagination--item" href="…">2</a>
    <a class="s-pagination--item" href="…">3</a>
    <a class="s-pagination--item" href="…">4</a>
    <a class="s-pagination--item" href="…">5</a>
    <span class="s-pagination--item s-pagination--item__clear">…</span>
    <a class="s-pagination--item" href="…">1096917</a>
    <a class="s-pagination--item" href="…">Next</a>
</div>

1 2 3 4 5 … 1096917 Next

Edit on GitHub