# Footer / Footer

> Brand, links in three columns, legal notice and social links.

Page: https://componentes-lovat.vercel.app/c/footer/  
License: MIT · Design: Tailark mist (MIT) · footer/two  
Requires: tokens.css  
Context: landing · Density: media · Tone: editorial

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/footer/footer.html
- CSS: https://componentes-lovat.vercel.app/raw/footer/footer.css
- Everything in one file: https://componentes-lovat.vercel.app/r/footer.html

Dark theme: add class `dark` to `<html>`.

## When to use

- At the bottom of any site.

## When not to use

- To repeat the whole main navigation.

## Accessibility

Roles: contentinfo, navigation

- <footer> with a labelled <nav>; social links carry aria-label.

## Code

```html
<footer class="s-footer">
  <div class="s-footer__inner">
    <div class="s-footer__grid">
      <div class="s-footer__brand">
        <a class="s-footer__home" href="#" aria-label="Inicio"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="2" y="2" width="9" height="9" rx="2.5"/><rect x="13" y="2" width="9" height="9" rx="4.5" opacity=".45"/><rect x="2" y="13" width="9" height="9" rx="2.5" opacity=".7"/><rect x="13" y="13" width="9" height="9" rx="2.5"/></svg>Estudio</a>
        <p class="s-footer__tag">Diseño y desarrollo web desde Lima.</p>
      </div>
      <nav class="s-footer__cols" aria-label="Pie de página">
        <div class="s-footer__col"><h3 class="s-footer__group">Producto</h3><ul><li><a class="s-footer__link" href="#">Funciones</a></li><li><a class="s-footer__link" href="#">Precios</a></li><li><a class="s-footer__link" href="#">Clientes</a></li><li><a class="s-footer__link" href="#">Ayuda</a></li></ul></div>
        <div class="s-footer__col"><h3 class="s-footer__group">Empresa</h3><ul><li><a class="s-footer__link" href="#">Nosotros</a></li><li><a class="s-footer__link" href="#">Empleos</a></li><li><a class="s-footer__link" href="#">Blog</a></li><li><a class="s-footer__link" href="#">Contacto</a></li></ul></div>
        <div class="s-footer__col"><h3 class="s-footer__group">Legal</h3><ul><li><a class="s-footer__link" href="#">Licencia</a></li><li><a class="s-footer__link" href="#">Privacidad</a></li><li><a class="s-footer__link" href="#">Cookies</a></li></ul></div>
      </nav>
    </div>
    <div class="s-footer__bottom">
      <span class="s-footer__copy">© 2026 Estudio. Todos los derechos reservados.</span>
      <ul class="s-footer__social">
        <li><a class="s-footer__social-link" href="#" aria-label="X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.8L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></svg></a></li>
        <li><a class="s-footer__social-link" href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5M3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.1c.5-1 1.8-2 3.8-2 4 0 4.8 2.6 4.8 6V21h-4v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V21h-4z"/></svg></a></li>
        <li><a class="s-footer__social-link" href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 7.3a4.7 4.7 0 1 0 0 9.4 4.7 4.7 0 0 0 0-9.4m0 7.7a3 3 0 1 1 0-6 3 3 0 0 1 0 6m6-7.9a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0M12 4.2c2.5 0 2.8 0 3.8.1 2.6.1 3.8 1.3 3.9 3.9v7.6c-.1 2.6-1.3 3.8-3.9 3.9H8.2c-2.6-.1-3.8-1.3-3.9-3.9V8.2c.1-2.6 1.3-3.8 3.9-3.9h3.8M12 2.5H8.1C4.6 2.7 2.7 4.6 2.5 8.1v7.8c.2 3.5 2.1 5.4 5.6 5.6h7.8c3.5-.2 5.4-2.1 5.6-5.6V8.1c-.2-3.5-2.1-5.4-5.6-5.6z"/></svg></a></li>
      </ul>
    </div>
  </div>
</footer>
```

```css
/* footer · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde footer.tw.json. No editar a mano. Necesita tokens.css. */
.s-footer__social{order:-9999}
.s-footer__copy{order:9999}
.s-footer__cols{grid-column:span 3/span 3}
.s-footer__inner{margin-inline:auto}
.s-footer__bottom{margin-top:calc(var(--spacing)*12)}
.s-footer__group{display:block}
.s-footer__link{display:block}
.s-footer__copy{display:block}
.s-footer__social-link{display:block}
.s-footer__bottom{display:flex}
.s-footer__social{display:flex}
.s-footer__grid{display:grid}
.s-footer__cols{display:grid}
.s-footer__inner{max-width:var(--container-5xl)}
.s-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.s-footer__bottom{flex-wrap:wrap}
.s-footer__social{flex-wrap:wrap}
.s-footer__bottom{align-items:flex-end;justify-content:space-between}
.s-footer__social{justify-content:center}
.s-footer__cols{gap:calc(var(--spacing)*6)}
.s-footer__bottom{gap:calc(var(--spacing)*6)}
.s-footer__social{gap:calc(var(--spacing)*6)}
.s-footer__grid{gap:calc(var(--spacing)*12)}
:where(.s-footer__col>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}
.s-footer__bottom{border-top-style:var(--tw-border-style);border-top-width:1px}
.s-footer{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-background)}
.s-footer__inner{padding-inline:calc(var(--spacing)*6)}
.s-footer__bottom{padding-block:calc(var(--spacing)*6)}
.s-footer{padding-top:calc(var(--spacing)*20)}
.s-footer__copy{text-align:center;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.s-footer__social{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.s-footer__group{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.s-footer__link{color:var(--color-muted-foreground)}
.s-footer__copy{color:var(--color-muted-foreground)}
.s-footer__social-link{color:var(--color-muted-foreground)}
.s-footer__link{--tw-duration:.15s;transition-duration:.15s;animation-duration:.15s}
@media (hover:hover){
.s-footer__link:hover{color:var(--color-primary)}
.s-footer__social-link:hover{color:var(--color-primary)}
}
@media (min-width:48rem){
.s-footer__copy{order:-9999}
.s-footer__social{order:9999}
.s-footer__brand{grid-column:span 2/span 2}
.s-footer__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* propio */
.s-footer__home{display:inline-flex;align-items:center;gap:.5rem;color:var(--foreground);text-decoration:none;font-weight:600}
.s-footer__home svg{width:1.75rem;height:1.75rem}
.s-footer__tag{margin-top:1rem;max-width:18rem;color:var(--muted-foreground);font-size:.875rem}
.s-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.s-footer__link,.s-footer__social-link{text-decoration:none;transition-property:color}
.s-footer__social-link svg{width:1.5rem;height:1.5rem;fill:currentColor}
.s-footer__social{list-style:none;margin:0;padding:0}
@media (width < 40rem){.s-footer__cols{grid-template-columns:repeat(2,1fr)}}
```

## Credits

- Tailark mist (MIT) · footer/two: https://github.com/tailark/blocks
