Ir para o conteúdo principal

Card

Visão Geral

Design System

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

Exemplos

Básico

Carregando exemplo
Copiar código
Resetar exemplo
StackBlitz
Abrir no StackBlitz
Alternar fundo do preview

Propriedades

customId

Atributocustom-id
DescriçãoIdentificador único; gerado automaticamente quando omitido.
Tipostring
Valor padrãoHelpers.generateUniqueId('br-card')

disabled

Atributodisabled
DescriçãoDefine se o card está desabilitado.
Quando true, o card fica com opacidade reduzida e não responde a interações.
Tipoboolean
Valor padrãofalse

hover

Atributohover
DescriçãoDefine se o card tem hover interativo.
Quando true, o card terá efeitos visuais ao passar o mouse.
Tipoboolean
Valor padrãofalse

CSS Shadow Parts

NomeDescrição
"content"
"footer"
"header"
"wrapper"

Slots

NomeDescriçã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.

Dependências

Usado por

Gráfico

Migração: Vue 1.x → Stencil 2.x

Propriedades

🟦 Propriedades renomeadas

Propriedade VuePropriedade StencilDescriçãoTipoPadrão
:disableddisabledAplica estado desabilitado (Vue usava binding, Stencil usa atributo)booleanfalse

🟥 Propriedades removidas

PropriedadeDescriçãoTipoPadrão
h-fixedAltura fixa com scroll (não implementado no Stencil)booleanfalse
v-tooltipConfiguração de tooltip (removido - usar soluções externas)object-

Slots

🟦 Slots renomeados

Slot VueSlot StencilDescrição
#contentslot="content"Sintaxe de slot mudou de template para atributo
#footerslot="footer"Sintaxe de slot mudou de template para atributo
#headerslot="header"Sintaxe de slot mudou de template para atributo