Cards y métricas.

Cuándo usar

Una card representa una entidad o decisión navegable. Una métrica vive junto al título, la tabla o el gráfico que entrega su contexto.

• Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
• Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
• Documentar cualquier excepción en el producto consumidor.

Ejemplo visible

Anatomía

Estados y variantes

Accesibilidad

• No convertir toda la card en click si contiene otras acciones.
• El orden del DOM sigue la lectura.
• La cifra incluye unidad y periodo.
• Las métricas se presentan fuera de la card de entidad.
• Sin sombras ni franjas laterales pintadas.

HTML de referencia

<article class="cis-card">
  <h3><a href="/datasets/empleo">Empleo regional</a></h3>
  <p>Serie trimestral por región, sexo y tramo de edad.</p>
</article>
<dl class="cis-metrics">
  <div><dt>Tasa nacional</dt><dd>62,4%</dd></div>
  <div><dt>Período</dt><dd>2026-T2</dd></div>
</dl>

Definition of Done

• Ejemplo visible y código copiable coinciden.
• Teclado, foco, nombre accesible y estado fueron probados.
• El componente funciona sin JavaScript o declara una mejora progresiva acotada.
• Los mensajes cumplen core/prosa en modo estricto.
• La promoción registra versión, compatibilidad y prueba de regresión.