Unigrid

CSS Framework

Pagination

Page navigation with numbered links, ellipsis, arrow controls, and block-style previous/next variants.

Numbered Pagination

Basic numbered pagination

<nav class="ug-pagination">
  <ul class="ug-pagination__list">
    <li class="ug-pagination__item">
      <a class="ug-pagination__arrow" href="#">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
      </a>
    </li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">1</a></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">2</a></li>
    <li class="ug-pagination__item ug-pagination__item--current"><a class="ug-pagination__link" href="#">3</a></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">4</a></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">5</a></li>
    <li class="ug-pagination__item">
      <a class="ug-pagination__arrow" href="#">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
      </a>
    </li>
  </ul>
</nav>

With Ellipsis

Ellipsis for long page lists

<nav class="ug-pagination">
  <ul class="ug-pagination__list">
    <li class="ug-pagination__item">
      <a class="ug-pagination__arrow" href="#">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
      </a>
    </li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">1</a></li>
    <li class="ug-pagination__item"><span class="ug-pagination__ellipsis">&hellip;</span></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">7</a></li>
    <li class="ug-pagination__item ug-pagination__item--current"><a class="ug-pagination__link" href="#">8</a></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">9</a></li>
    <li class="ug-pagination__item"><span class="ug-pagination__ellipsis">&hellip;</span></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">24</a></li>
    <li class="ug-pagination__item">
      <a class="ug-pagination__arrow" href="#">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
      </a>
    </li>
  </ul>
</nav>

Disabled Arrow

First page (previous disabled)

<nav class="ug-pagination">
  <ul class="ug-pagination__list">
    <li class="ug-pagination__item">
      <span class="ug-pagination__arrow ug-pagination__arrow--disabled">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
      </span>
    </li>
    <li class="ug-pagination__item ug-pagination__item--current"><a class="ug-pagination__link" href="#">1</a></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">2</a></li>
    <li class="ug-pagination__item"><a class="ug-pagination__link" href="#">3</a></li>
    <li class="ug-pagination__item">
      <a class="ug-pagination__arrow" href="#">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
      </a>
    </li>
  </ul>
</nav>

Block Pagination

Block previous/next links

<nav class="ug-pagination ug-pagination--block">
  <a class="ug-pagination__prev" href="#">
    <span class="ug-pagination__label">Previous</span>
    <span class="ug-pagination__title">Getting Started</span>
  </a>
  <a class="ug-pagination__next" href="#">
    <span class="ug-pagination__label">Next</span>
    <span class="ug-pagination__title">Grid System</span>
  </a>
</nav>

Class Reference

Class Description
.ug-pagination Pagination container
.ug-pagination__list Pagination items list
.ug-pagination__item Individual page item
.ug-pagination__item--current Currently active page
.ug-pagination__link Page number link
.ug-pagination__ellipsis Ellipsis separator
.ug-pagination__arrow Previous/next arrow button
.ug-pagination__arrow--disabled Disabled arrow state
.ug-pagination--block Block-style prev/next layout
.ug-pagination__prev Block previous link
.ug-pagination__next Block next link
.ug-pagination__label Block link label (Previous/Next)
.ug-pagination__title Block link page title