Skip to content

Card

The content block: a shell around a card.

Installation

Default

The header is a one-line label strip on the shell.

With description

One sentence; long copy makes the shell read as a gray block.

With actions

Header actions take xs / icon-xs buttons and end on the column of the row actions. A flush ItemList: CardContent with overflow-hidden.

No header

Content alone; the shell shows as a 4px rim.

With footer

CardFooter show while the form is dirty; type to show it again.

Stacked

Peer cards sit one group step apart, in a stack or in columns.

Destructive

intent='destructive' marks only the title. The action row stacks below sm, the button full width.

Empty

Empty size='sm' in the content.