Cards

Card components for grouping related content and actions.

Basic Card

Card Title

This is a basic card with header and content.

Cards are used to group related information and actions together. They provide a clear visual boundary for content.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
</Card>

Card with Footer

Complete Card

Card with header, content, and footer sections.

Use the footer section for actions related to the card content. This creates a clear separation between information and actions.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Interactive Cards

Hoverable Card

Hover to see the effect

Add hover effects to make cards feel interactive.

Highlighted Card

With colored border

Use border colors to highlight important cards.

Card Grids

Feature 1

Description for feature 1.

Feature 2

Description for feature 2.

Feature 3

Description for feature 3.

Feature 4

Description for feature 4.

Card Guidelines

Grouping: Use cards to group related content and actions together. Each card should represent a single, cohesive piece of information.

Hierarchy: Use CardHeader for titles and descriptions, CardContent for main content, and CardFooter for actions.

Spacing: Use consistent spacing between cards in grids. The default gap-4 or gap-6 works well.

Interactivity: Add hover effects (hover:shadow-lg) to clickable cards to indicate interactivity.