Sections

Pagination

Razor

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

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.
<div class="s-pagination">
<span class="s-pagination--item is-selected" aria-current="page">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
Deploys by Netlify