Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Pagination
Essentials

Pagination

Pagination patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Pagination

Navigation styling with real links. Your application supplies paginated data and current-page state.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<nav class="sl-pagination" aria-label="Example pagination">
  <span aria-current="page" aria-label="Page 1, current page">1</span
  ><a href="/components/?page=2" aria-label="Page 2">2</a
  ><a href="/components/?page=3" aria-label="Page 3">3</a
  ><a href="/components/?page=2" aria-label="Next page">Next →</a>
</nav>
HTML source · enable JavaScript for the playground6 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.