```meta
title: :::timeline — passos ligados por uma linha
description: O rastreio de um pedido, um passo a passo, um histórico: passos ligados por uma linha, cada um com o estado em palavras.
```

_flows.md · documentação · [Blocos](/@docs/blocks)_

# :::timeline

Uma sequência de passos ligados por uma linha: o rastreio de um pedido, um passo a passo, um histórico, um começo guiado. Cada item, separado por `---`, é um passo.

## Ao vivo

:::timeline
**Pedido feito** `state:done`

10 mar 2027 · pelo site
---
**Em produção** `state:current`

Torneando e esmaltando
---
**Enviado** `state:upcoming`

Previsão: 24 mar
:::

~~~text
:::timeline
**Pedido feito** `state:done`

10 mar 2027 · pelo site
---
**Em produção** `state:current`

Torneando e esmaltando
---
**Enviado** `state:upcoming`

Previsão: 24 mar
:::
~~~

A primeira linha é o título; as outras, os detalhes. `state:done`, `current`, `upcoming`, `error` ou `skipped` dão o marcador e dizem em palavras onde o passo está.

## Na horizontal, numerado

`direction:horizontal` corre de lado, como um passo a passo, e fica vertical numa tela estreita.

:::timeline direction:horizontal marker:number
**Conta** `state:done`
---
**Espaço** `state:done`
---
**Primeira página** `state:current`
---
**Publicar** `state:upcoming`
:::

~~~text
:::timeline direction:horizontal marker:number
**Conta** `state:done`
---
**Espaço** `state:done`
---
**Primeira página** `state:current`
---
**Publicar** `state:upcoming`
:::
~~~

## De uma coleção

Um [@data](/@docs/blocks/data#linha-do-tempo) com `view:timeline` desenha as linhas de uma coleção como os passos de uma linha do tempo, e ela muda quando as linhas mudam.

## Argumentos

- `direction` — `vertical` (o padrão) ou `horizontal`.
- `marker` — `dot` (o padrão), `number` ou `icon`.
- `line` — `solid`, `dashed` ou `none`.
- `density` — `normal` ou `compact`, para um histórico longo.

Um item que é só um título agrupa os passos de baixo (Hoje, Ontem); uma `:::timeline` dentro de um item são os subpassos dele.