Card

A flexible card component perfect for grouping and displaying content in a contained, organized manner.

Layout

Variants

Card Title

Card content goes here

Default

Props:

variant="default"

Card Title

Card content goes here

Elevated

Props:

variant="elevated"

Card Title

Card content goes here

Outlined

Props:

variant="outlined"

Card Title

Card content

With Image

Props:

variant="default"hasImage="true"

Title

Content

Compact

Props:

variant="default"compact="true"

Hoverable Card

Hover me

With Hover

Props:

variant="default"hoverable="true"

Props / API

Prop	Type	Default	Description
`variant`	`string`	`default`	Card style: default, elevated, outlined
`padding`	`string`	`md`	Padding size: sm, md, lg
`hoverable`	`boolean`	`false`	Add hover effects
`compact`	`boolean`	`false`	Use compact padding
`className`	`string`	`-`	Additional CSS classes

Usage

<!-- Basic Card -->
<Card>
  <h3>Card Title</h3>
  <p>Card content</p>
</Card>

<!-- Elevated Card -->
<Card variant="elevated">
  <h3>Important Card</h3>
</Card>

<!-- With Image -->
<Card>
  <img src="image.jpg" />
  <div class="p-6">
    <h3>Title</h3>
  </div>
</Card>