Footer
Pie de página con links legales, idioma y copyright
Preview
Componente real del canon, con los mismos props que usa este sitio (destinos de demo). El selector de idioma marca el locale activo con weight 600.
Props
| Prop | Tipo | Nota |
|---|---|---|
locale | 'es' | 'en' | Default 'es'. Marca el idioma activo. |
legalHref, legalLabel | string | Página legal del sitio (slug distinto por idioma → el sitio resuelve el href) |
socialLinks | { label, href }[] | Como texto, no iconos |
copyright | string | |
esHref, enHref | string | Destinos del language switcher (route mapping por página) |
newWindowLabel | string | Aviso a11y para links externos |
Tokens
| Propiedad | Valor | Token |
|---|---|---|
| Tipografía | Georama 12px / 400 | --text-footer |
| Color texto | secondary | --color-secondary |
| Borde superior | 1px solid | --color-border |
| Hover | color → primary | --color-primary |
| Idioma activo | weight 600, color primary | --weight-semibold |
Layout móvil (<768px)
Los links ocupan la primera fila completa: el invariante es que el set de links del sitio quepa en una línea a 375px (mismo espíritu que la regla de fit del NavPill). El selector de idioma baja a la segunda fila, emparejado con el copyright: el footer sigue siendo dos filas. El wrap queda solo como red de seguridad.
Restricciones
- Sin links de navegación (NavPill lo maneja).
- LinkedIn como texto, no icono.
- Sin logo. Sin theme toggle. Sin formulario.
Decisiones
| Decisión | Por qué |
|---|---|
| Route mapping para language switcher | Páginas legales tienen slugs distintos por idioma |
| LinkedIn como texto, no icono | Consistente con el enfoque tipográfico |
| Token caption para todo el texto | Footer es la jerarquía más baja de la página |
| Móvil: los links son dueños de la primera fila (2.1) | Compartir fila con el selector asumía los labels cortos de elastic; los tres links de teresa saltaban a dos líneas |
| Móvil: idioma junto al copyright (2.1) | El footer se queda en dos filas en vez de tres; ambos son cortos y de ancho fijo |