Component

Card

Bordered container with padding and optional muted background.

Default

live editor — edit to update preview

<Card>
  <p className="text-sm font-semibold">Card title</p>
  <p className="text-xs text-muted mt-1">Some content inside the card.</p>
</Card>

Padding variants

live editor — edit to update preview

<div className="space-y-4">
  <Card padding="sm"><p className="text-xs text-muted">padding="sm"</p></Card>
  <Card padding="md"><p className="text-xs text-muted">padding="md" (default)</p></Card>
  <Card padding="lg"><p className="text-xs text-muted">padding="lg"</p></Card>
</div>

Muted background

live editor — edit to update preview

<Card muted>
  <p className="text-sm font-semibold">Muted card</p>
  <p className="text-xs text-muted mt-1">Used for secondary or informational content.</p>
</Card>

Props

Prop	Type	Default	Description
padding	"sm" \| "md" \| "lg"	"md"	Inner padding.
muted	boolean	false	Applies a grey background.
className	string	—	Additional classes.
children*	ReactNode	—	Card content.