Card

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

O componente br-card é um contêiner estruturado e flexível do GovBR-DS, projetado para agrupar informações, mídias e ações correlacionadas em uma superfície visual coesa e destacada.

Para que serve

• Agrupamento de informações modulares: Organiza conteúdos heterogêneos de um mesmo assunto (como resumos de serviços, cartões de notícias, painéis de métricas ou resultados de busca).
• Segmentação visual limpa: Proporciona hierarquia e legibilidade através de bordas, elevações e espaçamentos padronizados pelos tokens do design system.
• Suporte a interação opcional: Pode atuar como elemento estático de leitura ou como contêiner interativo/navegável.

Quando utilizar

• Utilize quando:
  • Desejar exibir blocos independentes de conteúdo em grades (grid) ou listas de cartões.
  • O conteúdo for composto por uma combinação de elementos (imagem/vídeo, cabeçalho, texto explicativo e botões de ação).
• Evite e prefira outro componente quando:
  • Os dados forem puramente tabulares ou comparativos entre múltiplos itens homogêneos (prefira br-table).
  • Houver apenas uma sequência linear simples de textos ou links (prefira br-list).

Estrutura e Slots

O br-card oferece estrutura modular com slots nomeados ou composição livre:

• media: Slot superior para exibição de imagens, ilustrações ou mídia de destaque.
• header: Slot para título, subtítulo ou cabeçalho informativo do card.
• content: Slot principal para o corpo de texto e conteúdo descritivo.
• footer: Slot inferior para botões de ação (br-button), links complementares ou metadados.
• default: Slot livre para renderização direta quando não for necessária a divisão pré-definida em seções.

Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Padrão

Compartilhar URL

Ativar movimento reduzido

Mudar fundo

Abrir no StackBlitz

Mais opções

Tela cheia

Carregando preview…

HTML

Controles do componente

Console: logs, eventos e erros

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Desfazer alteração

Refazer alteração

Comparar alterações

Formatar código

Resetar código para o estado inicial

Escolher formato para copiar

Propriedades

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

disabled

Atributo	disabled
Descrição	Desabilita a interação com o componente.
Tipo	boolean
Valor padrão	false

hover Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	hover
Depreciação	Use interactive.
Descrição	Define se o card tem hover interativo. Quando true, o card terá efeitos visuais ao passar o mouse.
Tipo	boolean
Valor padrão	false

interactive

Atributo	interactive
Descrição	Habilita indicação visual de interatividade. Quando informada, tem precedência sobre hover.
Tipo	boolean
Valor padrão	---

Slots

Nome	Descrição
"content"	Slot para o corpo principal do card ao usar a estrutura de slots.
"default"	Slot para conteúdo livre do card, quando não usar a estrutura de slots nomeados.
"footer"	Slot para o conteúdo do rodapé do card.
"header"	Slot para o conteúdo do cabeçalho do card.
"media"	Slot para conteúdo de mídia exibido antes do cabeçalho.

CSS Shadow Parts

Nome	Descrição
"content"	Área do conteúdo principal.
"footer"	Área do rodapé.
"header"	Área do cabeçalho.
"media"	Área de mídia do card.
"wrapper"	Área principal do card.

Dependências

Usado por

• br-datetime-picker

Gráfico

Migração de <br-card> (1.x → 2.x)

Na 1.x, o card era usado com subcomponentes Vue como br-card-header, br-card-content e br-card-footer. Na 2.x, a estrutura continua sendo composta por slots nomeados.

Composição

API 1.x	API 2.x	Ação na migração
br-card-content	conteúdo padrão	Mova o conteúdo principal para o slot padrão.
br-card-footer	slot="footer"	Mova o rodapé para um elemento filho com esse slot.
br-card-header	slot="header"	Mova o conteúdo para um elemento filho com esse slot.
disabled	disabled	Mantenha, se usado pela versão atual.
h-fixed	—	Remova; ajuste o layout no conteúdo da aplicação.
v-tooltip	—	Remova e use br-tooltip quando precisar de tooltip.

Exemplo

1.x:

<br-card>
  <br-card-header>Título</br-card-header>
  <br-card-content>Conteúdo</br-card-content>
</br-card>

2.x:

<br-card>
  <div slot="header">Título</div>
  <div>Conteúdo</div>
</br-card>