Skip to main content
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">
<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>
Deploys by Netlify