Data Display

Card

Surface that groups related content.

Import

tsx

import { Card } from "@cooud-ui/ui";

bash

npx cooud-ui add card

Examples

Anatomy

A composable container with header, action, content, and footer slots.

Pro plan

Everything you need to ship a polished product.

Popular

$24/ month

tsx

<Card className="max-w-md">
  <CardHeader>
    <CardTitle>Pro plan</CardTitle>
    <CardDescription>Everything you need to ship a polished product.</CardDescription>
    <CardAction>
      <Badge variant="primary">Popular</Badge>
    </CardAction>
  </CardHeader>
  <CardContent className="flex items-baseline gap-1">
    <span className="font-display text-3xl font-semibold text-fg">$24</span>
    <span className="text-sm text-fg-tertiary">/ month</span>
  </CardContent>
  <CardFooter>
    <Button variant="gradient" className="w-full">
      Upgrade now
    </Button>
  </CardFooter>
</Card>