Pagination

Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long, repetitive listings or content.

Basic

Add a .pagination class to a ul to get started, then add list items with links in them.

  • Create arrows by adding an .arrow class to the first and last list items.
  • To mark the current page, add a .current class to a list item.
  • Add a class of .unavailable to a list item to make it not clickable, like for the ellipsis in the middle.

Advanced

Wrap your ul.pagination with an element that has the .pagination-centered class to center your pagination.

Color Palettes

Pagination can be styles with any of the Sonos palette colors. Examples below.