Card

A versatile container that organises content with optional header, footer, hover effects, and shadow.

Playground

Card body content.

Body

Header

Footer

hoverable

shadow

rounded

<Card
  header={<strong>Card Title</strong>}
>
  <p>Card body content.</p>
</Card>

Simple card with body content.

Card body content goes here.

Pass header and footer props to add section slots.

The main content of the card lives here.

Adds a subtle lift animation on hover.

Hover over me!

Render the card as a button for interactive cards. Use with onClick.

Use shadow prop to replace the border with a drop shadow.

Card with shadow.

API

Property	Type	Default	Description
`header`	`ReactNode`	—	Content rendered in the card header area
`footer`	`ReactNode`	—	Content rendered in the card footer area
`hoverable`	`boolean`	false	Add a hover lift/shadow effect
`clickable`	`boolean`	false	Render as a <button> for interactive cards
`shadow`	`boolean`	false	Use a drop shadow instead of a border
`bodyClassName`	`string`	—	Extra className applied to the body section
`className`	`string`	—	Extra className on the root element