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

<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