Exibição

Card

Container versátil com variantes, tamanhos e estado interativo para agrupar conteúdo relacionado.

Uso

Use o elemento <y-card> no seu HTML:

html

<y-card>  <y-card-header>    <y-card-title>Resumo do pedido</y-card-title>    <y-card-description>Pedido #1234 — 3 itens</y-card-description>  </y-card-header>  <y-card-content>    <p>Total: R$ 299,90</p>  </y-card-content>  <y-card-footer>    <y-button>Ver detalhes</y-button>  </y-card-footer></y-card>

Exemplos

Padrão

Variantes

Tamanhos

Interativo

Métrica de dashboard

Footer com separador

Propriedades

Propriedade	Tipo	Padrão	Descrição
`variant`	`"default" \| "outline" \| "ghost" \| "elevated" \| "filled"`	`"default"`	Estilo visual do card
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Tamanho (controla padding e radius)
`hoverable`	`boolean`	`false`	Ativa estados hover, active e focus com micro-interações

Importação

Importe todos os componentes ou apenas este:

typescript

// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/card.js';

Acessibilidade

Suporta navegação por teclado
Utiliza atributos ARIA apropriados
focus-visible para indicação de foco