Pular para o conteúdo
Faculdade PhorteDesign System

TimelineItem

Em andamento

Um marco de linha do tempo: ano, marcador e linha que liga ao próximo, título e descrição. O marco atual ganha marcador cheio e "momento atual" para quem ouve. No celular, o ano sobe para cima do título.

Função
Conteúdo
Também chamado de
linha do tempo, marco, histórico, timeline
Mora em
app/components/molecules/TimelineItem.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Linha completa, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Linha completa
  2. Padrão
  3. Atual
  4. Texto longo
  5. Pelo contêiner Timeline

Quando usar

Em sequência, para contar uma história em datas — a trajetória da instituição, as etapas de um processo seletivo.

Faça

  • Monte a linha pelo contêiner Timeline (E72): ele faz a <ol> com cada item como <li>, tira a linha do último e marca o atual pelo índice ou pelo ano.
  • Avulso, use as="li" dentro de uma <ol> e marque isLast no último — é o que o Timeline faz sozinho.
  • Use atual em um marco só.
  • Acerte o nível do título com tituloComo (h3 por padrão).

Evite

  • Marcos sem ordem cronológica.
  • Mais de um atual.

Quando não usar. Para as próximas turmas com datas e vagas, use o TurmaCard. Para passos numerados sem data, uma lista ordenada.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Ano — À esquerda no computador (24px, `font-black`, vermelho); acima do título no celular.
  2. Trilho — Marcador redondo de 14px e a linha até o próximo — decorativos.
  3. Título — `h3` por padrão, `text-lg` em negrito.
  4. Descrição — Texto cinza, até a largura de leitura.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoMarcador vazio (fundo --card) com borda vermelha.
Atualatual: marcador cheio com contorno afastado, "— momento atual" escondido no título e data-atual.
ÚltimoisLast: sem a linha e sem o espaço de baixo.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Abaixo de 768pxO ano da coluna esquerda some e aparece acima do título — um só é exibido por vez.

Relacionados