Catalog · Page structure

Site footer

Ends every page of a site with who made it, its licence and a few secondary links, under a rule, in a row or as columns.

Fits best: landing, blog — the bottom of every page of a landing site, a blog or a newspaper

components/site-footer.css
No JavaScript
Light · Dark · High contrast
Tested
No known issues

Example

Two footers: a single row with a status and two links, which is also the footer of a blog, and one with the brand and two columns.

A <div> here: a page has one footer landmark, and this one has its own.

Acme Stock v2.0

Stock counts that keep up with the shop.

The footer with a brand and columns. From 768 px of window the brand is twice as wide as a column and they sit in one row; here the column is narrower, so they stack.

The column titles are paragraphs, as this page has its own headings.

Known issues

None known.

Code

Copy the markup

Bundler

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

HTML

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

HTML

<footer class="luz-site-footer">
  <div class="o-container o-container--inline o-row">
    <p>Acme Inc. · MIT licence</p>
    <nav class="o-actions" aria-label="Links">
      <a class="luz-btn luz-btn--ghost luz-btn--sm" href="/status/">Service status</a>
      <a class="luz-btn luz-btn--ghost luz-btn--sm" href="/accessibility/">Accessibility statement</a>
    </nav>
  </div>
</footer>

HTML

<footer class="luz-site-footer">
  <div class="o-container o-container--inline o-grid">
    <div class="luz-site-footer__brand">
      <p><strong>Acme Stock</strong> <span>v2.0</span></p>
      <p>Stock counts that keep up with the shop.</p>
    </div>
    <nav class="luz-site-footer__col" aria-labelledby="footer-product">
      <h2 class="luz-site-footer__col-title" id="footer-product">Product</h2>
      <ul>
        <li><a href="/pricing/">Pricing</a></li>
        <li><a href="/trial/">Start free trial</a></li>
      </ul>
    </nav>
    <nav class="luz-site-footer__col" aria-labelledby="footer-company">
      <h2 class="luz-site-footer__col-title" id="footer-company">Company</h2>
      <ul>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>
  </div>
</footer>

Variants and options

No modifiers. The footer is a class of catalog on a native <footer>, with a row of core's or a grid of a brand and columns inside.

Class	Effect
`.luz-site-footer`	On `<footer>`: a rule on top, 24 px above its row and 32 px below; its row spreads its children to the two ends, and is a column aligned to the start at 768 px and below
`.o-container.o-container--inline.o-row` (core)	The row: the width and gutters of the page, so its content starts where the main's does
`.luz-site-footer__brand`	The first cell of the `.o-container.o-container--inline.o-grid` (core), 24 px (`--luz-space-lg`) apart: a name, a version, one line. From 768 px it is twice a column
`.luz-site-footer__col`	A column, on a `<nav>`: a title over a list of links with no markers, 8 px (`--luz-space-xs`) apart; each link is a box 28 px (`--luz-control-sm`) tall, a target of 24 px or more
`.luz-site-footer__col-title`	A column's title: sans, small, semibold, primary text
`.o-actions` (core)	The links, as an action group

How it works

CSS from components/site-footer.css of @luz-ds/catalog on core's objects. No JavaScript.

The footer adds the rule, the room around the row and how the row spreads its children; .o-container--inline lines the row up with the page's content.
On an .o-page the main grows, so the footer rests on the bottom of a page shorter than the window.
With a brand and columns the cells stack, and from 768 px they sit in a row: the brand takes two shares, each column one.
The column at 768 px and below does not wrap, so its children stay one under the other.

Without JavaScript

Nothing changes: the footer is HTML and CSS. The color mode inside it keeps working: as radios without JavaScript.

Keyboard and ARIA

The footer has no interaction of its own; its links keep theirs.

A <footer> that is a direct child of <body> is the contentinfo landmark.
Name a <nav> of links with aria-label, and keep the links in the same order on every page.
Name a column's <nav> by its title with aria-labelledby, and make the title a heading (<h2>).

Contrast and focus are in the Design tab.

Design

When to use

Use the footer at the end of every page of a landing site, a blog or a newspaper, for who made it, its licence and a few secondary links.

When not to use

Do not put the main navigation, or anything needed to finish a task, in the footer.

Main navigation goes in the site header.

Do and don't

Do Two to four links that say where they go.

Don't The main navigation in the footer: the reader has to reach the end of the page to move around.

Do A short title over each column, so the links in it have something in common.

Don't A column with no title: nothing says why these links sit together.

Writing the content

Keep it short: who made it, the licence, and two to four links.

Each link says where it goes: "Accessibility statement", not "Legal".
The brand is the name, a version if people ask which one, and one line on what it is. A column title is one word: "Product", "Company", "Legal".

Contrast and focus

The footer adds a top rule (--luz-divider), which is decorative, and the title of a column in primary text; its other text and links keep their own colours. The table has the page as the background.

Part	Colour on background	Light	Dark	High contrast	Needs
Column title	`--luz-text-primary` on `--luz-surface-page`	15.8:1	15.1:1	21.0:1	4.5:1
Link in a column	`--luz-brand-primary` on `--luz-surface-page`	5.6:1	7.7:1	14.1:1	4.5:1

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text.

Focus: links and buttons in it keep their own ring.
Forced colors: the rule is a border, so it stays.

Tokens it uses

The 9 tokens that the .luz-site-footer rules of catalog’s components/site-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-primary
Spacing and sizing: --luz-control-sm, --luz-space-lg, --luz-space-md, --luz-space-xl, --luz-space-xs
Typography: --luz-font-sans, --luz-text-sm

Keyboard and ARIA are in the Code tab.