Card

A container that displays content in a self-contained, presentational format.

Overview

The Card component is a versatile container for grouping and displaying content in a clean and consistent format. Cards provide a flexible and extensible content container with multiple variants and options.

Cards are commonly used for presenting information, creating UI dashboards, displaying products, or grouping related content in a visual hierarchy. They can contain text, images, actions, links, and other UI elements.

Basic Usage

A basic card typically includes a header, content, and footer section.

Card Title

Card Description

Card Content

Card Footer

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

export function CardDemo() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
  )
}

Examples

Product Card

Cards are commonly used to display product information in e-commerce applications.

Premium Headphones

High-quality audio device

New

Experience crystal clear sound with our premium noise-cancelling headphones.

$299.99

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { SquareStack } from "lucide-react"

export function ProductCard() {
  return (
    <Card className="max-w-sm overflow-hidden">
      <div className="h-48 bg-muted flex items-center justify-center">
        <SquareStack className="h-12 w-12 text-muted-foreground" />
      </div>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle>Premium Headphones</CardTitle>
            <CardDescription>High-quality audio device</CardDescription>
          </div>
          <Badge>New</Badge>
        </div>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground mb-3">
          Experience crystal clear sound with our premium noise-cancelling headphones.
        </p>
        <p className="font-semibold text-lg">$299.99</p>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" size="sm">Add to Wishlist</Button>
        <Button size="sm">Add to Cart</Button>
      </CardFooter>
    </Card>
  )
}

Dashboard Card

Cards are perfect for creating dashboards with summarized information.

Total Revenue

$45,231.89

+20.1% from last month

Active Users

+2,350

+180.1% from last month

Active Projects

+3 new this month

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { CreditCard, User, LayoutTemplate } from "lucide-react"

export function DashboardCards() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
          <CreditCard className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">$45,231.89</div>
          <p className="text-xs text-muted-foreground">+20.1% from last month</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Active Users</CardTitle>
          <User className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">+2,350</div>
          <p className="text-xs text-muted-foreground">+180.1% from last month</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Active Projects</CardTitle>
          <LayoutTemplate className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">12</div>
          <p className="text-xs text-muted-foreground">+3 new this month</p>
        </CardContent>
      </Card>
    </div>
  )
}

API Reference

The Card component consists of several subcomponents that work together to create flexible content containers.

Component	Props	Description
Card	className?: string children: React.ReactNode	The main container component that provides the card's styling, borders, and background.
CardHeader	className?: string children: React.ReactNode	A container for the card's header content, typically containing the title and description. Has appropriate padding and spacing.
CardTitle	className?: string children: React.ReactNode as?: React.ElementType	The title element of the card. Renders as an h3 by default, but can be changed using the "as" prop.
CardDescription	className?: string children: React.ReactNode	A component for the card's description text. Uses muted styling to create visual hierarchy.
CardContent	className?: string children: React.ReactNode	The main content container for the card. Has appropriate padding.
CardFooter	className?: string children: React.ReactNode	A container for the card's footer, typically containing actions or additional information. Has appropriate padding and spacing.

All card components accept standard HTML attributes in addition to the props listed above.

Usage Guidelines

Follow these guidelines for effective use of the Card component:

Layout and Structure

Do

Keep card content focused on a single topic or functionality
Use consistent card sizing within the same view
Maintain appropriate spacing between cards in a grid
Use appropriate padding within cards for readable content
Follow a consistent order for card elements (header, content, footer)

Don't

Overcrowd cards with too much content
Use inconsistent sizing for cards in the same view
Place cards too close together without adequate spacing
Use different padding or alignment across similar cards
Nest cards within cards unnecessarily

Content Organization

Do

Use clear, descriptive titles for each card
Include relevant imagery or icons when applicable
Group related actions in the card footer
Use visual hierarchy to highlight the most important information
Keep action buttons clear and descriptive

Don't

Use vague or generic titles that don't describe the content
Mix too many different types of content in a single card
Include too many actions in a card footer
Use inconsistent styling across cards in the same view
Create cards without clear purpose or value to the user

Accessibility

Cards should be accessible to all users, including those using screen readers or keyboard navigation.

Semantic Structure

Use proper heading hierarchy within cards. The CardTitle component renders as an h3 by default, which should fit into the page's overall heading structure.

Keyboard Navigation

Ensure all interactive elements within cards (buttons, links) are keyboard accessible and have proper focus states.

Color Contrast

Maintain sufficient color contrast between card backgrounds, borders, and text content to ensure readability for users with low vision.

Actionable Cards

If a card itself is clickable (e.g., linking to a detail view), ensure it has appropriate ARIA attributes and keyboard handling.

Accessibility Tip

When making an entire card clickable, avoid placing other interactive elements like buttons within the card that could create nested interactive elements. Instead, make the card a container with a clear call-to-action button.

Previous: Accordion Component Next: Separator Component