Card

Container com header, conteúdo e footer — inclui variante de card de métrica.

Default

Card com detalhes e métricas

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
<div className="rounded-lg border border-border bg-card shadow-sm">
  <div className="p-5 pb-3">
    <h3 className="font-heading text-lg font-semibold text-card-foreground">Título</h3>
    <p className="text-sm text-muted-foreground">Descrição.</p>
  </div>
  <div className="px-5 pb-5">
    <p className="text-sm">Conteúdo principal.</p>
  </div>
  <div className="flex items-center border-t border-border px-5 py-3">
    <button className="h-7 rounded-full bg-primary px-4 text-sm font-medium text-primary-foreground">
      Ação
    </button>
  </div>
</div>

// Card de métrica
<div className="rounded-lg border border-border bg-card p-5 shadow-sm">
  <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>
</div>