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

1
2
3
4
5
6
7
8
9
10
<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