Card

Groups related content and actions in a contained surface. Ideal for dashboards, lists, and summaries.

Card Title

Card Description

Card Content

Code

Installation

npx shadcn@latest add card

Basic Example

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    Card Content
  </CardContent>
</Card>

With Footer

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    Card Content
  </CardContent>
  <CardFooter>
    Card Footer
  </CardFooter>
</Card>

Reference

Props

Prop	Type	Default	Description
variant	string	"default"	Visual style variant. Options: default, secondary, image
...props	HTMLAttributes	—	All standard HTML attributes

Variants

Default

Default variant

Card content

Secondary

Secondary variant

Card content

Image Variant

Mountain View

Beautiful landscape

Card content goes here

Usage Guidelines

When to Use

Use cards to group related content and actions. They work well for product listings, user profiles, dashboards, and content previews. Cards help organize information into digestible sections.

Choose the image variant when you need a prominent visual element. Use secondary variant to create visual hierarchy or distinguish groups of cards.

Best Practices

Keep card content focused and concise
Use consistent spacing and structure across cards
Include clear headings and descriptions
Make cards interactive when appropriate (hover states, clickable)
Use CardFooter for actions or metadata

Accessibility

Cards should have clear headings and semantic structure. Use CardTitle for main headings and CardDescription for supporting text. Ensure sufficient color contrast for text readability.

When cards are interactive, ensure they are keyboard accessible and provide clear focus indicators. Include appropriate ARIA labels for card actions.

Rhetoric-ds