Skip to content
SmartHand Design Systemv0.1.1

Pagination

CSS onlyNo JavaScript

A pagination bar: a results summary on one side and page controls on the other. It’s pure markup — you render the links (and the active page) server-side or in your own code.

Pagination
Open ↗
components/pagination.html
<nav class="pagination-root">
  <div class="pagination-info">
    Showing <span class="font-semibold">21–30</span> of <span class="font-semibold">200</span>
  </div>


  <div class="flex items-center gap-2 lg:gap-3">
    <button type="button" class="pagination-item" aria-label="First page">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M11 7l-5 5l5 5" />
        <path d="M17 7l-5 5l5 5" />
      </svg>
    </button>
    <button type="button" class="pagination-item" aria-label="Previous page">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M15 6l-6 6l6 6" />
      </svg>
    </button>


    <button type="button" class="pagination-item"><span class="inline leading-none">1</span></button>
    <span class="pagination-item pointer-events-none opacity-50">…</span>
    <button type="button" class="pagination-item"><span class="inline leading-none">2</span></button>
    <button type="button" class="pagination-item" data-active><span class="inline leading-none">3</span></button>
    <button type="button" class="pagination-item"><span class="inline leading-none">4</span></button>
    <span class="pagination-item pointer-events-none opacity-50">…</span>
    <button type="button" class="pagination-item"><span class="inline leading-none">20</span></button>


    <button type="button" class="pagination-item" aria-label="Next page">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M9 6l6 6l-6 6" />
      </svg>
    </button>
    <button type="button" class="pagination-item" aria-label="Last page">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M7 7l5 5l-5 5" />
        <path d="M13 7l5 5l-5 5" />
      </svg>
    </button>
  </div>
</nav>

Structure

Section titled “Structure”
<nav class="pagination-root">
  <div class="pagination-info">
    Showing <span class="font-semibold">21–30</span> of <span class="font-semibold">200</span>
  </div>


  <div class="flex items-center gap-2 lg:gap-3">
    <a href="?page=1" class="pagination-item"><!-- « first icon --></a>


    <a href="?page=2" class="pagination-item"><span class="inline leading-none">2</span></a>
    <a href="?page=3" class="pagination-item" data-active><span class="inline leading-none">3</span></a>


    <span class="pagination-item pointer-events-none opacity-50">…</span>


    <a href="?page=4" class="pagination-item"><!-- › next icon --></a>
  </div>
</nav>

Classes & attributes

Section titled “Classes & attributes”
Class / attribute Role
pagination-root The bar (info + controls, wraps on small screens).
pagination-info The “showing X–Y of Z” text (hidden below lg).
pagination-item A page number or prev/next control. Built on button-secondary.
data-active On the current page’s pagination-item — renders it as the primary button.