Franja de métricas.

Patrón canónico de franja de métricas para cochid, periodismo2, situación y admin.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

Personas ocupadas: 9.384.210
Desocupación: 8,1%
Participación: 61,8%

Nivel 2Compañía de Innovación de Santiago · variación

Ejecución presupuestaria: 61,4%
Gasto devengado: $48,2 billones
Programas con alerta: 17

Nivel 3Dentro de una página

Sitio · sección

Personas ocupadas: 9.384.210
Desocupación: 8,1%
Participación: 61,8%

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<dl class="ui-sample metric-strip" data-metric-strip="true"><div><dt>Personas ocupadas</dt><dd>9.384.210</dd></div><div><dt>Desocupación</dt><dd>8,1%</dd></div><div><dt>Participación</dt><dd>61,8%</dd></div></dl>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

cochid.cl

COCHID

Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.md

Personas ocupadas: 9.384.210
Desocupación: 8,1%
Participación: 61,8%

Cambia en esta marca

Cuadrado azul y namebrand de tres líneas
Azul COCHID en selección, capas y series

Permanece canónico

Estructura y semántica comunes
Fuentes, unidades y alternativa tabular

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Ejecución presupuestaria: 61,4%
Gasto devengado: $48,2 billones
Programas con alerta: 17

Cambia en esta marca

Navegación y contenido propios del servicio
Acento reservado para acciones y datos

Permanece canónico

Mark CIS y namebrand de tres líneas
IBM Plex Sans, foco, espaciado y anatomía

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Personas ocupadas: 9.384.210
Desocupación: 8,1%
Participación: 61,8%

Incluye fuente, período, unidad y alternativa tabular.
Usa escalas comparables y distingue cero de ausencia.

Antes · problema observadoAnti-ejemplo no interactivo

62%CONFIRMADOSin fuente, período ni denominador

No encierres una cifra aislada en una tarjeta decorativa.
No declares estados o tendencias que no provienen de datos reales.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

Personas ocupadas: 9.384.210
Desocupación: 8,1%
Participación: 61,8%

1280 pxEscritorio

Ejecución presupuestaria: 61,4%
Gasto devengado: $48,2 billones
Programas con alerta: 17

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y COCHID · core/core-style
Consumidores	COCHID, Periodismo2, Situación y Admin
Dependencias	cochid-graphs cuando corresponde
Estado	candidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

Dato	Resultado
Clasificación	Patrón propuesto
Implementaciones	0 implementaciones observadas
Repositorios	Ningún repositorio observado
Snapshot	kit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Franja de métricas

Estados

Estado requerido
con datos
sin datos
cargando
error

Accesibilidad

Conserva nombre accesible, orden de lectura y foco visible.
Funciona a 320 px, con zoom de 200% y texto largo.
El color nunca es la única señal de estado o acción.
El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<dl class="ui-sample metric-strip" data-metric-strip="true"><div><dt>Personas ocupadas</dt><dd>9.384.210</dd></div><div><dt>Desocupación</dt><dd>8,1%</dd></div><div><dt>Participación</dt><dd>61,8%</dd></div></dl>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<dl class="ui-sample metric-strip border border-slate-300 bg-white p-4 text-slate-950 grid gap-2" data-metric-strip="true"><div><dt>Personas ocupadas</dt><dd>9.384.210</dd></div><div><dt>Desocupación</dt><dd>8,1%</dd></div><div><dt>Participación</dt><dd>61,8%</dd></div></dl>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

export interface MetricStripItem {
  /** Nombre del indicador. */
  label: string;
  /** Cifra ya formateada, con unidad (`8,1%`, `9.384.210`). */
  value: string;
}

export interface MetricStripProps {
  /** Indicadores en el orden en que se leen; conviene no pasar de cuatro o cinco. */
  items?: MetricStripItem[];
  className?: string;
}

const ITEMS: MetricStripItem[] = [
  { label: "Personas ocupadas", value: "9.384.210" },
  { label: "Desocupación", value: "8,1%" },
  { label: "Participación", value: "61,8%" },
];

/**
 * Franja de métricas: varios indicadores clave lado a lado, cada uno con su nombre y su cifra; se usa en la cabecera de un tablero o de un informe.
 *
 * Es una lista de definiciones (`<dl>`): cada par nombre y cifra se lee junto con lector de pantalla.
 *
 * @example <MetricStrip items={[{ label: "Personas ocupadas", value: "9.420.118" }, { label: "Desocupación", value: "8,4%" }]} />
 */
export function MetricStrip({ items = ITEMS, className }: MetricStripProps) {
  if (!items.length) return null;
  return (
    <dl className={["metric-strip", className].filter(Boolean).join(" ")} data-metric-strip>
      {items.map((item, i) => (
        <div key={`${item.label}-${i}`}>
          <dt>{item.label}</dt>
          <dd>{item.value}</dd>
        </div>
      ))}
    </dl>
  );
}