Cards

Cards are versatile containers for displaying content in a structured, visually appealing way.

Basic Card

A simple card with content:

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Main content of the card.</p>
  </CardContent>
</Card>

Styling

Default Card:

• Background: White (#FFFFFF) in light mode
• Border: 1px solid border color (#E5E5E5)
• Border radius: 8px
• Box shadow: Subtle (0 1px 2px rgba(0, 0, 0, 0.05))
• Padding: 1.5rem (24px)

Variants

Plain Card

No border or shadow:

<Card variant="plain">
  <CardContent>Simple content without borders</CardContent>
</Card>

Elevated Card

More prominent shadow:

<Card variant="elevated">
  <CardContent>Content with elevated shadow</CardContent>
</Card>

Components

CardHeader

Contains the title and optional description:

<CardHeader>
  <CardTitle>Settings</CardTitle>
  <CardDescription>
    Manage your account settings and preferences
  </CardDescription>
</CardHeader>

CardContent

Main content area of the card:

<CardContent>
  <p>Your content here</p>
</CardContent>

CardFooter

Footer section for actions or metadata:

<CardFooter>
  <Button variant="outline">Cancel</Button>
  <Button variant="primary">Save</Button>
</CardFooter>

Examples

Settings Card

<Card>
  <CardHeader>
    <CardTitle>Profile Settings</CardTitle>
    <CardDescription>
      Update your profile information
    </CardDescription>
  </CardHeader>
  <CardContent>
    <form>
      <Input label="Name" />
      <Input label="Email" />
    </form>
  </CardContent>
  <CardFooter>
    <Button variant="primary">Save Changes</Button>
  </CardFooter>
</Card>

Stats Card

<Card>
  <CardHeader>
    <CardTitle>Total Users</CardTitle>
  </CardHeader>
  <CardContent>
    <div className="text-3xl font-bold">1,234</div>
    <p className="text-sm text-muted-foreground">
      +12% from last month
    </p>
  </CardContent>
</Card>

List Card

<Card>
  <CardHeader>
    <CardTitle>Recent Activity</CardTitle>
  </CardHeader>
  <CardContent>
    <ul className="space-y-2">
      <li>User logged in</li>
      <li>Profile updated</li>
      <li>Password changed</li>
    </ul>
  </CardContent>
</Card>

Layout

Card Grid

Display multiple cards in a responsive grid:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

Stacked Cards

Cards in a vertical stack:

<div className="space-y-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

Interactive Cards

Cards can be clickable:

<Card
  className="cursor-pointer hover:bg-accent"
  onClick={handleClick}
>
  <CardContent>Click me</CardContent>
</Card>

Dark Mode

Cards automatically adapt to dark mode:

• Background: Dark gray (#171717)
• Border: Darker border (#333333)
• Text: Light gray (#F2F2F2)

Accessibility

• Use semantic HTML structure
• Include proper heading levels
• Ensure sufficient color contrast
• Make interactive cards keyboard accessible

Best Practices

1. Keep card content focused and concise
2. Use consistent card sizes in grids
3. Include clear titles and descriptions
4. Group related information together
5. Use appropriate spacing between cards
6. Avoid nesting cards too deeply