Basic card
This is a basic padded card. Use contentLayout to adjust padding / borders.
Card
Card component for displaying content in a container with padding and a shadow.
Basic
Content layout
Controlled via contentLayout padded (default), borderedHeader, noPadding.
Padded (default)
Standard internal padding.
Bordered header
Adds a border between the header & top padding to the content.
No padding
You control spacing completely.
Header after
Use <Card.HeaderAfter> to append controls on the right side of the header.
Header after
Use <Card.Header.After> for right-aligned controls.
Variants & nesting
isSecondary reduces internal spacing; isParent adds an outer border and subdued background for nested cards; disabled applies a disabled state to the card title.
Secondary
Reduced internal spacing and title style.
Parent
Secondary child
Content
Disabled title
Content