Tucano v0.37.2

Linha do tempo

Histórico em ordem: o andamento de um pedido, o que aconteceu com um contrato, as versões de um changelog. É só classe sobre <ol> — a ordem é parte do significado, e o leitor de tela anuncia "item 2 de 5" sem ninguém escrever ARIA. Ponto e trilho são desenhados pela classe; o template só traz o conteúdo.

  1. Pedido confirmado

    Pagamento aprovado no Pix.

  2. Separado no estoque

  3. Em transporte

    Saiu do centro de distribuição de Campinas.

  4. Saiu para entrega

  5. Entregue

    Previsão: 12/09/2026.

O que já aconteceu tem ponto cheio no tom de sucesso; a etapa atual, cheio no destaque; o que ainda vem fica vazado e neutro. Quem diz o estado é o ponto — o texto fica livre para dizer o quê e quando.

Exemplos

Tudo abaixo é a mesma lista, com tom, preenchimento, ícone e etiqueta trocados.

Histórico de contrato, com ícones

tuc-timeline__icon como primeiro filho do item põe o ícone no lugar do ponto.

  1. Contrato assinado

    As duas partes assinaram pelo portal.

  2. Enviado para assinatura

  3. Cláusula 4 revisada

    Multa por atraso passou de 2% para 1%.

  4. Rascunho criado

Auditoria, com etiqueta

Uma tuc-badge no cabeçalho alinha pelo centro da linha.

  1. Permissão removida

    Acesso
    Ana Lima tirou de Rafael Souza o acesso ao financeiro.

  2. Login de novo dispositivo

    Sessão
    Chrome no macOS, São Paulo.

  3. Relatório exportado

    Dados

Os cinco tons, vazados

Sem is-filled o ponto é um anel no tom, sobre o fundo.

  1. is-accent

  2. is-success

  3. is-warning

  4. is-danger

  5. is-info

  6. sem tom

Os cinco tons, cheios

is-filled enche o ponto com o tom do item.

  1. is-accent is-filled

  2. is-success is-filled

  3. is-warning is-filled

  4. is-danger is-filled

  5. is-info is-filled

  6. is-filled, sem tom

Como usar

Não há JavaScript nem atributo data-*: escreva as classes e está pronto. Cada item tem um cabeçalho com título e hora, e um corpo opcional.

<ol class="tuc-timeline">
  <li class="tuc-timeline__item is-success is-filled">
    <div class="tuc-timeline__head">
      <p class="tuc-timeline__title">Contrato assinado</p>
      <time class="tuc-timeline__time" datetime="2026-09-12">12/09/2026</time>
    </div>
    <div class="tuc-timeline__body">As duas partes assinaram.</div>
  </li>
  <li class="tuc-timeline__item">
    <div class="tuc-timeline__head">
      <p class="tuc-timeline__title">Enviado para assinatura</p>
      <time class="tuc-timeline__time" datetime="2026-09-10">10/09/2026</time>
    </div>
  </li>
</ol>

Com ícone

O ícone vai num <span> como primeiro filho do item. Quando ele existe, o ponto sai e o círculo ganha o fundo suave do tom; o SVG é dimensionado pela classe.

<li class="tuc-timeline__item is-success">
  <span class="tuc-timeline__icon"><svg viewBox="0 0 24 24" aria-hidden="true">...</svg></span>
  <div class="tuc-timeline__head">...</div>
</li>

No template do Django

O tom costuma sair do tipo do evento. Um dicionário no modelo, ou um filtro, evita o if em cascata no template.

class Event(models.Model):
    TONES = {"signed": "is-success", "revised": "is-warning", "canceled": "is-danger"}
    kind = models.CharField(max_length=20)
    title = models.CharField(max_length=120)
    created_at = models.DateTimeField(auto_now_add=True)

    @property
    def tone(self):
        return self.TONES.get(self.kind, "")
<ol class="tuc-timeline">
  {% for event in contract.events.all %}
  <li class="tuc-timeline__item {{ event.tone }}{% if forloop.first %} is-filled{% endif %}">
    <div class="tuc-timeline__head">
      <p class="tuc-timeline__title">{{ event.title }}</p>
      <time class="tuc-timeline__time" datetime="{{ event.created_at|date:'c' }}">{{ event.created_at|date:"d/m/Y H:i" }}</time>
    </div>
  </li>
  {% endfor %}
</ol>

Ajustar a geometria

Três variáveis na própria lista controlam a conta do ponto e do trilho. A primeira linha do cabeçalho tem altura fixa pelo mesmo motivo do .tuc-choice: o centro do ponto não pode depender da fonte do projeto.

.timeline-large {
  --tuc-timeline-gutter: 2rem;   /* coluna do ponto; o ícone ocupa ela toda */
  --tuc-timeline-dot: 1rem;      /* diâmetro do ponto */
  --tuc-timeline-line: 2rem;     /* altura da primeira linha do cabeçalho */
}

Acessibilidade

A estrutura faz o trabalho. <ol> dá a posição de cada item, <time datetime> dá a data em formato que a máquina lê, e ponto e trilho são pseudo-elementos, invisíveis para o leitor de tela.

A cor não pode ser a única informação

O tom do ponto não chega a quem não vê e confunde quem não distingue as cores. Diga o estado no texto — "Cancelado", "Em transporte" — ou numa tuc-badge no cabeçalho, e marque o SVG do ícone com aria-hidden="true".

Classes

Só classe, sem componente em JavaScript.

ClasseOndeO que faz
tuc-timeline<ol>A lista; tira marcador e recuo
tuc-timeline__item<li>Um evento; desenha ponto e trilho. O último item não tem trilho
is-accent is-success is-warning is-danger is-infoitemTom do ponto e do ícone; sem tom, --tuc-subtle
is-filleditemPonto cheio no tom; sem ela, vazado
tuc-timeline__iconprimeiro filho do itemÍcone no lugar do ponto, com fundo suave do tom
tuc-timeline__headitemLinha do título, da hora e de uma etiqueta; quebra linha quando não cabe
tuc-timeline__titleno cabeçalhoTítulo em peso 600, sem margem — pode ser <p> ou um <h2>/<h3>
tuc-timeline__timeno cabeçalhoData ou hora, menor, em tom apagado e com dígitos de largura fixa
tuc-timeline__bodyitemTexto de apoio em tom apagado
VariávelPadrãoControla
--tuc-timeline-gutter1.5remLargura da coluna do ponto e tamanho do ícone
--tuc-timeline-dot0.75remDiâmetro do ponto
--tuc-timeline-line1.5remAltura da primeira linha do cabeçalho, onde o ponto se centra