components
tile
Container retangular pra agrupar conteúdo relacionado. Variantes clicável (navega) e selecionável (seleção múltipla).
overview
tile padrão
card simples com fundo layer-01.
clicável
hover muda borda e mostra barra verde.
selecionado
borda verde + fundo selected.
variantes
Default
título
tile estático sem interação.
Clickable
Selected
opção escolhida
usado em seleção visual de cards.
Bordered
com borda
destaca o tile do fundo.
estados
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .tile | class | — | tile base |
| .tile--clickable | class | — | hover + cursor pointer |
| .tile--selected | class | — | estado escolhido |
| .tile--bordered | class | — | borda visível por padrão |
quando usar
use
não use
acessibilidade
- Tile clicável usa <a> ou <button> (não div com onClick)
- Foco visível
- Conteúdo semântico interno (h4, p, etc.)
- Estado selected anunciado (aria-pressed ou aria-current)
código
<!-- default -->
<div class="tile">
<h4>título</h4>
<p>descrição</p>
</div>
<!-- clickable -->
<a class="tile tile--clickable" href="/page">
<h4>navega pra página</h4>
</a>