Catalog · Documentation
Pager
Two link blocks at the end of a page, to the previous page and to the next, each with the title it leads to.
Fits best: any site — the end of a page that belongs to a sequence
Example
The two blocks that link to the previous page and the next.
Two blocks side by side, Next at the end; stacked at 640px and below. The whole block is the link.
Known issues
None known.
Code
Copy the markup
import "@luz-ds/catalog/components/pager.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/pager.min.css" integrity="sha384-apHOhshKXJ9cDKk4V1UbHHNZsD1LAKerRICcUm1M/Eq0D9+4MP773thdHVdCz+Hs" crossorigin="anonymous">A list of one or two blocks, in a navigation landmark:
<nav aria-label="Previous and next page">
<ul class="luz-pager">
<li class="luz-pager__prev"><a class="luz-pager__link" rel="prev" href="/install/"><span class="luz-pager__label">Previous</span> <span class="luz-pager__title">Install the tool</span></a></li>
<li class="luz-pager__next"><a class="luz-pager__link" rel="next" href="/deploy/"><span class="luz-pager__label">Next</span> <span class="luz-pager__title">Deploy to production</span></a></li>
</ul>
</nav>Variants and options
No modifier. The two items say which side they are on.
| Class | Effect |
|---|---|
.luz-pager | On a <ul>: two equal columns with a gap, no bullets. One column at 640px and below |
.luz-pager | On the first <li>: the first column |
.luz-pager | On the second <li>: the second column, with its text at the end. It stays there when there is no previous page |
.luz-pager | On the <a>: the whole block is the link, with a border and padding. On hover, the border and the surface change and the title is underlined |
.luz-pager | "Previous" or "Next", small, in the secondary colour |
.luz-pager | The title of the page it leads to, larger and semibold, in the colour of a link |
How it works
CSS from components/pager.css of @luz-ds/catalog. It sets the blocks; the order of the pages is yours.
- The two blocks are equal and the whole block is the target, so the click or tap area is large.
- The first page has only a Next and the last only a Previous: leave the other
<li>out. A lone Next stays in the second column, at the end. - Each link has
rel="prev"orrel="next", and a name that starts with its visible words: "Previous: Install the tool". - The title is never shortened: a long one wraps inside the block.
Without JavaScript
Nothing changes. It is two links, and the package has no script.
Keyboard and ARIA
- Order: Previous, then Next, as in the source. Tab reaches each link, and Enter follows it.
- Names: the
<nav>is named "Previous and next page". Each link is named by its visible text ("Previous Install the tool"), so a person who says "click Previous" finds it (WCAG 2.5.3). Do not add anaria-labelthat replaces it. - Landmark: one pager for each page. A second
<nav>on the page needs a different name.
Contrast and focus are in the Design tab.
Design
When to use
Use the pager at the end of the content, so a reader who finishes a page goes to the next one in the order you intend.
- Pages that are read in a sequence: a guide, a tutorial, the chapters of a manual, the steps of a course or a series of posts. It also suits courses, series of posts and any ordered set of pages.
- After the content and before the page foot.
When not to use
Do not use the pager for pages that have no order, or for the pages of a list of results.
- The sidebar already lists every page. The pager gives the next step, not the whole map.
- For the pages of a list or a table, use pagination, which has page numbers.
Do and don't
Writing the content
- The labels and the titles are your text, not LUZ's: the examples on this page are placeholders. Write them for your site and in its language.
- Label: "Previous" and "Next" are a good default. Translate them with the rest of the page, or use the words your site uses, such as "Back" and "Continue".
- Title: the title of the page it leads to, word for word, as in the sidebar or the heading of that page.
- Name: "Previous: " or "Next: " and the title. Do not add arrows or "page" to it.
Contrast and focus
The blocks sit on the page surface; under the pointer they sit on the hover surface.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Label | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Title | --luz-brand-primary on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 4.5:1 |
Label under the pointer | --luz-text-secondary on --luz-surface-hover | 5.6:1 | 6.2:1 | 18.4:1 | 4.5:1 |
Title under the pointer | --luz-brand-primary on --luz-surface-hover | 5.1:1 | 6.4:1 | 13.5:1 | 4.5:1 |
Border under the pointer | --luz-outline on --luz-surface-page | 4.3:1 | 3.6:1 | 21.0:1 | 3:1 |
Focus ring | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.
- Focus: each block keeps core's ring, 2 px of
--luz-focus-ring, drawn around the whole block. - Target: each block is the link: at least 24px tall, and as wide as its half of the row.
- Edges: the border at rest (
--luz-divider) is decorative and has no minimum.
Tokens it uses
The 10 tokens that the .luz-pager rules of catalog’s components/pager.css read, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Spacing and sizing
--luz-space-3xs,--luz-space-md,--luz-space-sm- Typography
--luz-text-lg,--luz-text-sm- Radius
--luz-radius-md
Keyboard and ARIA are in the Code tab.