Pagination

Page navigation controls for splitting content across multiple pages.

Basic Pagination

Default pagination with numbered pages and navigation controls.

HTML

<ul class="focus-pagination">
  <li class="focus-pagination-item">
    <a href="#" class="focus-pagination-link focus-pagination-link-disabled">
      <i class="fa fa-chevron-left"></i>
    </a>
  </li>
  <li class="focus-pagination-item">
    <a href="#" class="focus-pagination-link focus-pagination-link-active">1</a>
  </li>
  <li class="focus-pagination-item">
    <a href="#" class="focus-pagination-link">2</a>
  </li>
  <li class="focus-pagination-item">
    <a href="#" class="focus-pagination-link">3</a>
  </li>
  <li class="focus-pagination-item">
    <a href="#" class="focus-pagination-link">
      <i class="fa fa-chevron-right"></i>
    </a>
  </li>
</ul>

Sizes

Use .focus-pagination-sm or .focus-pagination-lg for different sizes.

Small:

Default:

Large:

HTML

<ul class="focus-pagination focus-pagination-sm">...</ul>
<ul class="focus-pagination">...</ul>
<ul class="focus-pagination focus-pagination-lg">...</ul>

Rounded Pagination

Use .focus-pagination-rounded for fully circular page numbers.

HTML

<ul class="focus-pagination focus-pagination-rounded">
  <li class="focus-pagination-item"><a href="#" class="focus-pagination-link focus-pagination-link-active">1</a></li>
  <li class="focus-pagination-item"><a href="#" class="focus-pagination-link">2</a></li>
  <!-- More items... -->
</ul>

Simple Pagination

Use .focus-pagination-simple for pagination without borders.

HTML

<ul class="focus-pagination focus-pagination-simple">
  <li class="focus-pagination-item"><a href="#" class="focus-pagination-link focus-pagination-link-active">1</a></li>
  <!-- More items... -->
</ul>

Pagination with Ellipsis

Use .focus-pagination-ellipsis to indicate skipped pages.

HTML

<ul class="focus-pagination">
  <li class="focus-pagination-item"><a href="#" class="focus-pagination-link">1</a></li>
  <li class="focus-pagination-item"><a href="#" class="focus-pagination-link">2</a></li>
  <li class="focus-pagination-item"><span class="focus-pagination-ellipsis">...</span></li>
  <li class="focus-pagination-item"><a href="#" class="focus-pagination-link">8</a></li>
  <li class="focus-pagination-item"><a href="#" class="focus-pagination-link">9</a></li>
</ul>

CSS Classes Reference

Class	Description
`.focus-pagination`	Main pagination container
`.focus-pagination-item`	Pagination item wrapper
`.focus-pagination-link`	Pagination link/button
`.focus-pagination-link-active`	Active page state
`.focus-pagination-link-disabled`	Disabled link state
`.focus-pagination-sm`	Small size variant
`.focus-pagination-lg`	Large size variant
`.focus-pagination-rounded`	Circular page numbers
`.focus-pagination-simple`	No borders style
`.focus-pagination-ellipsis`	Ellipsis indicator for skipped pages