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

Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

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
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>