Footer
Page footer with legal links, language and copyright
Preview
The real canon component, with the same props this site uses (demo destinations). The language selector marks the active locale with weight 600.
Props
| Prop | Type | Note |
|---|---|---|
locale | 'es' | 'en' | Default 'es'. Marks the active language. |
legalHref, legalLabel | string | The site's legal page (different slug per language → the site resolves the href) |
socialLinks | { label, href }[] | As text, not icons |
copyright | string | |
esHref, enHref | string | Language switcher destinations (per-page route mapping) |
newWindowLabel | string | a11y notice for external links |
Tokens
| Property | Value | Token |
|---|---|---|
| Typography | Georama 12px / 400 | --text-footer |
| Text color | secondary | --color-secondary |
| Top border | 1px solid | --color-border |
| Hover | color → primary | --color-primary |
| Active language | weight 600, color primary | --weight-semibold |
Mobile layout (<768px)
The links take the whole first row: the invariant is that the site's set of links fits on one line at 375px (same spirit as the NavPill fit rule). The language selector drops to the second row, paired with the copyright: the footer stays at two rows. Wrapping is only a safety net.
Constraints
- No navigation links (NavPill handles them).
- LinkedIn as text, not an icon.
- No logo. No theme toggle. No form.
Decisions
| Decision | Why |
|---|---|
| Route mapping for the language switcher | Legal pages have different slugs per language |
| LinkedIn as text, not an icon | Consistent with the typographic approach |
| Caption token for all text | The footer is the lowest level of hierarchy on the page |
| Mobile: links own the first row (2.1) | Sharing the row with the selector assumed elastic's short labels; teresa's three links wrapped onto two lines |
| Mobile: language next to copyright (2.1) | The footer stays at two rows instead of three; both are short and fixed-width |