Card

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardStat,
  CardTitle,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Team overview</CardTitle>
        <CardDescription>Summary of your active team members.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>12 members active this week.</p>
      </CardContent>
      <CardFooter>
        <Button variant="outline" size="sm">View all</Button>
      </CardFooter>
    </Card>
  )
}

<Card>
  <CardHeader>
    <CardTitle>Team overview</CardTitle>
    <CardDescription>Summary of your active team members.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>12 members active this week.</p>
  </CardContent>
  <CardFooter>
    <Button variant="outline" size="sm">View all</Button>
  </CardFooter>
</Card>

<Card variant="flat">
  <CardContent>
    Simple content in a flat container.
  </CardContent>
</Card>

<Card variant="hover" onClick={() => navigate("/project/1")}>
  <CardHeader>
    <CardTitle>Project Alpha</CardTitle>
    <CardDescription>Due March 31</CardDescription>
  </CardHeader>
  <CardContent>
    <Progress value={65} />
  </CardContent>
</Card>

<Card>
  <CardStat
    label="Total Revenue"
    value="$48,295"
    trend="positive"
    change={12.5}
    icon={<DollarSignIcon />}
  />
</Card>

<Card>
  <div className="aspect-video w-full overflow-hidden rounded-t-xl">
    <img src="/thumbnail.jpg" alt="Project" className="w-full h-full object-cover" />
  </div>
  <CardHeader>
    <CardTitle>Project name</CardTitle>
  </CardHeader>
  <CardContent>Description here.</CardContent>
</Card>