Skip to main content

Design system components

SiteFooter

Production site footer: address block with a mailto link, Explore and Legal link columns (Legal adds a Cookie preferences button when a CookieConsentProvider is present), social icons, a copyright line and the Reliable Partner badge. Below tablet only the Legal column of the three renders.

Status: stable. Group: navigation. Markdown version: /design-system/components/site-footer.md

When to use

Production site footer: address block with a mailto link, Explore and Legal link columns (Legal adds a Cookie preferences button when a CookieConsentProvider is present), social icons, a copyright line and the Reliable Partner badge. Below tablet only the Legal column of the three renders.

When not to use

  • Do not mount more than one SiteFooter. AT users encounter two contentinfo landmarks and the page's IA breaks.
  • Do not change the Divider's margin via className="my-X" without checking the cascade-layer fix in Divider.module.css. The @layer components wrapper is what lets my-8 win; pre-fix this was a regression source.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

SiteFooter props
PropTypeDefaultDescriptionRequired
classNamestringnoneOptional wrapper class.No

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

SiteFooter keyboard behaviour
KeyBehaviour
TabMoves focus to the control and on to the next focusable element. (standard)
EnterActivates the focused control. (standard)
SpaceActivates or toggles the focused control. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

SiteFooter rules
LevelRuleHow it is checked
MUSTARIA: Contentinfo landmark.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: External links labeled.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-11-04.
MUST NOTMaintainers: Do not hand-author a <footer> instead of using SiteFooter on a new route. Any new route inherits the SiteFooter from app/layout.tsx; rolling your own bypasses the i18n, theme, and legal-link maintenance work.Release review; not machine-checked.

Install and import

  • In-repo only. SiteFooter is not exported from @digitaltableteur/react, so there is no public import path.