Card

A versatile container component with variants and accent colors.

Import

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui';

Basic Usage

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

Props

Card

Variants

Default

<Card variant="default">
  <CardContent>Default card with subtle shadow</CardContent>
</Card>

Elevated

<Card variant="elevated">
  <CardContent>Elevated card with hover shadow effect</CardContent>
</Card>

Bordered

<Card variant="bordered">
  <CardContent>Card with thicker border</CardContent>
</Card>

With Accent

<Card accent="blue">
  <CardContent>Card with blue left border accent</CardContent>
</Card>

<Card accent="green">
  <CardContent>Card with green left border accent</CardContent>
</Card>

<Card accent="purple">
  <CardContent>Card with purple left border accent</CardContent>
</Card>

Complete Example

<Card variant="elevated">
  <CardHeader>
    <CardTitle>Project Settings</CardTitle>
    <CardDescription>
      Manage your project configuration
    </CardDescription>
  </CardHeader>
  <CardContent>
    <form className="space-y-4">
      <Input label="Project Name" placeholder="My Project" />
      <Textarea label="Description" placeholder="Describe your project" />
    </form>
  </CardContent>
  <CardFooter className="justify-end gap-3">
    <Button outline>Cancel</Button>
    <Button color="blue">Save Changes</Button>
  </CardFooter>
</Card>

Simple Card

For simple content without structure:

<Card className="p-6">
  <p>Simple card with custom padding</p>
</Card>

Dashboard Cards

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card accent="blue">
    <CardHeader>
      <CardTitle>Users</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-3xl font-bold">1,234</p>
    </CardContent>
  </Card>

  <Card accent="green">
    <CardHeader>
      <CardTitle>Revenue</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-3xl font-bold">$12,345</p>
    </CardContent>
  </Card>

  <Card accent="purple">
    <CardHeader>
      <CardTitle>Orders</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-3xl font-bold">567</p>
    </CardContent>
  </Card>
</div>

Subcomponents