# Footer
- **Category:** Layout (`layout`)
- **Slug:** `layout/footer`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Footer } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/layout/footer
> The shared multi-column site footer — mono uppercase headings over link stacks, an optional accent-count hiring column, and a legal row.
## 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 `` or an `` 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).
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `columns` | `FooterColumn[]` | yes | — | The link columns (the system ships five: Developers / Resources / Help / Legal / Careers). |
| `copyright` | `ReactNode` | no | — | Copyright / wordmark in the bottom row (right). |
| `hiring` | `{ heading: string; count: string \| number; label: string; }` | no | — | Optional accent-count column (the lone green "We're Hiring" moment). |
| `social` | `string[]` | no | — | Social / channel labels in the bottom row (left). |
| `style` | `CSSProperties` | no | — | — |
## Examples
### 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.
```tsx
import { Footer } from "@protocore/pds";
export default function FooterBasics() {
return (
);
}
```
### 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.
```tsx
import { Footer } from "@protocore/pds";
export default function FooterHiring() {
return (
);
}
```
## Do & don't
**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
**Notes**
- Renders a `