Pagination 1.2.2

Indicate the current page within a multi-page set using the .velin-pagination component. Deutsch: Pagination De

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Navigate multi-page result sets with .velin-pagination controls.
When content is split across numbered pages and users need previous/next plus page links.

When not

In-page section jumping — use Scrollspy or anchor links.
Wizard steps — use Stepper.

Basic pagination

<nav aria-label="Page navigation">
  <ul class="velin-pagination">
    <li class="velin-page-item"><a class="velin-page-link" href="#">&laquo;</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">1</a></li>
    <li class="velin-page-item active" aria-current="page"><a class="velin-page-link" href="#">2</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">3</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">&raquo;</a></li>
  </ul>
</nav>

Disabled links

Add .disabled to a page item to prevent interaction (e.g. on the first/last page).

<li class="velin-page-item disabled">
  <span class="velin-page-link">&laquo;</span>
</li>

Sizes

Use .velin-pagination-sm or .velin-pagination-lg for smaller or larger pagination.

<ul class="velin-pagination velin-pagination-sm">…</ul>
<ul class="velin-pagination velin-pagination-lg">…</ul>

Simple pagination

A minimal previous/next pattern using just two links.

<nav aria-label="Simple pagination" class="velin-flex velin-flex--justify-between">
  <a href="#" class="velin-btn velin-btn--outline">&larr; Previous</a>
  <a href="#" class="velin-btn velin-btn--outline">Next &rarr;</a>
</nav>

Wrap controls in <nav> with an accessible name (e.g. pagination).
Mark the current page with aria-current="page"; disable or omit the inactive prev/next control appropriately.