Card

O Card agrupa informação de um mesmo assunto, como um Pedido ou um rascunho. A hierarquia vem do nível da superfície e da sombra suave do tema, não de borda. Para métricas e tabelas do Admin use Widget; evite um cartão dentro de outro.

import { Card } from "@rastreio-x/ui";

Padrão

Variantes

default usa surface; secondary e tertiary sobem um degrau; transparent tira o fundo e a sombra.

Com rodapé

Card.Footer guarda as ações do bloco, alinhadas à direita; a principal por último.

No Admin

O cartão de próximo passo mostra um único botão e o motivo, em texto visível, de ele ainda estar desabilitado.

Anatomia

• Card.Header: agrupa título e descrição.
• Card.Title e Card.Description: o assunto e uma linha de contexto.
• Card.Content: o corpo.
• Card.Footer: ações do bloco.

Propriedades

Raiz (Card):

Animações

O Card é estático. Se o cartão inteiro for clicável, componha com PressableFeedback ou use ItemCard, que já traz o realce de hover e o foco.

Acessibilidade

• O cartão é um div sem papel; use <section aria-labelledby> quando ele for uma região nomeada.
• Card.Title não é um título semântico por si: dentro de uma página, renderize o texto em um h2 ou h3 quando ele estruturar o documento.
• Ações no rodapé precisam de rótulo de verbo; botões só de ícone, de aria-label.

Boas práticas

• Sem borda decorativa; a separação vem do degrau de superfície e do espaçamento.
• Não adicione sombra própria: o tema já define --surface-shadow.
• Para listas de itens clicáveis, use ItemCard e para dados em tabela, DataGrid dentro de Widget.
• Título curto em Title Case.

Relacionados

• Widget para métricas e tabelas do Admin.
• Button para as ações do rodapé.
• EmptyState para cartões sem conteúdo.