Card

Intro

O Card é um componente de organização de conteúdo que agrupa informações relacionadas em blocos distintos, visualmente delimitados. Ele permite apresentar dados de forma concisa, estruturada e atrativa, facilitando leitura, escaneabilidade e tomada de decisão.

É classificado como:

Componente de Conteúdo
Estrutura modular de composição
Unidade de agrupamento informacional

O Card é altamente versátil e pode ser utilizado para:

Serviços públicos
Notícias
Produtos
Conteúdos institucionais
Resultados de busca
Resumos informativos

Anatomia visual

Estrutura Principal

O componente é composto por três grandes regiões estruturais:

Card Header
Card Body
Card Footer

1 — Container

Elemento raiz do componente.

Responsável por:

Delimitação visual (background)
Borda (opcional)
Radius
Elevação (quando aplicável)
Espaçamento interno

1.1 — Card Header

Espaço reservado para o cabeçalho do card.

Pode conter:

Imagem (proporções 16:9, 4:3, etc.)
Tag / Badge
Ícone
Categoria
Slot Component (estrutura flexível)

Slot Component (1.1)

Área substituível que permite composições diferentes sem alterar a estrutura base.

Exemplos de uso:

Avatar
Logo institucional
Indicador de status
Mídia (imagem ou vídeo)
Placeholder de mídia

Esse slot garante flexibilidade sem comprometer padronização estrutural.

2 — Card Body

Área central do conteúdo.

Pode conter:

Título
Subtítulo
Descrição
Metadados (data, categoria, autor)
Informações resumidas
Elementos textuais ou pequenos blocos estruturados

O Body deve priorizar:

Hierarquia tipográfica clara
Limitação de linhas (truncamento quando necessário)
Espaçamento consistente

3 — Card Footer

Área destinada a ações e interações.

Pode conter:

Buttons
Action icons
Links
Feedbacks
Indicadores de interação
Contadores
CTA principal

O Footer deve manter separação clara do Body, quando necessário, por:

Divisor sutil
Espaçamento maior
Mudança leve de background

Estados

Default
Hover (quando clicável)
Focus (acessibilidade)
Active
Disabled (quando aplicável)

Se o card for totalmente clicável:

Deve possuir estado visual claro
Cursor pointer
Feedback de interação

Características

Comportamento

O Card pode operar em três modos principais:

Informativo (estático)
- Apenas exibição de conteúdo
Clicável (inteiro interativo)
- Atua como link
- Toda área é acionável
Com ações específicas
- Footer com botões ou ícones
- Ações delimitadas

Uso

Quando usar

Agrupar conteúdo resumido
Exibir lista de serviços
Exibir notícias
Exibir produtos
Mostrar resultados de busca
Organizar informações em dashboards

Quando não usar

Para conteúdo extremamente longo
Para estrutura de formulário complexa
Para navegação principal
Para substituir layout estrutural maior

Variações Comuns

Card para distribuição de arquivos (PDF, XLS, CVS e outros)

O Card de Arquivo é utilizado para disponibilização estruturada de documentos para download. Ele organiza metadados essenciais do arquivo e facilita a identificação do formato antes da interação.