# Enlaces sociales

Enlaces a los perfiles y canales de un sitio, cada uno con un icono y un nombre.

### Problemas conocidos
Ninguno conocido.

### Copiar el marcado
Social links markup
```html
<ul class="luz-social">
  <li>
    <a href="https://example.org/@luz">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>
      <span>Mastodon</span>
    </a>
  </li>
  <!-- one li for each place -->
</ul>
```

### Variantes y opciones
- `.luz-social`: La lista: enlaces en una fila que salta de línea
- `.luz-social--icons`: Solo iconos, cada uno un cuadrado de `--luz-control-md`; pon `.u-sr-only` en cada nombre

### Cómo funciona
CSS de `components/social.css` de `@luz-ds/catalog`. No usa JavaScript.

- Basta un `svg` con un `viewBox` y sus trazados. En un pie, enlázala después de [site-footer](https://nandovejer.github.io/luz/es/docs/catalog/site-footer/).

### Sin JavaScript
No cambia nada.

### Teclado y ARIA
Los enlaces son nativos.

- El icono es `aria-hidden`: el texto, visible o en `.u-sr-only`, da nombre al enlace.
- Envuélvela en un `<nav aria-label="…">` solo si los lectores la buscan por sí sola.
- Los objetivos miden 36 px (solo iconos) o 28 px de alto, más de los 24 px de WCAG 2.5.8.

### Cuándo usarlo
Úsalos para llevar al lector a tus perfiles y canales: en el pie de un sitio, bajo el nombre de un autor o en una página de contacto.

### Cuándo no usarlo
No los uses para las páginas de tu propio sitio ni para compartir la página actual.

- Para los enlaces del sitio, usa [site-footer](https://nandovejer.github.io/luz/es/docs/catalog/site-footer/) o la [barra de navegación](https://nandovejer.github.io/luz/es/docs/catalog/navbar/).