Card

Agrupa conteúdo relacionado numa superfície com borda.

Playground

Entrevistas de março

12 fontes · atualizado há 2 dias

Resumo das conversas com clientes que cancelaram no terceiro mês.

Tamanho

Com ação no cabeçalho

Com rodapé

<Card>
  <CardHeader>
    <CardTitle>Entrevistas de março</CardTitle>
    <CardDescription>12 fontes · atualizado há 2 dias</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon-sm" aria-label="Editar"><EditPencil /></Button>
    </CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button size="sm">Abrir</Button>
  </CardFooter>
</Card>

Quando usar

✓Um item de lista com título, descrição e ações
✓Um bloco de configurações ou resumo

Evite quando

Tudo na tela vira card→ espaço e tipografia; card só quando o item precisa se destacar como objeto
Superfície flutuando sobre conteúdo→ GlassCard

Variantes e props

sizepadrão: default

defaultsm

Estados

estático

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: nenhum (div)
Teclado: —

Se o card inteiro for clicável, use um link/botão real dentro, não onClick no div

Código

Partes: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter

import

import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";

Fonte: src/components/ui/card.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: GlassCard, Dialog