CSS Element

Timeline [y2timeline]

Linha do tempo vertical com ícones, cores, conectores e variante alternada.

1. Timeline Básic

Empresa fundada

Janeiro 2018

Início das operações com foco em soluções web para pequenas empresas.

Primeiro produto lançado

Março 2019

Lançamos a versão 1.0 da nossa plataforma com 500 usuários nos primeiros 30 dias.

Rodada de investimento

Setembro 2020

Captação de R$ 2M para expansão da equipe e infraestrutura.

Y2 Framework v2.0

2026 - Presente

Lançamento do framework CSS + JS com mais de 40 componentes.

2. Pontos Coloridos & Ícones

?

Tarefa concluída

Há 2 horas

Deploy em produção realizado com sucesso.

!

Alerta de sistema

Há 5 horas

Alto uso de CPU detectado no servidor #3.

?

Falha detectada

Há 8 horas

Serviço de pagamento fora do ar por 3 minutos.

i

Atualização disponível

Ontem

Nova versão do banco de dados disponível.

3. Alternada (Centrada)

2018 - Início

Fundação da empresa em São Paulo.

2020 - Crescimento

Expansão para outros estados.

2022 - Desafio

Reestruturação do modelo de negócio.

2026 - Hoje

Lançamento da plataforma Y2.

4. Timeline com Cards

1

Deploy v3.0

Concluído

15 Mar 2026 - 14:32

Deploy automático via CI/CD concluído. Todas as métricas normais.

2

Alta latência

Alerta

15 Mar 2026 - 11:15

P95 acima de 800ms. Investigando causas.

Quick Reference

Atributo/Classe Tipo Descrição
[y2timeline] Container Container principal da linha do tempo.
.is-alt Modificador Variante alternada - itens se alternam nos lados da linha central.
.y2timeline-it Item Evento individual da linha do tempo.
.y2timeline-dot Elemento Ponto/ícone indicador. Pode conter texto, símbolo ou emoji.
.is-pri, .is-suc, .is-ale, .is-err, .is-inf Cor Cores do .y2timeline-dot.
.y2timeline-body Elemento Container do conteúdo ao lado do ponto.
.y2timeline-ttl Elemento Título do evento.
.y2timeline-tim Elemento Data/hora do evento.
.y2timeline-txt Elemento Texto descritivo do evento.