Visão geral

O Card shadcn/ui é um container com sub-componentes para header, título, descrição, conteúdo e footer. Cada sub-componente gerencia seu próprio espaçamento interno.

Estrutura completa

Título do card

Descrição ou subtítulo do card.

Novo

Conteúdo principal do card. Pode incluir texto, gráficos, listas ou qualquer elemento de interface.

Import

import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from "@/components/ui/card"

Como funciona o espaçamento

O Card root agora tem 30px de padding em todos os lados. Quando existe CardFooter, ele expande até as bordas com px-[30px] py-[30px], borda superior e fundo muted/50.

Variações

Exemplos de diferentes composições do Card para casos de uso reais.

Cards de métricas (sem footer)

Resumo da conta

Atualizado há 5 minutos.

R$ 24.800

Saldo disponível

Usuários ativos

Últimas 24 horas.

+12%

1.284

Sessões simultâneas

Card com footer

Plano Pro

Todos os recursos desbloqueados.

Acesse dashboards avançados, exportação de dados e suporte prioritário.

Notificação pendente

Aguardando aprovação.

Uma nova solicitação de acesso está aguardando sua revisão.

ds-card vs Card

O projeto tem dois padrões de card — cada um para um contexto diferente.

ds-card (utility class)

Card de conteúdo simples

Fundo branco, radius 10px, shadow-card, padding 30px em todos os lados. Para blocos de conteúdo dentro de sections do design system.

ds-card

<div className="ds-card !p-[30px]">
  {/* conteúdo */}
</div>

Card (componente shadcn)

Card estruturado

Com sub-componentes header, content e footer.

Para cards com hierarquia clara: título, conteúdo, ações.

Card shadcn

<Card>
  <CardHeader>
    <CardTitle>Título</CardTitle>
    <CardDescription>Descrição</CardDescription>
  </CardHeader>
  <CardContent>
    {/* conteúdo */}
  </CardContent>
</Card>

Props e uso

API dos sub-componentes do Card shadcn.

Sub-componentes

Card

size?: "default" | "sm"

Container raiz com 30px em todos os lados. O footer usa margens negativas para encostar nas bordas.

CardHeader

div

Cabeçalho alinhado ao padding de 30px do card. Grid automático para título/descrição + ação à direita.

CardTitle

div

Título com text-base font-medium.

CardDescription

div

Subtítulo com text-sm text-muted-foreground.

CardAction

div

Slot de ação no canto superior direito do header. Posicionado via grid automático.

CardContent

div

Área principal usando o mesmo respiro lateral de 30px.

CardFooter

div

Rodapé com 30px de padding, borda superior e fundo bg-muted/50.

Acessibilidade

O Card é um container visual sem role semântico específico. Para cards clicáveis, adicione role="article" ou envolva com um elemento interativo.

Para listas de cards, use ul + li como estrutura externa para que leitores de tela possam navegar pelos itens.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter