Timeline.

Patrón canónico de timeline 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

17:16Extracción terminada842 filas
17:18ValidaciónSin anomalías
17:20PublicaciónCompleta

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

21 agoBorrador enviado a revisiónVersión 3
22 agoComentarios del comité editorial14 observaciones
25 agoCorrecciones incorporadas12 de 14 resueltas
27 agoAprobación finalEn espera

Nivel 3Dentro de una página

Sitio · sección

17:16Extracción terminada842 filas
17:18ValidaciónSin anomalías
17:20PublicaciónCompleta

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<ol class="ui-sample ui-timeline" data-timeline="true"><li><time dateTime="2026-08-25T17:16:00-04:00">17:16</time><strong>Extracción terminada</strong><span>842 filas</span></li><li><time dateTime="2026-08-25T17:18:00-04:00">17:18</time><strong>Validación</strong><span>Sin anomalías</span></li><li><time dateTime="2026-08-25T17:20:00-04:00">17:20</time><strong>Publicación</strong><span>Completa</span></li></ol>

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

17:16Extracción terminada842 filas
17:18ValidaciónSin anomalías
17:20PublicaciónCompleta

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

21 agoBorrador enviado a revisiónVersión 3
22 agoComentarios del comité editorial14 observaciones
25 agoCorrecciones incorporadas12 de 14 resueltas
27 agoAprobación finalEn espera

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

17:16Extracción terminada842 filas
17:18ValidaciónSin anomalías
17:20PublicaciónCompleta

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

17:16Extracción terminada842 filas
17:18ValidaciónSin anomalías
17:20PublicaciónCompleta

1280 pxEscritorio

21 agoBorrador enviado a revisiónVersión 3
22 agoComentarios del comité editorial14 observaciones
25 agoCorrecciones incorporadas12 de 14 resueltas
27 agoAprobación finalEn espera

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 Timeline

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

<ol class="ui-sample ui-timeline" data-timeline="true"><li><time dateTime="2026-08-25T17:16:00-04:00">17:16</time><strong>Extracción terminada</strong><span>842 filas</span></li><li><time dateTime="2026-08-25T17:18:00-04:00">17:18</time><strong>Validación</strong><span>Sin anomalías</span></li><li><time dateTime="2026-08-25T17:20:00-04:00">17:20</time><strong>Publicación</strong><span>Completa</span></li></ol>

Código TAILWIND

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

Código de referencia

<ol class="ui-sample ui-timeline border border-slate-300 bg-white p-4 text-slate-950 grid gap-2" data-timeline="true"><li><time dateTime="2026-08-25T17:16:00-04:00">17:16</time><strong>Extracción terminada</strong><span>842 filas</span></li><li><time dateTime="2026-08-25T17:18:00-04:00">17:18</time><strong>Validación</strong><span>Sin anomalías</span></li><li><time dateTime="2026-08-25T17:20:00-04:00">17:20</time><strong>Publicación</strong><span>Completa</span></li></ol>

Código REACT

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

Código de referencia

export interface TimelineItem {
  /** Hora o fecha visible del evento (`17:16`, `25 ago`). */
  time: string;
  /** Fecha y hora completas en ISO 8601 para el atributo `datetime` de `<time>`. */
  dateTime?: string;
  /** Nombre del evento o de la etapa. */
  title: string;
  /** Texto secundario: resultado, conteo o estado de la etapa. */
  detail?: string;
}

export interface TimelineProps {
  /** Eventos en orden cronológico. */
  items?: TimelineItem[];
  className?: string;
}

const ITEMS: TimelineItem[] = [
  { time: "17:16", dateTime: "2026-08-25T17:16:00-04:00", title: "Extracción terminada", detail: "842 filas" },
  { time: "17:18", dateTime: "2026-08-25T17:18:00-04:00", title: "Validación", detail: "Sin anomalías" },
  { time: "17:20", dateTime: "2026-08-25T17:20:00-04:00", title: "Publicación", detail: "Completa" },
];

/**
 * Línea de tiempo: lista ordenada de eventos con hora, nombre y resultado; se usa para el historial de un proceso (carga de datos, publicación, revisión).
 *
 * @example <Timeline items={[{ time: "17:18", dateTime: "2026-08-25T17:18:00-04:00", title: "Validación", detail: "3 anomalías" }, { time: "17:20", title: "Publicación", detail: "En espera" }]} />
 */
export function Timeline({ items = ITEMS, className }: TimelineProps) {
  if (!items.length) return null;
  return (
    <ol className={["ui-timeline", className].filter(Boolean).join(" ")} data-timeline>
      {items.map((item, i) => (
        <li key={`${item.title}-${i}`}>
          <time dateTime={item.dateTime}>{item.time}</time>
          <strong>{item.title}</strong>
          {item.detail ? <span>{item.detail}</span> : null}
        </li>
      ))}
    </ol>
  );
}