Card
Container para agrupar conteúdo relacionado. Composto por Header, Content e Footer opcionais.
import {
Card, CardHeader, CardTitle,
CardDescription, CardContent, CardFooter,
} from "@workspace/ui/components/card";
<Card>
<CardHeader>
<CardTitle>Título</CardTitle>
<CardDescription>Descrição</CardDescription>
</CardHeader>
<CardContent>Conteúdo</CardContent>
<CardFooter>Ações</CardFooter>
</Card>Basic Card
Card com header, content e footer.
R$ 491,10
30% de desconto nos produtos
Compact Card
Card compacto para dashboards e métricas.
+12% vs ontem
Product Card
Card de produto do catálogo com duas modalidades de entrega: Entrega Local (estoque da consultora) e Full (envio direto pela marca). Hover troca a imagem.


Alioth
Body Splash 200ml
Leve e refrescante, com fragrância suave e toque hidratante.
R$ 69,90

Mizar
Hidratante Corporal 340ml
Nutre intensamente a pele, proporcionando maciez, toque sedoso e brilho natural.
R$ 189,90
Product Card com Lucro
Usado no PDV da consultora, vendedora e admin. Mostra preço de venda, custo e lucro estimado.

Alioth
Body Splash 200ml
Leve e refrescante, com fragrância suave e toque hidratante.
R$ 69,90

Mizar
Hidratante Corporal 340ml
Nutre intensamente a pele, proporcionando maciez, toque sedoso e brilho natural.
R$ 189,90
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
Card | HTMLDivElement | — | Container principal com borda e sombra |
CardHeader | HTMLDivElement | — | Seção de cabeçalho com título e descrição |
CardTitle | HTMLHeadingElement | — | Título do card (h3) |
CardDescription | HTMLParagraphElement | — | Subtítulo/descrição do card |
CardContent | HTMLDivElement | — | Área de conteúdo principal |
CardFooter | HTMLDivElement | — | Rodapé para ações (botões, links) |