Card

A container for grouping related content with optional header and footer.

Default

Card Title

This is the card content. You can put anything here.

Variants

Outline
Filled
Elevated

Props

PropTypeDefaultDescription
variant"outline" | "filled" | "elevated""outline"The visual style.

CardHeader Props

PropTypeDefaultDescription
childrenReactNodeHeader content.
classNamestringAdditional CSS classes.

Accepts all standard HTML div attributes.

CardBody Props

PropTypeDefaultDescription
childrenReactNodeBody content.
classNamestringAdditional CSS classes.

Accepts all standard HTML div attributes.

CardFooter Props

PropTypeDefaultDescription
childrenReactNodeFooter content.
classNamestringAdditional CSS classes.

Accepts all standard HTML div attributes.