Valmor

Timeline

Linha do tempo para eventos.

Timeline

Vertical compacto (acompanhamento de pedido)

  • Pedido confirmado
  • Pagamento aprovado
  • Em separação
  • Em trânsito

Vertical com textos dos dois lados

  • 1984
    Macintosh 128K
  • 1998
    iMac G3
  • 2007
    iPhone
  • 2015
    Apple Watch

Horizontal com textos dos dois lados

  • Q1
    Discovery
  • Q2
    Design
  • Q3
    Build
  • Q4
    Launch

Vertical sem ícones (apenas marcadores)

  • Primeiro registro
  • Marco intermediário
  • Evento recente
<!-- Timeline Component -->
<div class="timeline">
  Timeline content here
</div>
---
import Timeline from '@/components/ui/data-display/Timeline/Timeline.astro';
---

<Timeline />

Uso

Quando usar

  • Use Timeline para linha do tempo para eventos.
  • Ideal para interfaces que precisam de exibição de dados

Boas práticas

  • Mantenha consistência com outros componentes da mesma categoria
  • Considere acessibilidade e estados de interação
  • Teste em diferentes tamanhos de tela