Timeline Card Grid
Grid de cards para timeline de processos, fiscalizações e etapas. Cada card exibe título, data, status e descrição. Aceita dados de CSV, JSON ou API. Dark mode automático via variáveis semânticas.
Uso
Quando e como utilizar o grid de cards de timeline.
- Processos — Exibir etapas de um processo em formato de cards com status.
- Fiscalizações — Listar fiscalizações com data, responsável e situação.
- Etapas — Visualizar progresso de etapas com badges de status coloridos.
- Timeline geral — Qualquer listagem cronológica que combine título, data, status e descrição.
Exemplos
Veja abaixo os exemplos interativos do timeline card grid, com todos os seus estados.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Container | .timeline-card-grid | Wrapper com título opcional |
| Grid | .timeline-card-grid__grid | Grid responsivo auto-fill |
| Card | .timeline-card-grid__card | Card com header, status, body, footer |
| Status | .timeline-card-grid__status | Badge colorido por status |
Propriedades
Classes e modificadores disponíveis para configurar o timeline card grid.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.timeline-card-grid | classe | — | Container principal do grid. |
.timeline-card-grid__title | classe | — | Título do grid. |
.timeline-card-grid__grid | classe | — | Grid CSS responsivo de cards. |
.timeline-card-grid__card | classe | — | Card individual. |
.timeline-card-grid__header | classe | — | Título + data no topo do card. |
.timeline-card-grid__card-title | classe | — | Título do card. |
.timeline-card-grid__date | classe | — | Data formatada. |
.timeline-card-grid__status | classe | — | Badge de status. |
.timeline-card-grid__status--completed | classe | — | Status concluído (verde). |
.timeline-card-grid__status--pending | classe | — | Status pendente (amarelo). |
.timeline-card-grid__status--error | classe | — | Status erro (vermelho). |
.timeline-card-grid__status--warning | classe | — | Status atenção (amarelo). |
.timeline-card-grid__body | classe | — | Descrição do card. |
.timeline-card-grid__footer | classe | — | Rodapé com responsável. |
.timeline-card-grid__responsible | classe | — | Nome do responsável. |
.timeline-card-grid__empty | classe | — | Estado vazio. |
.timeline-card-grid--cols-2 | classe | — | Modificador: forçar 2 colunas. |
Código
Snippets prontos para copiar e usar no seu projeto.
HTML estático
html
<div class="timeline-card-grid">
<h2 class="timeline-card-grid__title">Fiscalizações</h2>
<div class="timeline-card-grid__grid">
<div class="timeline-card-grid__card">
<div class="timeline-card-grid__header">
<span class="timeline-card-grid__card-title">Vistoria inicial</span>
<span class="timeline-card-grid__date">12/03/2026</span>
</div>
<span class="timeline-card-grid__status timeline-card-grid__status--completed">Concluído</span>
<div class="timeline-card-grid__body">Inspeção realizada no local com registro fotográfico.</div>
<div class="timeline-card-grid__footer">
<span class="timeline-card-grid__responsible">Maria Silva</span>
</div>
</div>
<div class="timeline-card-grid__card">
<div class="timeline-card-grid__header">
<span class="timeline-card-grid__card-title">Análise documental</span>
<span class="timeline-card-grid__date">14/03/2026</span>
</div>
<span class="timeline-card-grid__status timeline-card-grid__status--pending">Pendente</span>
<div class="timeline-card-grid__body">Aguardando envio dos documentos complementares.</div>
<div class="timeline-card-grid__footer">
<span class="timeline-card-grid__responsible">João Santos</span>
</div>
</div>
<div class="timeline-card-grid__card">
<div class="timeline-card-grid__header">
<span class="timeline-card-grid__card-title">Notificação</span>
<span class="timeline-card-grid__date">10/03/2026</span>
</div>
<span class="timeline-card-grid__status timeline-card-grid__status--error">Erro</span>
<div class="timeline-card-grid__body">Falha no envio da notificação ao responsável.</div>
<div class="timeline-card-grid__footer">
<span class="timeline-card-grid__responsible">Ana Oliveira</span>
</div>
</div>
</div>
</div>Via DataLoader (JS)
js
const grid = document.querySelector('.timeline-card-grid__grid');
fetch('/api/etapas')
.then(res => res.json())
.then(items => {
grid.innerHTML = items.map(item => `
<div class="timeline-card-grid__card">
<div class="timeline-card-grid__header">
<span class="timeline-card-grid__card-title">${item.titulo}</span>
<span class="timeline-card-grid__date">${item.data}</span>
</div>
<span class="timeline-card-grid__status timeline-card-grid__status--${item.status}">${item.statusLabel}</span>
<div class="timeline-card-grid__body">${item.descricao}</div>
<div class="timeline-card-grid__footer">
<span class="timeline-card-grid__responsible">${item.responsavel}</span>
</div>
</div>
`).join('');
});Via ArenitoFactory (definição de domínio JSON)
json
{
"component": "timeline-card-grid",
"title": "Etapas da Fiscalização",
"datasource": {
"endpoint": "/api/fiscalizacoes/123/etapas",
"type": "json"
},
"mapping": {
"card-title": "titulo",
"date": "data",
"status": "situacao",
"body": "descricao",
"responsible": "responsavel"
}
}Fonte de Dados
Formatos de dados aceitos e como configurar a origem.
O componente aceita três formatos de fonte de dados: CSV, JSON e API.
CSV
Arquivos CSV com delimitador ;. O componente faz o parse automaticamente.
json
{
"datasource": {
"endpoint": "/data/etapas.csv",
"type": "csv",
"delimiter": ";"
}
}JSON
Arquivos JSON estáticos ou respostas de API no mesmo formato.
json
{
"datasource": {
"endpoint": "/data/etapas.json",
"type": "json"
}
}API
Para trocar de CSV para API, basta alterar o endpoint e o type:
json
{
"datasource": {
"endpoint": "/api/fiscalizacoes/123/etapas",
"type": "json"
}
}Objeto de mapeamento
O mapping define a correspondência entre os campos do dado e os elementos do card:
json
{
"mapping": {
"card-title": "titulo",
"date": "data_formatada",
"status": "situacao",
"body": "descricao",
"responsible": "nome_responsavel"
}
}Dark Mode
Comportamento do componente no modo escuro.
O dark mode é automático via variáveis semânticas. Todos os tokens de cor (fundo do card, texto, bordas e badges de status) adaptam-se automaticamente quando o tema escuro é ativado. Nenhuma classe adicional é necessária.