Site footer
Inverse site footer: optional brand column, titled link columns with an optional note each, and an optional bottom row for copyright and legal notes. Content, links and routes come from the consumer.
Experimental · Organism
Example
Open the standalone example. Static HTML rendered from the Default Storybook story, with generated tokens and the component's own CSS.
When to use
The end of every page on a marketing site or storefront needs grouped site-wide links, contact routes and a legal/copyright row.
Not for: In-app/admin screens, a lone copyright line (use a paragraph), or page-specific calls to action (use a Section).
Parameters
| Name | Type | Required | Default |
|---|---|---|---|
columns | { title: string; links?: { label: string; href: string }[]; note?: ReactNode }[] | Yes | — |
brand | ReactNode | No | — |
bottom | ReactNode | No | — |
linkComponent | ElementType | No | "a" |
Tokens and dependencies
Tokens: color-black, color-text-inverse, color-text-inverse-muted, color-bg-inverse-hover, container-max, container-padding, spacing-0, spacing-1, spacing-3, spacing-4, spacing-5, spacing-8, spacing-10, spacing-16, spacing-24, border-width, focus-width, focus-offset, font-primary, text-xs, text-sm, weight-bold, leading-snug, leading-normal, tracking-caps, transition-fast.
Builds on: site-header, link.
Source
Canonical contract: components/site-footer/SPEC.md. React binding: components/site-footer/react/SiteFooter.tsx. Css binding: components/site-footer/site-footer.css.