/// Layout
Footer
The shared multi-column site footer — mono uppercase headings over link stacks, an optional accent-count hiring column, and a legal row.
import { Footer } from "@protocore/pds";Basics
Pass an array of columns (each a mono uppercase heading over a stack of links), a run of social labels, and a copyright. A hairline top rule separates it from the page.
Hiring column
The optional hiring prop adds one accent-count column — the single green "we're hiring" moment the system allows in the footer. Use it sparingly, at most once.
When to use it
Footer is the shared site footer — the last band on marketing and content pages, holding wayfinding links, social channels, and legal text. It is the counterpart to TopBar; place it in AppShell's footer slot or as the final Section of a page. The links are ReactNode, so wrap your router <Link> or an <a> as needed — the component only lays them out. Keep the hiring accent-count to a single column; it is the one place the brand green appears down here, and multiplying it dilutes the signal (see the differentiation contract).
Usage
Do
- Group links into a few scannable columns with mono uppercase headings.
- Use hiring at most once — it is the footer's single accent moment.
- Wrap your router Link inside each footer link node so routing works.
Don't
- Add multiple accent-count columns; the green stops signalling anything.
- Overload the bar with dozens of links per column — split or trim.
- Reimplement a footer by hand when this one already encodes the layout.
Accessibility
- Renders a `<footer>` element — a contentinfo landmark when it is the page's top-level footer.
- Provide real links (an `<a>` or router `Link`) as the link nodes so they are keyboard-focusable, not plain text.
- The hiring count is decorative emphasis; keep its label descriptive so the meaning survives without colour.
Footer props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
columns * | FooterColumn[] | — | The link columns (the system ships five: Developers / Resources / Help / Legal / Careers). |
copyright | ReactNode | — | Copyright / wordmark in the bottom row (right). |
hiring | { heading: string; count: string | number; label: string; } | — | Optional accent-count column (the lone green "We're Hiring" moment). |
social | string[] | — | Social / channel labels in the bottom row (left). |
style | CSSProperties | — |