Card

Container with header, body, and footer — including a metric card variant.

Default

Card with details and metrics

Detalhes do Imóvel

Informações gerais da unidade.

Tipo

Residencial

Endereço

Rua das Flores, 123

Unidades

Ocupação

95.8%

Imóveis Ativos

1.284

+12% vs mês anterior

Taxa de Ocupação

94.2%

+2.1% vs mês anterior

Receita Mensal

R$ 1.2M

+8.3% vs mês anterior

// 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>