Card

The Card component is a flexible container for grouped content — used in dashboards, pricing tables, blog post previews, and product cards.

Import#

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

Basic usage#

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

With image and CTA#

<Card className="overflow-hidden">
  <img src="/product.jpg" alt="" className="aspect-video w-full object-cover" />
  <CardHeader>
    <CardTitle>Product name</CardTitle>
    <CardDescription>$29 / month</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Short product description.</p>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Add to cart</Button>
  </CardFooter>
</Card>

As a link#

<Link href="/blog/post-1">
  <Card className="transition-all hover:border-primary hover:shadow-lg">
    <CardHeader>
      <CardTitle>Read the post</CardTitle>
    </CardHeader>
  </Card>
</Link>

API reference#

All subcomponents are simple <div> wrappers with consistent padding and spacing. They accept standard HTMLAttributes.

Accessibility#

• Use CardTitle with <h3> (or your heading level) for proper document outline
• Card renders as a <div> by default — wrap in a <Link> or <article> when needed for semantics
• All text remains selectable and screen-reader accessible

Common patterns#

Pricing tier#

<Card className="border-primary">
  <CardHeader>
    <Badge>Most popular</Badge>
    <CardTitle>Pro</CardTitle>
    <CardDescription>$29 / month</CardDescription>
  </CardHeader>
  <CardContent>
    <ul>
      <li>Unlimited projects</li>
      <li>Priority support</li>
    </ul>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Subscribe</Button>
  </CardFooter>
</Card>

Stats tile#

<Card>
  <CardHeader className="flex flex-row items-center justify-between">
    <CardDescription>Revenue</CardDescription>
    <DollarSign className="size-4 text-muted-foreground" />
  </CardHeader>
  <CardContent>
    <div className="text-2xl font-bold">$45,231.89</div>
    <p className="text-xs text-success">+20.1% from last month</p>
  </CardContent>
</Card>