Catálogo · Contenido
Dato destacado
Muestra una cifra en grande, con una etiqueta breve debajo.
Encaja mejor en: landing — una fila de cifras en una landing page
Ejemplo
Tres cifras, cada una con una etiqueta breve debajo.
-
4,000+
teams on the platform
-
99.95%
uptime in the last year
-
12 min
to set up, on average
The first two stand on the page; the third sits in a luz-card. In a column narrower than 768 px the three stack.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
import "@luz-ds/catalog/components/stat.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/stat.min.css" integrity="sha384-BWlLefgZb0IeWPuX51tf8D1yWKqyXVA8/5vQz+wACTjN+NRcfynLunkuHbLbeBf1" crossorigin="anonymous"><ul class="o-grid o-grid--3">
<li>
<div class="luz-stat">
<p class="luz-stat__value">4,000+</p>
<p class="luz-stat__label">teams on the platform</p>
</div>
</li>
<!-- one li for each stat; a card is a li.luz-card -->
</ul>Variantes y opciones
Sin modificadores: dos partes, independientes o dentro de una tarjeta.
| Clase | Qué hace |
|---|---|
.luz-stat | El bloque: el valor sobre la etiqueta, separados por un espacio pequeño ( --luz-space-2xs), sin relleno ni superficie. |
.luz-stat | La cifra: tipografía de encabezado, tamaño 3xl y trazo fino, con cifras del mismo ancho; se ajusta en columnas estrechas. |
.luz-stat | Lo que cuenta la cifra: tamaño sm y color de texto secundario. |
Cómo funciona
CSS de components/stat.css de @luz-ds/catalog. No usa JavaScript.
- El dato destacado no organiza otros elementos: coloca varios en una lista con cuadrícula de core,
ul.o-grid.o-grid--3. En una tarjeta usa el relleno y la superficie de esta.
Sin JavaScript
No cambia nada: el dato destacado es HTML y CSS, y la cifra no cuenta hacia arriba.
Teclado y ARIA
El dato destacado no tiene una interacción ni un rol propios.
- El valor va antes que la etiqueta en el código fuente, así se lee en ese orden. Pon los datos en un
<ul>debajo del encabezado de la sección.
Contraste y foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa un dato destacado para respaldar una afirmación con una cifra: cuántas personas usan el producto o lo rápido que es. Entre dos y cuatro cifras juntas se leen de un vistazo.
Cuándo no usarlo
No uses un dato destacado para una cifra que necesite una frase para entenderse.
- Para comparar filas y columnas, usa una tabla.
Buenas y malas prácticas
Redacción del contenido
El valor es un número con su unidad, de cinco caracteres o menos si es posible. La etiqueta indica qué cuenta el número.
- Escribe la cifra como la dirías: «4.000+», «99,95 %», «12 min».
- La etiqueta va en minúscula, sin punto final, e indica el periodo o a quién se refiere: «disponibilidad durante el último año».
- Si alguien podría preguntarse de dónde sale una cifra, indica la fuente en una nota debajo de la sección.
Contraste y foco
El valor usa el color de texto principal y la etiqueta, el secundario, sobre la página o una tarjeta.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Valor | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Etiqueta | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Valor en una tarjeta | --luz-text-primary on --luz-surface | 16.5:1 | 14.0:1 | 21.0:1 | 4.5:1 |
Etiqueta en una tarjeta | --luz-text-secondary on --luz-surface | 6.4:1 | 6.9:1 | 19.3:1 | 4.5: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.
- Foco: el dato destacado no recibe el foco; no es interactivo.
Tokens que utiliza
Los 8 tokens que leen, por familia, las reglas de .luz-stat en components/stat.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.
- Spacing and sizing
--luz-space-2xs- Typography
--luz-font-heading,--luz-text-2xl,--luz-text-3xl,--luz-text-base,--luz-text-xl
Teclado y ARIA están en la pestaña Código.