Card

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from "@aurelienbbn/gadget-ui/components";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>A brief description of the card content.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your main content goes here.</p>
  </CardContent>
</Card>

<Card>
  {/* Card content */}
</Card>

<CardHeader>
  <CardTitle>Title</CardTitle>
  <CardDescription>Description</CardDescription>
</CardHeader>

<CardTitle>Your Title</CardTitle>

<CardDescription>Additional context or description</CardDescription>

<CardContent>
  {/* Your content */}
</CardContent>

<CardFooter>
  <Button>Action</Button>
</CardFooter>

<Card>
  <CardHeader>
    <CardTitle>Feature Name</CardTitle>
    <CardDescription>
      This feature helps you accomplish important tasks.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p>Detailed information about the feature.</p>
  </CardContent>
  <CardFooter>
    <Button variant="primary">Learn More</Button>
    <Button variant="ghost">Dismiss</Button>
  </CardFooter>
</Card>

<Card>
  <CardContent>
    <p>Just some content without header or footer.</p>
  </CardContent>
</Card>

<Card className="max-w-md">
  <CardHeader className="bg-accent-muted/10">
    <CardTitle className="text-accent">Highlighted</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Content with custom header styling.</p>
  </CardContent>
</Card>