Card
Container with header, body, and footer — including a metric card variant.
Default
Card with details and metrics
// Card básico — usa primitivas do pacote
<Card>
<CardHeader>
<CardTitle>Título</CardTitle>
<CardDescription>Descrição.</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm">Conteúdo principal.</p>
</CardContent>
<CardFooter>
<Button size="sm">Ação</Button>
</CardFooter>
</Card>
// Card de métrica — Card simples + tokens semânticos
<Card className="p-5">
<p className="text-sm text-muted-foreground">Label</p>
<p className="mt-1 font-heading text-2xl font-bold">1.284</p>
<p className="mt-1 text-xs text-success">+12% vs mês anterior</p>
</Card>