navigation
Pagination
Links to the pages of a long list, such as invoices or lessons.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A list of links in a <nav>. The current page has aria-current="page"; an ellipsis stands for skipped pages.
<nav class="ca-pagination" aria-label="Invoice pages">
<ul class="ca-pagination__list">
<li><a class="ca-pagination__link" href="#page-1" aria-label="Previous page">Previous</a></li>
<li><a class="ca-pagination__link" href="#page-1" aria-label="Page 1">1</a></li>
<li><a class="ca-pagination__link" href="#page-2" aria-label="Page 2" aria-current="page">2</a></li>
<li><a class="ca-pagination__link" href="#page-3" aria-label="Page 3">3</a></li>
<li><span class="ca-pagination__ellipsis" aria-hidden="true">…</span></li>
<li><a class="ca-pagination__link" href="#page-12" aria-label="Page 12">12</a></li>
<li><a class="ca-pagination__link" href="#page-3" aria-label="Next page">Next</a></li>
</ul>
</nav>Examples
On the first page
A step that is not possible keeps its place with aria-disabled="true" and no href.
<nav class="ca-pagination" aria-label="Lesson pages">
<ul class="ca-pagination__list">
<li><a class="ca-pagination__link" role="link" aria-disabled="true" aria-label="Previous page">Previous</a></li>
<li><a class="ca-pagination__link" href="#lessons-1" aria-label="Page 1" aria-current="page">1</a></li>
<li><a class="ca-pagination__link" href="#lessons-2" aria-label="Page 2">2</a></li>
<li><a class="ca-pagination__link" href="#lessons-2" aria-label="Next page">Next</a></li>
</ul>
</nav>Guidance and accessibility
When to use
- Use pagination when a list is split into pages that people can link to and come back to.
- Show the first and last page and a few around the current one, with an ellipsis for the rest.
Accessibility
- Give the
<nav>anaria-labelthat names the list, such as “Invoice pages”. - Label number links, such as
aria-label="Page 2", since a bare “2” says little when read out of context. - Hide the ellipsis from screen readers with
aria-hidden="true". - On touch screens every link has a target of at least 44 by 44 pixels.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-pagination | Component | The <nav> around the page links. |
ca-pagination__list | Part | The <ul>; it wraps on narrow screens. |
ca-pagination__link | Part | A link to one page, or to the previous or next page. |
ca-pagination__ellipsis | Part | Stands for pages that are not shown. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>