PageFooter
Site footer — AutoGrid of link groups with a brand/meta bottom row. Renders a <footer> element with a <nav aria-label="Footer"> wrapping the link columns.
Category: layout · WCAG 2.1-AA · section, footer, navigation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
groups | FooterGroup[] | — | Array of link groups, each with a title and array of {label, href} links |
brand | ReactNode | — | Brand name or logo shown in the bottom row |
meta | ReactNode | — | Meta line in the bottom row (license, copyright, etc.) |
Design tokens
--cascivo-text-sm--cascivo-font-mono--cascivo-font-semibold--cascivo-text-primary--cascivo-text-secondary--cascivo-color-border--cascivo-color-accent--cascivo-space-*
When to use
- A site footer with grouped link columns and a brand/meta bottom row
- Closing marketing or app pages with secondary navigation
When not to use
- Primary top navigation — use AppShell or a header
- A conversion prompt — use Cta
Examples
Site footer
Three-column footer with brand and license meta
<PageFooter
brand="Cascade"
meta="MIT licensed. Built with care."
groups={[
{ title: 'Product', links: [{ label: 'Components', href: '/components' }, { label: 'Charts', href: '/charts' }, { label: 'Layouts', href: '/layouts' }] },
{ title: 'Developers', links: [{ label: 'Docs', href: '/docs' }, { label: 'GitHub', href: 'https://github.com/cascivo/cascivo' }, { label: 'Changelog', href: '/changelog' }] },
{ title: 'Resources', links: [{ label: 'Figma kit', href: '/figma' }, { label: 'Storybook', href: '/storybook' }] },
]}
/>Related components
- AutoGrid — Uses an auto-fit grid to lay out link groups