Componentes
Selo, etiqueta, contador, versão
Quatro marcas pequenas, quatro formas: estado que muda, classificação, quantidade que pede visita, identificador de versão.
Quando não usar
- data ou frase dentro do selo
- valor em forma de selo
- selo do tamanho do título
As quatro marcas
claro
Não iniciada Em execução Prazo vencido Travado Concluída
Chamada 3 não lidas v4
Prazo vencidoescuro
Não iniciada Em execução Prazo vencido Travado Concluída
Chamada 3 não lidas v4
Prazo vencido<p class="site-row">
<span class="hx-badge">Não iniciada</span>
<span class="hx-badge hx-badge-info">Em execução</span>
<span class="hx-badge hx-badge-warning"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-triangle-alert"></use></svg>Prazo vencido</span>
<span class="hx-badge hx-badge-danger"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-octagon-alert"></use></svg>Travado</span>
<span class="hx-badge hx-badge-success">Concluída</span>
</p>
<p class="site-row"><span class="hx-tag">Chamada</span> <span class="hx-count">3<span class="hx-visually-hidden"> não lidas</span></span> <span class="hx-version">v4</span></p>
<span class="hx-status"><span class="hx-badge hx-badge-warning"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-triangle-alert"></use></svg>Prazo vencido</span><span class="hx-meta">venceu em 02/10 às 22:56</span></span>Vocabulário
| Papel | Quando |
|---|---|
neutral | não começou ou saiu: Rascunho, Não iniciada, Descartada, Arquivada |
info | andando como previsto: Em execução, Em análise, Confirmada |
warning | fora do plano ou do prazo: Prazo vencido, Atrasada, Replanejando |
danger | parado ou recusado: Travado, Recusada, Em aberto (impedimento) |
success | terminou bem: Concluída, Homologada, Publicada, Resolvido |
Cada produto mantém um mapa estado → papel; a mesma palavra tem sempre o mesmo papel. A "vez" é relativa a quem vê: com você → andamento; com você e atrasada → atenção; com o outro → neutro.
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-badge + -info/-success/-warning/-danger, -lg | selo; 14 px ao lado do título |
.hx-status | selo + metadado abaixo |
.hx-tag | etiqueta |
.hx-count | contador, com texto escondido |
.hx-version | versão |
Origem: cap. 05 §3.1–§3.3 · ADR-0019 · desde a versão 0.1.0