Timeline

La Línea de tiempo muestra hitos en orden cronológico: cada uno con su fecha, un punto conector y una tarjeta con título y texto.

Propiedades y configuraciones

Cuando usarlo

Úsalo para contar una secuencia de hechos en el tiempo: la historia de una institución o de una política pública, el calendario de un proceso (apertura de postulaciones, publicación de resultados, pago) o los cambios de una normativa.

Si la persona debe avanzar por pasos de un trámite, usa Stepper. Para mostrar el avance de una tarea en curso, usa Progress. Para una lista de elementos sin relación temporal, usa Item List o Cards.

Buenas prácticas

Recomendado: Ordena los hitos cronológicamente

Presenta los hitos siempre en el mismo sentido, del más antiguo al más reciente. El orden es lo que da sentido a la línea.

Recomendado: Usa fechas claras y en el mismo formato

Todas las fechas con el mismo nivel de detalle y un formato fácil de leer. Evita mezclar “03/2026”, “marzo” y “Q2”.

Recomendado: Escribe títulos que resuman el hito

El título dice qué pasó en pocas palabras y el texto agrega el detalle. Se puede recorrer la línea leyendo solo los títulos.

Recomendado: Usa la horizontal para pocos hitos breves

En escritorio, la línea horizontal funciona con 3 o 4 hitos de texto corto. Con más hitos o textos largos, usa la vertical.

Malas prácticas

No recomendado: No lo uses como pasos de un trámite

La Línea de tiempo no indica en qué paso está la persona ni permite avanzar. Para un formulario por etapas, usa Stepper.

No recomendado: No escribas textos largos en cada hito

Párrafos extensos rompen el ritmo de lectura y esconden la secuencia. Resume el hito y enlaza al detalle si es necesario.

No recomendado: No mezcles formatos de fecha

Formatos distintos obligan a interpretar cada fecha y hacen difícil comparar cuánto tiempo pasó entre hitos.

No recomendado: No uses la horizontal con muchos hitos

Cada hito se angosta al agregar más; con cinco o más, títulos y textos quedan apretados e ilegibles.

Recomendaciones de accesibilidad

Usa una lista ordenada
El componente se construye con <ol> y <li>: los lectores de pantalla anuncian cuántos hitos hay y la posición de cada uno, lo que transmite el orden cronológico.

Mantén el conector oculto
La línea y el punto (__connector) van con aria-hidden="true": son decorativos y no aportan información adicional.

Introduce la línea con un título
Antecede la lista con un encabezado visible (p. ej. “Calendario de postulación”) para que se entienda qué secuencia se está mostrando.

Usa <time> para fechas precisas
Cuando el hito tiene una fecha exacta, puedes envolverla en <time datetime="2026-03-02"> para que sea interpretable por máquinas y tecnologías de asistencia.

No dependas del orden visual en horizontal
La variante horizontal reordena visualmente fecha, conector y tarjeta, pero el orden de lectura sigue siendo el del DOM. Mantén el contenido comprensible leído en ese orden.

Evita jerarquías falsas en los títulos
El título del hito es un párrafo destacado (__title). Si la página necesita encabezados para cada hito, respeta la jerarquía de títulos del resto del documento.