Catálogo · Contenido

Enlaces sociales

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

Encaja mejor en: cualquier sitio — el pie de un sitio, la página de un autor o una página de contacto

components/social.css
Sin JavaScript
Claro · Oscuro · Alto contraste
Con pruebas
Sin problemas conocidos

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Ejemplo

Tres lugares, cada uno con un icono y su nombre; después dos solo con el icono, donde el nombre se lee en voz alta pero no se muestra.

LUZ no incluye logotipos de marcas: el nombre indica de qué lugar se trata. Los iconos son los de la página Iconos o los tuyos.

Problemas conocidos

Ninguno conocido.

Código

Copiar el marcado

Bundler

import "@luz-ds/catalog/components/social.css";

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous">

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

Clase	Qué hace
`.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.

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.

Contraste y foco están en la pestaña Diseño.

Diseño

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 o la barra de navegación.

Buenas y malas prácticas

Sí El nombre del lugar con cada icono, o en .u-sr-only junto a un icono solo.

No Pongas todas las redes en las que tienes cuenta: elige las dos o tres que mantienes al día y la fila seguirá siendo útil para quien lee.

Sí El mismo nombre con las mismas palabras en todas partes: «Mastodon», como se llama el lugar.

No Una llamada a la acción como nombre: «Follow us» en cuatro enlaces no dice adónde va cada uno.

Redacción del contenido

El nombre es el lugar tal como se llama a sí mismo, en una o dos palabras. El enlace lleva a tu perfil allí, no a su página de inicio.

Escribe «Mastodon», «GitHub», «Canal RSS», «Correo»: un sustantivo, no «Síguenos en…».
Da una dirección como enlace mailto: y llámala «Correo».
Usa seis enlaces como máximo; con más, los lectores se saltan la lista.

Contraste y foco

El nombre y el icono usan el color de texto secundario y, bajo el puntero, el principal. Los iconos solos ganan además la superficie de hover.

Parte	Color sobre el fondo	Claro	Oscuro	Alto contraste	Mínimo
Enlace e icono	`--luz-text-secondary` sobre `--luz-surface-page`	6.2:1	7.5:1	19.3:1	4.5:1
Enlace bajo el puntero	`--luz-text-primary` sobre `--luz-surface-page`	15.8:1	15.1:1	21.0:1	4.5:1
Enlace con icono bajo el puntero	`--luz-text-primary` sobre `--luz-surface-hover`	14.4:1	12.6:1	20.1:1	3:1
Enlace en una tarjeta	`--luz-text-secondary` sobre `--luz-surface`	6.4:1	6.9:1	19.3:1	4.5:1
Anillo de foco	`--luz-focus-ring` sobre `--luz-surface-page`	5.6:1	7.7:1	21.0:1	3:1

Calculado a partir de los valores de los tokens de cada modo, redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco y los iconos.

Foco: cada enlace conserva el anillo de core, 2 px de --luz-focus-ring, dibujado alrededor de su borde redondeado.

Tokens que utiliza

Los 12 tokens que leen, por familia, las reglas de .luz-social en components/social.css. Cada familia enlaza a su página, donde están los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color: --luz-surface-hover, --luz-text-primary, --luz-text-secondary
Espaciado y tamaños: --luz-control-md, --luz-control-sm, --luz-space-2xs, --luz-space-3xs, --luz-space-sm, --luz-space-xs
Tipografía: --luz-font-sans, --luz-text-sm
Radio: --luz-radius-md

Teclado y ARIA están en la pestaña Código.