Timeline Center

Timeline vertical com linha central e conteudo alternado esquerda/direita. Em mobile, colapsa para coluna unica. Suporta dados via JSON, CSV ou inline atraves do DataLoader, alem de HTML estatico puro. Dark mode automatico via variaveis semanticas.

components/timeline-center.cssAbrir no Figma

Uso

Quando e como utilizar cada variante da timeline center de acordo com o contexto.

Completed -- Etapa concluida com sucesso. Dot verde.
Pending -- Etapa aguardando acao ou processamento. Dot amarelo.
Error -- Etapa com falha ou bloqueio. Dot vermelho.
Warning -- Etapa que requer atencao especial. Dot amarelo.

Use a Timeline Center para representar processos sequenciais com historico temporal, como etapas de fiscalizacao, tramitacao de documentos ou jornadas do usuario. Para timelines simples sem alternancia, prefira uma lista vertical.

Exemplos

Veja abaixo os exemplos interativos da timeline center, com todas as fontes de dados e estados.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Container	`.timeline-center`	Wrapper principal com position relative e padding
Titulo	`.timeline-center__title`	Titulo centralizado, Space Grotesk 18px w600
Linha	`.timeline-center__line`	Linha vertical central absoluta, 2px de largura
Items	`.timeline-center__items`	Wrapper dos itens com z-index sobre a linha
Item	`.timeline-center__item`	Flex container alternado odd/even via flex-direction
Dot	`.timeline-center__dot`	Circulo 20x20 posicionado sobre a linha central
Card	`.timeline-center__content`	Card com borda, border-radius 8px e seta CSS
Titulo do card	`.timeline-center__content-title`	Texto 14px w600
Descricao	`.timeline-center__content-body`	Texto 13px w400 line-height 1.5
Meta	`.timeline-center__content-meta`	Flex row com responsavel e data
Data	`.timeline-center__date`	Data formatada 12px
Vazio	`.timeline-center__empty`	Fallback com borda tracejada e texto centralizado

Propriedades

Classes e modificadores disponiveis para configurar a timeline center.

Propriedade	Tipo	Default	Descrição
`.timeline-center`	`classe`	—	Container principal da timeline (position relative).
`.timeline-center__title`	`classe`	—	Titulo centralizado acima da timeline.
`.timeline-center__line`	`classe`	—	Linha vertical central que conecta os itens.
`.timeline-center__items`	`classe`	—	Wrapper dos itens da timeline (z-index 1).
`.timeline-center__item`	`classe`	—	Item individual, alternado via odd/even.
`.timeline-center__dot`	`classe`	—	Circulo sobre a linha central indicando status.
`.timeline-center__dot--completed`	`classe`	—	Dot de status concluido (verde).
`.timeline-center__dot--pending`	`classe`	—	Dot de status pendente (amarelo).
`.timeline-center__dot--error`	`classe`	—	Dot de status erro (vermelho).
`.timeline-center__dot--warning`	`classe`	—	Dot de status atencao (amarelo).
`.timeline-center__content`	`classe`	—	Card de conteudo com seta apontando para a linha.
`.timeline-center__content-title`	`classe`	—	Titulo dentro do card de conteudo.
`.timeline-center__content-body`	`classe`	—	Descricao textual dentro do card.
`.timeline-center__content-meta`	`classe`	—	Linha de metadados com responsavel e data.
`.timeline-center__date`	`classe`	—	Data formatada dentro do meta.
`.timeline-center__empty`	`classe`	—	Estado vazio com borda tracejada e mensagem centralizada.

Codigo

Snippets prontos para copiar e usar no seu projeto.

HTML estatico

html

<div class="timeline-center">
  <h3 class="timeline-center__title">Etapas do Processo</h3>
  <div class="timeline-center__line"></div>
  <div class="timeline-center__items">
    <div class="timeline-center__item">
      <div class="timeline-center__dot timeline-center__dot--completed"></div>
      <div class="timeline-center__content">
        <h4 class="timeline-center__content-title">Abertura do Processo</h4>
        <p class="timeline-center__content-body">Processo aberto pelo fiscal responsavel da regional.</p>
        <div class="timeline-center__content-meta">
          <span>Joao Silva</span>
          <span class="timeline-center__date">15/01/2025</span>
        </div>
      </div>
    </div>
    <div class="timeline-center__item">
      <div class="timeline-center__dot timeline-center__dot--pending"></div>
      <div class="timeline-center__content">
        <h4 class="timeline-center__content-title">Parecer Tecnico</h4>
        <p class="timeline-center__content-body">Aguardando resultado laboratorial para emissao do parecer.</p>
        <div class="timeline-center__content-meta">
          <span>Coordenacao Estadual</span>
        </div>
      </div>
    </div>
  </div>
</div>

Com DataLoader (JSON)

html

<script type="module">
  import { DataLoader } from '../../src/core/data-loader.js';
  import { renderTimelineCenter } from '../../src/components/timeline-center.js';

  const data = await DataLoader.load({
    endpoint: '/data/timeline/processo-etapas.json'
  });

  renderTimelineCenter(
    document.getElementById('timeline-json'),
    data,
    { title: 'etapa', date: 'data', status: 'situacao', description: 'descricao', responsible: 'responsavel' },
    { title: 'Etapas do Processo' }
  );
</script>

Com DataLoader (CSV)

html

<script type="module">
  import { DataLoader } from '../../src/core/data-loader.js';
  import { renderTimelineCenter } from '../../src/components/timeline-center.js';

  const data = await DataLoader.load({
    endpoint: '/data/timeline/historico-fiscal.csv',
    format: 'csv',
    csvOptions: { delimiter: ';' }
  });

  renderTimelineCenter(
    document.getElementById('timeline-csv'),
    data,
    { title: 'titulo', date: 'data', status: 'status', description: 'descricao' },
    { title: 'Historico Fiscal' }
  );
</script>

Com Factory (dados inline)

html

<script type="module">
  import { renderTimelineCenter } from '../../src/components/timeline-center.js';

  const data = [
    { etapa: 'Cadastro Inicial', data: '2025-03-01', situacao: 'completed', descricao: 'Produtor realizou o cadastro na plataforma.', responsavel: 'Sistema' },
    { etapa: 'Validacao Documental', data: '2025-03-10', situacao: 'completed', descricao: 'Documentos conferidos pela equipe tecnica.', responsavel: 'Ana Costa' },
    { etapa: 'Emissao de GTA', data: '2025-03-18', situacao: 'pending', descricao: 'Aguardando liberacao da GTA.', responsavel: 'Fiscal Regional' }
  ];

  renderTimelineCenter(
    document.getElementById('timeline-inline'),
    data,
    { title: 'etapa', date: 'data', status: 'situacao', description: 'descricao', responsible: 'responsavel' },
    { title: 'Jornada do Produtor' }
  );
</script>

Responsividade

Comportamento da timeline em telas menores.

Em viewports abaixo de 768px, a timeline colapsa de layout central alternado para coluna unica a esquerda:

A linha vertical move de left: 50% para left: 16px.
Todos os itens (odd e even) assumem flex-direction: row com padding-left: 40px.
Os cards ocupam width: 100% ao inves de 45%.
Os dots reposicionam para left: 16px.
As setas dos cards passam a apontar sempre para a esquerda (em direcao a linha).

Isso garante legibilidade total em dispositivos moveis sem perda de informacao.

Fonte de Dados

Formas de alimentar a timeline com dados dinamicos.

A factory renderTimelineCenter aceita tres formas de dados:

Forma	Descricao
JSON	Arquivo `.json` carregado via `DataLoader.load({ endpoint })`
CSV	Arquivo `.csv` carregado via `DataLoader.load({ endpoint, format: 'csv', csvOptions })`
Inline	Array de objetos passado diretamente no JavaScript

Parametros da factory

renderTimelineCenter(el, data, mapping, display)

Parametro	Tipo	Descricao
`el`	`HTMLElement`	Elemento DOM onde a timeline sera renderizada
`data`	`Array`	Lista de objetos com os dados dos itens
`mapping`	`Object`	Mapeamento de campos: `{ title, date, status, description, responsible }`
`display`	`Object`	Opcoes de exibicao: `{ title, emptyText }`

Auto-init via atributo

O componente tambem suporta inicializacao automatica via atributo data-arenito="timeline-center":

html

<div data-arenito="timeline-center"
     data-endpoint="/data/timeline/processo-etapas.json"
     data-title="Etapas do Processo"
     data-mapping='{"title":"etapa","date":"data","status":"situacao","description":"descricao","responsible":"responsavel"}'>
</div>

Dark Mode

Adaptacao automatica ao tema escuro.

O componente utiliza variaveis semanticas que se adaptam automaticamente ao dark mode. Os ajustes especificos incluem:

Elemento	Light	Dark
Card background	`--surface-base-neutral-container-default`	`--surface-base-neutral-container-default`
Card borda	`--border-base-neutral-default`	`--border-base-neutral-default`
Card hover shadow	`rgba(0,0,0,0.08)`	`rgba(0,0,0,0.24)`
Dot background	`--surface-base-neutral-page-default`	`--surface-base-neutral-page-default`
Linha central	`--border-base-neutral-default`	`--border-base-neutral-default`

Os tokens semanticos resolvem automaticamente para os valores corretos em cada tema. A unica diferenca explicita e a intensidade da sombra no hover do card (.dark .timeline-center__content:hover), que usa opacidade maior no dark mode para manter a percepcao visual.

Timeline Center ​

Uso ​

Exemplos ​

Anatomia ​

Propriedades ​

Codigo ​

HTML estatico ​

Com DataLoader (JSON) ​

Com DataLoader (CSV) ​

Com Factory (dados inline) ​

Responsividade ​

Fonte de Dados ​

Parametros da factory ​

Auto-init via atributo ​

Dark Mode ​

Timeline Center

Uso

Exemplos

Anatomia

Propriedades

Codigo

HTML estatico

Com DataLoader (JSON)

Com DataLoader (CSV)

Com Factory (dados inline)

Responsividade

Fonte de Dados

Parametros da factory

Auto-init via atributo

Dark Mode