Page foot

Code

Copy the markup

import "@luz-ds/catalog/components/page-footer.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-footer.min.css" integrity="sha384-jt0ORcEHERojNhPk2BjZ9bJ3A6cELFABApWGVM0vxUZRBxP3Ey+rPedqU+FdVuwx" crossorigin="anonymous">

One paragraph, after the pager:

<p class="luz-page-footer">Last updated <time datetime="2026-10-17">17 October 2026</time> · <a href="https://example.com/edit/install.md">Edit this page</a> · <a href="https://example.com/issues/new">Report a problem</a></p>

Variants and options

No modifier. The foot is one class on a native <p>.

How it works

CSS from components/page-footer.css of @luz-ds/catalog. It sets the rule, the size and the colour; the facts are yours.

• The foot is one paragraph. It wraps with its text, so on a narrow screen the links go to the next line.
• The middle dots are text in the markup, between the date and the links.
• The date is a <time> with a datetime a machine can read, and the same date written in words.
• The links go to your own edit page and your own list of issues. LUZ gives neither.

Without JavaScript

Nothing changes. It is text and two links, and the package has no script.

Keyboard and ARIA

• Order: the date is text; Tab reaches "Edit this page", then "Report a problem".
• Names: the links are named by their text, so they make sense out of context. Do not shorten them to "Edit" and "Report".
• Date: <time datetime="2026-10-17"> gives the date in a form software can read, next to the words a person reads.

Contrast and focus are in the Design tab.

Design

When to use

Use the page foot under the content of every page that people maintain, so a reader can tell how old it is and fix it.

• A page that changes over time, such as a guide or a reference.
• A site whose pages live in a repository, where "Edit this page" can open the file.

When not to use

Do not use the page foot for the footer of the site: it belongs to one page.

• The footer of the site is a <footer>, a child of the shell.
• Do not show a date that is not kept up to date: a wrong date is worse than none.

Do and don't

Writing the content

• "Last updated" and the date in words, with the month spelled out: "17 October 2026". Write it in the language of the page.
• Links: "Edit this page" and "Report a problem". Verb first, and the whole phrase.
• Keep the order: the date, then edit, then report.

Contrast and focus

The text and the links sit on the page surface. The rule above is decoration.

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 link keeps core's ring, 2 px of --luz-focus-ring.
• Target: each link is at least 28px tall, above the 24px minimum of WCAG 2.2 (2.5.8).
• Edges: the rule above the foot (--luz-divider) is decorative and has no minimum.

Tokens it uses

The 6 tokens that the .luz-page-footer rules of catalog’s components/page-footer.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.

Color

--luz-divider, --luz-text-secondary

Spacing and sizing

--luz-control-sm, --luz-space-md

Typography

--luz-font-sans, --luz-text-sm

Keyboard and ARIA are in the Code tab.