Components / Layout

Footer

A page footer (contentinfo landmark) with start, centre and end regions (or brand, meta and links) that stack on narrow widths; optionally aligned to the Container width.

@ruckc/truss-ui Layout

Import

import { Footer } from '@ruckc/truss-ui';

Playground

API

Prop	Type	Default	Description
start snippet	Snippet	—	Leading region (e.g. copyright).
center snippet	Snippet	—	Middle region (e.g. links).
end snippet	Snippet	—	Trailing region (e.g. social links).
brand snippet	Snippet	—	Identity (e.g. a logo) at the start. With `brand`, `meta` or `links`, `start`/`center`/`end` are ignored.
meta snippet	Snippet	—	Small print (e.g. copyright) stacked directly under `brand`.
links snippet	Snippet	—	One or more link groups, right-aligned on the same row when wide. Use `<NavList variant="inline">` or `<NavLink variant="inline">` so link text shares edges with `meta` and plain links.
children snippet	Snippet	—	Free-form content; replaces the three regions.
variant	'plain' | 'bordered'	'plain'	`bordered` adds a top border.
contained	boolean | 'sm' | 'md' | 'lg'	false	Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`.
class	string	—