intro

Timeline

A vertical list of events, mapping progress and status.

Timeline

The Timeline component illustrates a sequence of events. It uses a clean vertical line punctuated by dots that carry semantic status meaning (done, active, pending).

Demonstration

  1. Inauguração de Brasília

    Transferência da capital federal para o centro-oeste do país.

  2. Inauguração do MASP

    Lina Bo Bardi entrega o Museu de Arte de São Paulo.

  3. Manutenção do Legado

    Preservação contínua da arquitetura modernista.

  4. Novas Formas

    Adaptação dos princípios modernistas para novas tecnologias.

Usage

<script>
  import { Timeline } from 'cobogo';


  const events = [
    {
      date: '10 Out 2026',
      title: 'Projeto iniciado',
      description: 'Definição de escopo e levantamento de requisitos.',
      status: 'done'
    },
    {
      date: '15 Out 2026',
      title: 'Revisão de design',
      status: 'active'
    },
    {
      date: '20 Out 2026',
      title: 'Entrega final',
      status: 'pending'
    }
  ];
</script>


<Timeline items={events} />

Doctrine

The Timeline is an exercise in restraint. The connecting line is thin (2px) and subtle (var(--border)). The dots carry the visual weight, using saturated primary colors (var(--verde), var(--azul)) or retreating into neutrality (var(--concreto-40)) depending on their status. The layout avoids unnecessary boxes or cards, letting typography and spacing delineate the events.