Timeline no SW Core — documentação e exemplos

O que é

Serve para contar "o que aconteceu e quando": o rastreio de um pedido (pago → separado → enviado), a história da empresa (2012, 2018, 2024), o histórico de um cliente no painel, as novidades de uma versão. Você coloca sw-tml na caixa de fora e, dentro dela, um bloco class="sw-tml-it" para cada acontecimento. Cada acontecimento tem até 4 peças, todas opcionais: a bolinha, a hora, o título e a descrição.

É só CSS — não precisa de JavaScript. A linha é desenhada sozinha pela caixa sw-tml; você só escreve as bolinhas. A cor de cada bolinha é você quem escolhe no HTML (verde, amarelo, vermelho, cheia) — a linha do tempo não "sabe" em que etapa o pedido está.

Quando usar

Rastreio de pedido ou entrega: cada etapa uma bolinha, a concluída cheia (is-fil).
História da empresa na página "Sobre": um ano por item, com título e texto curto.
Histórico no painel (o que mudou num cadastro, quem aprovou, quando): hora + título.
Linha deitada (sw-tml="h") para poucas etapas numa faixa só, como "Pedido → Pagamento → Envio → Entrega".
Para os passos de um formulário em várias telas (etapa 1, 2, 3), use o Stepper, não a linha do tempo.

Comece aqui

1
Coloque o SW Core no <head> da página (uma vez só). O segundo arquivo só é preciso se você for colocar ícone swi-* dentro das bolinhas.
```
<link rel="stylesheet" href="swcore/swcore.min.css">
<link rel="stylesheet" href="swcore/swcore.compl.min.css">
```

2

Escreva a caixa sw-tml e, dentro, um sw-tml-it por acontecimento, com a bolinha e o título.

Pedido recebido

Em separação

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil"></div>
    <div class="sw-tml-ttl">Pedido recebido</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot"></div>
    <div class="sw-tml-ttl">Em separação</div>
  </div>
</div>

3

Quer mais informação? Acrescente a hora (sw-tml-tme) e a descrição (sw-tml-txt) no mesmo item.

Hoje · 09:20

Pagamento aprovado

Pix confirmado pelo banco.

<div class="sw-tml-it">
  <div class="sw-tml-dot is-suc"><i class="swi-check"></i></div>
  <div class="sw-tml-tme">Hoje · 09:20</div>
  <div class="sw-tml-ttl">Pagamento aprovado</div>
  <div class="sw-tml-txt">Pix confirmado pelo banco.</div>
</div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Estados da bolinha

A bolinha é a <div class="sw-tml-dot">. Sem classe extra ela fica vazada, com contorno na cor primária. Acrescente uma classe para mudar a cor.

Aguardando envio

Padrão — vazada, cor primária

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot"></div>
    <div class="sw-tml-ttl">Aguardando envio</div>
  </div>
</div>

Pedido recebido

is-fil — cheia (etapa concluída)

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil"></div>
    <div class="sw-tml-ttl">Pedido recebido</div>
  </div>
</div>

Pagamento aprovado

is-suc — verde (deu certo)

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-suc"></div>
    <div class="sw-tml-ttl">Pagamento aprovado</div>
  </div>
</div>

Endereço a confirmar

is-ale — amarelo (atenção)

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-ale"></div>
    <div class="sw-tml-ttl">Endereço a confirmar</div>
  </div>
</div>

Entrega não realizada

is-err — vermelho (falhou)

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-err"></div>
    <div class="sw-tml-ttl">Entrega não realizada</div>
  </div>
</div>

2. O que vai dentro da bolinha

A bolinha pode ficar vazia ou levar um número, um símbolo ou um ícone swi-* pequeno. Ele pega a cor do estado sozinho.

Conta criada

Vazia

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-suc"></div>
    <div class="sw-tml-ttl">Conta criada</div>
  </div>
</div>

1

Primeira etapa

Número

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil">1</div>
    <div class="sw-tml-ttl">Primeira etapa</div>
  </div>
</div>

Entregue

Ícone swi-*

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-suc">
      <i class="swi-check"></i>
    </div>
    <div class="sw-tml-ttl">Entregue</div>
  </div>
</div>

Cancelado

Ícone + erro

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-err">
      <i class="swi-x"></i>
    </div>
    <div class="sw-tml-ttl">Cancelado</div>
  </div>
</div>

3. Peças de cada acontecimento

As 4 peças são opcionais. Use só o que a informação pede.

Contrato assinado

Só o título

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot"></div>
    <div class="sw-tml-ttl">Contrato assinado</div>
  </div>
</div>

12/03 · 14:05

Contrato assinado

Hora + título

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot"></div>
    <div class="sw-tml-tme">12/03 · 14:05</div>
    <div class="sw-tml-ttl">Contrato assinado</div>
  </div>
</div>

Contrato assinado

Enviado por e-mail ao cliente.

Título + descrição

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot"></div>
    <div class="sw-tml-ttl">Contrato assinado</div>
    <div class="sw-tml-txt">Enviado por e-mail ao cliente.</div>
  </div>
</div>

12/03 · 14:05

Contrato assinado

Enviado por e-mail ao cliente.

Completo — hora, título e descrição

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil"></div>
    <div class="sw-tml-tme">12/03 · 14:05</div>
    <div class="sw-tml-ttl">Contrato assinado</div>
    <div class="sw-tml-txt">Enviado por e-mail ao cliente.</div>
  </div>
</div>

4. Direção

Sem valor, a linha fica em pé (um acontecimento embaixo do outro). Com sw-tml="h" ela deita: cada acontecimento ganha 180 px de largura e, se não couber, a faixa rola de lado.

2012

Fundação

Começamos num escritório de 20 m².

2018

Primeira loja

Abrimos a loja do centro.

2024

Loja virtual

Vendas para todo o Brasil.

Padrão — em pé (vertical)

<div sw-tml>
  <div class="sw-tml-it"><div class="sw-tml-dot is-fil"></div><div class="sw-tml-tme">2012</div><div class="sw-tml-ttl">Fundação</div><div class="sw-tml-txt">Começamos num escritório de 20 m².</div></div>
  <div class="sw-tml-it"><div class="sw-tml-dot is-fil"></div><div class="sw-tml-tme">2018</div><div class="sw-tml-ttl">Primeira loja</div><div class="sw-tml-txt">Abrimos a loja do centro.</div></div>
  <div class="sw-tml-it"><div class="sw-tml-dot"></div><div class="sw-tml-tme">2024</div><div class="sw-tml-ttl">Loja virtual</div><div class="sw-tml-txt">Vendas para todo o Brasil.</div></div>
</div>

1

Pedido feito

12/03

2

Pagamento

12/03

3

Enviado

13/03

4

Entrega

previsto 16/03

h — deitada (horizontal)

<div sw-tml="h">
  <div class="sw-tml-it"><div class="sw-tml-dot is-fil">1</div><div class="sw-tml-ttl">Pedido feito</div><div class="sw-tml-txt">12/03</div></div>
  <div class="sw-tml-it"><div class="sw-tml-dot is-fil">2</div><div class="sw-tml-ttl">Pagamento</div><div class="sw-tml-txt">12/03</div></div>
  <div class="sw-tml-it"><div class="sw-tml-dot is-suc">3</div><div class="sw-tml-ttl">Enviado</div><div class="sw-tml-txt">13/03</div></div>
  <div class="sw-tml-it"><div class="sw-tml-dot">4</div><div class="sw-tml-ttl">Entrega</div><div class="sw-tml-txt">previsto 16/03</div></div>
</div>

Tabela de opções

Palavra	O que faz	Exemplo
Caixa de fora
`sw-tml`	Liga a linha do tempo. Sem valor: em pé.	`<div sw-tml>`
`h`	Deitada. Cada item tem 180 px de largura mínima; se não couber, rola de lado.	`<div sw-tml="h">`
Peças (classes dentro de cada item)
`sw-tml-it`	Um acontecimento. Tudo abaixo vai dentro dele.	`<div class="sw-tml-it">`
`sw-tml-dot`	A bolinha presa na linha. Pode ficar vazia ou ter número/ícone dentro.	`<div class="sw-tml-dot"></div>`
`sw-tml-tme`	Hora ou data, pequena e cinza, acima do título.	`<div class="sw-tml-tme">Hoje · 09:20</div>`
`sw-tml-ttl`	Título do acontecimento.	`<div class="sw-tml-ttl">Pedido enviado</div>`
`sw-tml-txt`	Descrição, em cinza.	`<div class="sw-tml-txt">Código de rastreio…</div>`
Estado da bolinha (classe junto de sw-tml-dot)
`(nenhum)`	Vazada, contorno na cor primária.	`class="sw-tml-dot"`
`is-fil`	Cheia na cor primária — etapa concluída.	`class="sw-tml-dot is-fil"`
`is-suc`	Contorno e conteúdo verdes — deu certo.	`class="sw-tml-dot is-suc"`
`is-ale`	Contorno e conteúdo amarelos — atenção.	`class="sw-tml-dot is-ale"`
`is-err`	Contorno e conteúdo vermelhos — falhou.	`class="sw-tml-dot is-err"`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Rastreio de pedido (loja virtual) Ao vivo

10/03 · 10:12

Pedido recebido

10/03 · 10:15

Pagamento aprovado

Pix confirmado.

11/03 · 16:40

Enviado

Código de rastreio: BR123456789.

Entrega

Previsão: 14/03.

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil"><i class="swi-check"></i></div>
    <div class="sw-tml-tme">10/03 · 10:12</div>
    <div class="sw-tml-ttl">Pedido recebido</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil"><i class="swi-check"></i></div>
    <div class="sw-tml-tme">10/03 · 10:15</div>
    <div class="sw-tml-ttl">Pagamento aprovado</div>
    <div class="sw-tml-txt">Pix confirmado.</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-suc"><i class="swi-package"></i></div>
    <div class="sw-tml-tme">11/03 · 16:40</div>
    <div class="sw-tml-ttl">Enviado</div>
    <div class="sw-tml-txt">Código de rastreio: BR123456789.</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot"></div>
    <div class="sw-tml-ttl">Entrega</div>
    <div class="sw-tml-txt">Previsão: 14/03.</div>
  </div>
</div>

Histórico de um cliente no painel Ao vivo

Hoje · 08:02

Boleto vencido

Mensalidade de março não paga.

Ontem · 17:30

Lembrete enviado

Por WhatsApp e e-mail.

01/02 · 09:00

Plano renovado

<div sw-tml>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-err"></div>
    <div class="sw-tml-tme">Hoje · 08:02</div>
    <div class="sw-tml-ttl">Boleto vencido</div>
    <div class="sw-tml-txt">Mensalidade de março não paga.</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-ale"></div>
    <div class="sw-tml-tme">Ontem · 17:30</div>
    <div class="sw-tml-ttl">Lembrete enviado</div>
    <div class="sw-tml-txt">Por WhatsApp e e-mail.</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-suc"></div>
    <div class="sw-tml-tme">01/02 · 09:00</div>
    <div class="sw-tml-ttl">Plano renovado</div>
  </div>
</div>

Como funciona o serviço (faixa deitada) Ao vivo

1

Conversa

Entendemos o seu negócio.

2

Proposta

Prazo e valor por escrito.

3

Criação

Você acompanha cada tela.

4

No ar

Site publicado e ensinado.

<div sw-tml="h">
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil">1</div>
    <div class="sw-tml-ttl">Conversa</div>
    <div class="sw-tml-txt">Entendemos o seu negócio.</div>
  </div>
  <div class="sw-tml-it">
    <div class="sw-tml-dot is-fil">2</div>
    <div class="sw-tml-ttl">Proposta</div>
    <div class="sw-tml-txt">Prazo e valor por escrito.</div>
  </div>
  <!-- …um sw-tml-it por etapa -->
</div>

Precisa de quê

swcore.min.css — a linha do tempo.
swcore.compl.min.css — só se usar ícone swi-* dentro das bolinhas.

Cuidados — erros comuns

O estado é classe na bolinha (class="sw-tml-dot is-suc"), não no item nem na caixa de fora.
A linha é desenhada pela caixa sw-tml. Se você esquecer o atributo e usar só as classes sw-tml-it, as bolinhas ficam soltas, sem linha.
Dentro da bolinha cabe pouco (24 px): um número de 1 ou 2 dígitos, ✓, × ou um ícone. Texto maior vaza.
Na versão deitada (h), título e descrição longos ficam espremidos em 180 px. Use textos curtos.

O que ele não faz

Não tem movimento nem controle: é só visual. Quem decide qual bolinha está cheia, verde ou vermelha é você, no HTML (ou o seu sistema, ao montar a página).
A linha é uma só cor (cinza). Ela não pinta "até onde já foi" — para isso use as bolinhas cheias.
Para etapas de um formulário com passo atual e passos concluídos, o componente certo é o Stepper.

Timeline CSS

O que é

Quando usar

Comece aqui

Todas as variações

1. Estados da bolinha

2. O que vai dentro da bolinha

3. Peças de cada acontecimento

4. Direção

Tabela de opções

Receitas prontas — usos reais

Precisa de quê

Cuidados — erros comuns

O que ele não faz