C2 · Componentes

Card

Contêiner que agrupa informação relacionada. Quatro variantes (Surface, Bordered, Elevated, Filled) cobrem todos os contextos de hierarquia.

01

Estrutura padrão

Composição modular: header, content, footer. Cada parte é opcional, mas a ordem é fixa.

Drop · 042

Resumo de 3 ferramentas de IA testadas esta semana.

Ver drop completo →
02

Variantes

VarianteAparênciaUso
SurfaceFundo branco, borda 1px --n-fog.Padrão para listas e grids.
BorderedBorda 2px na cor de acento ou tinta.Destaque sem elevação.
ElevatedSombra --e1 + borda hairline.Cards 'flutuantes' em background claro.
FilledFundo --n-bone ou --accent-wash.Callouts contextuais, agrupamentos secundários.
03

Padding e densidade

DensidadePaddingOnde usar
compact--sp-4 (16px)Cards em grid denso (≥ 4 colunas).
padrão--sp-6 (24px)Maioria dos casos.
editorial--sp-7 (32px)Cards de destaque em hero/landing.
04

Faça e não faça

Faça

  • Mantenha um único nível de hierarquia interna (título + suporte + ação).
  • Combine cards de mesma variante na mesma seção.
  • Use Bordered ou Elevated com moderação — destaque demais = destaque nenhum.

Não faça

  • Não aninhe cards (card dentro de card é uma seção mal escolhida).
  • Não combine 3+ variantes na mesma tela.
  • Não use cores semânticas (success/warning) como fundo de card — isso é Alert (C4).
05

Acessibilidade

Decorações (linha de cor, ícone) não carregam significado semântico exclusivo. Toda informação precisa ter equivalente textual.

  • Card clicável inteiro: marque o link/botão como elemento interativo, não o card.
  • Se o card é uma 'região', use role='region' + aria-labelledby.
  • Bordas decorativas adaptam-se ao tema via tokens — nunca fixe #1A1A1D direto.