Card
Cards agrupam conteúdo relacionado em blocos autônomos com espaçamento consistente e foco visual.
Quando usar
- Destacar um conjunto de informações que precisam ser lidas em grupo.
- Criar vitrines de métricas, planos ou ações prioritárias.
- Organizar entradas curtas (formularios rápidos, filtros) mantendo bordas e padding.
- Servir como base para componentes reutilizáveis apresentando o mesmo layout.
Exemplo básico
Card com informação e ação
Por quê: destaca um bloco de conteúdo com CTA direto e espaçamento equilibrado.
Variantes
Card padrão para blocos gerais
Quando usar: comunique conteúdo recorrente com leitura confortável. Por quê: o espaçamento padrão equilibra texto e respiros visuais.
Card compacto para listas densas
Quando usar: agrupe itens curtos em pouco espaço. Por quê: a variante reduz padding sem comprometer a legibilidade.
Card destaque com foco em conversão
Quando usar: direcionar atenção para ofertas premium ou ações críticas. Por quê: o estilo realçado cria foco imediato para CTAs estratégicos.
Composição (usando com outros)
- Card + Stack — combina múltiplas seções verticais sem perder espaçamento.
- Card + Grid — cria vitrines com cards repetidos para métricas ou planos.
- Card + Component Definition — estabelece um layout reutilizável com dados variáveis.
Grid de cards reutilizáveis
Por quê: reaproveita um layout consistente em diferentes dados sem duplicação.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
variante | enum (card, card-compact, card-feature) | card | Ajusta padding, contraste e hierarquia visual. | Não |
conteúdo interno | blocos DSL | — | Recebe textos, listas, botões, componentes. | Sim |
stack/row internos | layout | — | Controla distribuição de itens dentro do card. | Não |
component wrapper | referência | — | Permite transformar o card em componente reutilizável (component/$). | Não |
Erros comuns (Do/Don’t)
❌ Errado — Card dentro de card
✅ Correto — Stack dentro do card
Por quê: stack mantém espaçamento vertical sem quebrar o padrão visual do card.
❌ Errado — Ações dentro de list
✅ Correto — Lista + ações alinhadas
Por quê: listas aceitam apenas texto; botões e links ficam em blocos de ação dedicados.
Referências cruzadas
Relacionados
Container: delimita largura antes de empilhar cards.Stack: organiza conteúdo vertical dentro do card.Grid: distribui múltiplos cards em layouts responsivos.Component Definition: transforma cards em componentes reutilizáveis.
Composições recomendadas
- Card + Grid → vitrine de métricas ou planos com espaçamento uniforme.
- Card + Row-end → agrupa ações em rodapés consistentes.
- Card + Component List → renderiza cards dinâmicos com dados de coleção.
Card com ações alinhadas
Por quê: mantém CTA principal e opção de saída em posição previsível.