P7 · Padrões

Tile

Card de superfície compacta para grades de itens (lives, drops, membros). Suporta métricas, indicadores de status e comportamento de clique. Hover eleva 2px.

Tipos

Tipo	Comportamento	Uso
Interativo	Hover eleva, borda muda, cursor pointer.	Clique navega para detalhe.
Informativo	Sem hover, sem click.	Apenas exibição (KPI, status).
KPI	Número grande + tendência.	Dashboard A1.

Estados de status

Status	Cor	Indicador
Operational	`--sem-success`	Dot verde + 'Operacional'.
Warning	`--sem-warning`	Dot amarelo + descrição.
Critical	`--sem-danger`	Dot vermelho + descrição.
Offline	`--n-mist`	Dot cinza + 'Sem reporte'.

Anatomia

<a class="tile interactive" href="/lives/042">
  <header>
    <span class="tile-meta">LIVE · 042</span>
    <span class="badge live">
      <span class="dot" aria-hidden="true"></span>Operacional
    </span>
  </header>
  <h4>GPT-5 Demos</h4>
  <p class="tile-stat">1.2k<span> espectadores</span></p>
</a>

Diretrizes

Faça

Tile clicável é uma tag <a> ou <button> inteiro.
Mantenha hierarquia: meta → título → métrica/descrição.
Em grid, gap mínimo --sp-4.

Não faça

Não esconda ação dentro do tile (botão pequeno) — o tile inteiro deve clicar.
Não meça tiles em alturas variáveis na mesma grade — alinhe.
Não use mais de uma cor de status por tile.