Card

Displays content and actions on a single topic with optional header, footer, and image.

1. Import

Import the card components from the design system.

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/design-system/components/ui/card"

2. Props

Card component props.

Prop	Type	Default
className	string	--

3. Usages

Common card patterns and configurations.

Card Title

Card description goes here.

Card content goes here.

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/design-system/components/ui/card";
import { Button } from "@/design-system/components/ui/button";

export function Example() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
      <CardFooter>
        <Button>Confirm</Button>
      </CardFooter>
    </Card>
  );
}