Card

On narrow screens the header wraps, so actions drop below a long title or subtitle instead of squeezing it.

The title is an h3 by default. Set headingLevel (2 to 6) so it follows the heading above the card without skipping a level, for example headingLevel={2} under the page's h1.

Gru's lair

Under a suburban house

Secure, 3 of 3 freeze rays charged.

Props

titleReactNode
Header title.
headingLevel2 | 3 | 4 | 5 | 6
Default: 3
Level of the title's heading (h2 to h6), so it follows the heading above the card without skipping a level.
subtitleReactNode
Text under the title.
actionsReactNode
Header actions.
footerReactNode
Footer content.
paddedboolean
Default: true
Pad the body; false for edge-to-edge content.
classNamestring
Default: ''
Extra classes for the root element.
childrenReactNode
Content.

Card props
Prop	Type	Default	Description
`title`	ReactNode	–	Header title.
`headingLevel`	2 \| 3 \| 4 \| 5 \| 6	`3`	Level of the title's heading (h2 to h6), so it follows the heading above the card without skipping a level.
`subtitle`	ReactNode	–	Text under the title.
`actions`	ReactNode	–	Header actions.
`footer`	ReactNode	–	Footer content.
`padded`	boolean	`true`	Pad the body; false for edge-to-edge content.
`className`	string	`''`	Extra classes for the root element.
`children`	ReactNode	–	Content.