Copiar página como Markdown para IA
Card
Visão Geral
O br-card agrupa conteúdos sobre um mesmo assunto em um bloco destacado, como um serviço, uma notícia ou um resultado de busca.
Organize o conteúdo nos slots media, header, content e footer, ou coloque tudo no slot padrão.
<br-card>
<img slot="media" src="/imagens/servico.jpg" alt="" />
<h3 slot="header">Carteira de Trabalho Digital</h3>
<p slot="content">Consulte seus vínculos de emprego.</p>
<br-button slot="footer" emphasis="secondary">Acessar</br-button>
</br-card>
Use interactive quando o card inteiro for clicável, para dar o retorno visual ao passar o mouse.
Quando usar
- Blocos independentes exibidos em grade ou lista.
- Conteúdo que combina imagem, título, texto e ações.
Quando evitar
- Dados para comparar em linhas e colunas: use
br-table. - Uma lista simples de textos ou links: use
br-list.
Consulte as diretrizes de design do GovBR.
Exemplo(s)
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
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
| 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
Gráfico
Migração de <br-card> (1.x → 2.x)
Os subcomponentes da 1.x viraram slots.
| 1.x | 2.x | O que fazer |
|---|---|---|
br-card-content | slot="content" | Mova o conteúdo principal para um elemento com esse slot. |
br-card-footer | slot="footer" | Mova o rodapé para um elemento com esse slot. |
br-card-header | slot="header" | Mova o conteúdo para um elemento com esse slot. |
disabled | disabled | Mantenha. |
h-fixed | — | Remova e defina a altura no seu layout. |
v-tooltip | br-tooltip | Use o componente de tooltip. |
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>
<h3 slot="header">Título</h3>
<p slot="content">Conteúdo</p>
</br-card>
