Card

A surface component for grouping related content. Composed of CardHeader, CardContent, and CardFooter slots. Supports a size prop for compact layouts.

Anatomy

Card is a plain <div> with data-slot="card". Its sub-components use the same slot pattern: CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter.

Card Title
Card description goes here.

Card content with any elements.

Sub-components

Each slot is optional. Mix and match to build the card layout your content needs.

With Action
CardAction sits to the right of the header row.

Content area.

Notifications
You have 3 unread messages.
New deployment
User signed up
Payment received

Sizes

The size prop applies to the Card root and cascades to all sub-components via group-data-[size=sm] selectors.

Default

Default Size
Standard padding and spacing.

Content area.

Small

Small Size
Compact padding, smaller text.

Content area.

With Footer

CardFooter renders with a top border and muted background. It follows the last rounded corner of the card.

Confirm Delete
This action cannot be undone.

All associated data will be permanently removed.

Plan Summary
Pro plan · billed monthly
Monthly cost$29/mo
Renews Dec 1, 2026Active

Design Guidelines

Do

  • Group related content. Use cards to visually associate a title, description, and actions that belong together.
  • Use CardFooter for primary actions. The footer's distinct styling separates actions from content at a glance.
  • Use size="sm" in dense UIs. Dashboard grids and sidebars benefit from the reduced padding.

Don't

  • Don't nest cards inside cards. It creates visual confusion about the hierarchy of content.
  • Don't skip the header for labelled sections. A card without a title makes the UI harder to scan.
  • Don't put actions only in CardContent. Use CardFooter so the action area is predictably placed.

Developer Reference

Accessibility

  • Card renders as a plain <div> — no implicit ARIA role. Add role="article" when cards represent list items.
  • CardTitle renders as a <div> — use asChild or wrap in a heading tag when semantic hierarchy matters.
  • The CardFooter muted background is purely decorative and does not require an ARIA landmark.

Usage

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

// Full card
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon"><MoreHorizontal /></Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Content here.</p>
  </CardContent>
  <CardFooter className="justify-end gap-2">
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

// Compact size
<Card size="sm">
  <CardHeader>
    <CardTitle>Small Card</CardTitle>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>