Capítulo 64 de 108

Card

Core Idea

Container estruturado com header, content e footer para agrupar conteúdo relacionado (formulários, listas, mídia), com espaçamento controlado por uma única CSS variable.

Key Concepts

  • size="default" | "sm": variante compacta com espaçamento reduzido.
  • --card-spacing: CSS variable que controla padding/gap de todas as seções do card; sobrescrevível via classe arbitrária ([--card-spacing:--spacing(6)]).
  • CardAction: posiciona conteúdo (botão, badge) no canto superior direito do CardHeader, ao lado do título.
  • Edge-to-edge content: usar -mx-(--card-spacing) para conteúdo que deve tocar as bordas do card, mantendo o resto alinhado ao inset padrão.

Code Examples

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>
  • O que demonstra: composição canônica do Card com todas as seções.
<CardContent className="-mb-(--card-spacing)">
  <div className="-mx-(--card-spacing) max-h-48 space-y-4 overflow-y-scroll border-t bg-muted/50 px-(--card-spacing) py-4 text-sm leading-relaxed">
    {/* conteúdo edge-to-edge, ex. termos de serviço roláveis */}
  </div>
</CardContent>
  • O que demonstra: padrão para conteúdo que precisa ir de borda a borda dentro do card (ex. lista com scroll, imagem) sem quebrar o inset das outras seções.
<Card className="relative mx-auto w-full max-w-sm pt-0">
  <div className="absolute inset-0 z-30 aspect-video bg-black/35" />
  <img src="..." className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40" />
  <CardHeader>
    <CardAction><Badge variant="secondary">Featured</Badge></CardAction>
    <CardTitle>Design systems meetup</CardTitle>
  </CardHeader>
</Card>
  • O que demonstra: card com imagem de capa (pt-0 remove o padding-top para a imagem colar no topo).

Reference Tables

ComponentePropTypeDefault
Cardsize"default" | "sm""default"
CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooterclassNamestring-

Anti-patterns

  • Hard-codar padding (px-4, p-4) em vez de --card-spacing: quebra a customização centralizada; versões antigas do componente usavam classes fixas e precisaram de migração (ver Changelog na fonte).
  • Usar Card só como wrapper visual sem CardHeader/CardContent: perde a semântica de agrupamento e o espaçamento consistente do sistema.

Key Takeaways

  1. --card-spacing é a fonte única de verdade para todo o espaçamento interno do card — mude nela, não em paddings individuais.
  2. size="sm" ajusta automaticamente --card-spacing para um valor menor.
  3. CardAction é o slot correto para ações no header, não um <div className="ml-auto"> improvisado.
  4. Conteúdo edge-to-edge usa o padrão -mx-(--card-spacing) + px-(--card-spacing) no wrapper interno.

Connects To

  • Skeleton (ch060): padrão comum é SkeletonCard reproduzindo CardHeader/CardContent.
  • Chart (ch067): gráficos são tipicamente embrulhados em Card com CardHeader/CardContent.
  • Item (ch071): para listas de itens simples sem header/footer, Item é mais leve que Card.
AnteriorAvatarPróximoTable