Cards
Cards contain content and actions about a single subject. They should be easy to scan for relevant and actionable information.
Basic Card
A standard card with header, content, and footer sections.
Card Title
Card Description
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.
<Card className="rounded-[24px]">
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardHeader>
</CardHeader>
<CardContent>
<p className="text-sm text-justify">
Cards are surfaces that display content and actions on a single topic.
They should be easy to scan for relevant and actionable information.
</p>
</CardContent>
<CardFooter>
<Button className="rounded-2xl bg-[#4B83FF]">Action</Button>
</CardFooter>
</Card>Interactive Card
Cards with hover effects to indicate interactivity.
Interactive Card
With hover effects
This card has hover animations that make it feel interactive and engaging. Hover over it to see the shadow and transform effects.
<Card className="rounded-[24px] hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
<CardHeader>
<CardTitle>Interactive Card</CardTitle>
<CardDescription>With hover effects</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-justify">
This card has hover animations that make it feel interactive and engaging.
Hover over it to see the shadow and transform effects.
</p>
</CardContent>
<CardFooter>
<Button variant="ghost" className="text-[#4B83FF] hover:text-[#3A6AD9] hover:bg-[#4B83FF]/10 rounded-2xl">
Learn More <ArrowRight className="ml-2 h-4 w-4" />
</Button>
</CardFooter>
</Card>