Components (registry)Layout
Footer Simple
Layout template: footer-simple
Contrato del layout
Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.
- Slots
{{logo}}{{link1_url}}{{link1_label}}{{link2_url}}{{link2_label}}{{link3_url}}{{link3_label}}{{legal}}- Componentes requeridos
nav-linktypographydividerimage
Anatomía CSS
<div class="layoutFooterSimple"> </div>
Tokens resueltos
Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.
| Variante | Prop | Valor | Token |
|---|---|---|---|
| all | border | #e5e5e5 | border |
| all | fg | #525252 | muted.foreground |
CSS mínimo funcional
Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.
/* Layout: footer-simple — structure only */
.l-footer-simple {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 32px;
border-top: 1px solid #e5e5e5;
font-size: var(--text-sm);
}
.l-footer-simple__brand {
flex-shrink: 0;
}
.l-footer-simple__links {
display: flex;
gap: 16px;
}
.l-footer-simple__legal {
flex-shrink: 0;
color: #525252;
}
Codigo fuente
layouts/footer-simple.css
/* Layout: footer-simple — structure only */ .l-footer-simple { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-6); padding: var(--spacing-6) var(--spacing-8); border-top: 1px solid var(--border); font-size: var(--text-sm); } .l-footer-simple__brand { flex-shrink: 0; } .l-footer-simple__links { display: flex; gap: var(--spacing-4); } .l-footer-simple__legal { flex-shrink: 0; color: var(--muted-foreground); }