Pagination

vel-src: pagination.css

Navigation controls for moving between pages of content, with support for active states, disabled links, ellipsis, and size variants.

Class	Properties
vel-pagination	Flex container wrapping all page items
vel-page-item	Wrapper element for each page link or control
vel-page-link	The clickable anchor or button inside vel-page-item
vel-page-link-active	Highlights the currently active page link
vel-page-link-disabled	Dimmed, non-interactive page link (e.g. prev on first page)
vel-page-ellipsis	Non-interactive ellipsis separator between page ranges
vel-pagination-sm	Smaller size variant for compact layouts
vel-pagination-lg	Larger size variant for prominent pagination

Examples

Basic pagination

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <nav class="vel-pagination" aria-label="Page navigation">
    <div class="vel-page-item">
      <a class="vel-page-link vel-page-link-disabled" href="#" aria-label="Previous">&laquo; Prev</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link" href="#">1</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link vel-page-link-active" href="#">2</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link" href="#">3</a>
    </div>
    <div class="vel-page-item">
      <span class="vel-page-ellipsis">&hellip;</span>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link" href="#">8</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link" href="#" aria-label="Next">Next &raquo;</a>
    </div>
  </nav>
</div>

Small pagination

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <nav class="vel-pagination vel-pagination-sm" aria-label="Small page navigation">
    <div class="vel-page-item">
      <a class="vel-page-link" href="#">&laquo;</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link vel-page-link-active" href="#">1</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link" href="#">2</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link" href="#">3</a>
    </div>
    <div class="vel-page-item">
      <a class="vel-page-link" href="#">&raquo;</a>
    </div>
  </nav>
</div>