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
API Reference
Card
| Name | Default | Type | Description |
|---|---|---|---|
contentLayout | -- | ContentLayout | -- |
isParent | -- | boolean | -- |
isSecondary | -- | boolean | -- |
Card.Header
No component-specific props
Card.Header.Title
| Name | Default | Type | Description |
|---|---|---|---|
disabled | -- | boolean | -- |
Card.Header.After
No component-specific props
Card.Content
No component-specific props
Card.Footer
No component-specific props