Card
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
disabled
| Atributo | disabled |
| Descrição | Desabilita a interação com o componente. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam disabled. |
| Tipo | boolean |
| Valor padrão | false |
hover
| Atributo | hover |
| 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 |
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. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
cardClick | Emitido quando o card é clicado. | true |
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
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
:disabled | disabled | Aplica estado desabilitado (Vue usava binding, Stencil usa atributo) | boolean | false |
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
h-fixed | Altura fixa com scroll (não implementado no Stencil) | boolean | false |
v-tooltip | Configuração de tooltip (removido - usar soluções externas) | object | - |
Slots
🟦 Slots renomeados
| Slot Vue | Slot Stencil | Descrição |
|---|---|---|
#content | slot="content" | Sintaxe de slot mudou de template para atributo |
#footer | slot="footer" | Sintaxe de slot mudou de template para atributo |
#header | slot="header" | Sintaxe de slot mudou de template para atributo |