Card
Overview
When to use
The card component is used to group content together and to give it a visual structure. It is often used to represent a single item or a collection of items.
The card has three sections: header, body and footer. The header can be used to display a title or a heading and actions as components. The body section is used to display the main content of the card via children. Each section will display a <Divider /> if the previous section is used.
When to consider an alternative
t.b.d.
Component
Default
Background Variants
The Card component supports different background variants. You can use the variant property to set the background to dark, light or grey.
Tiny
The Card component supports a tiny variant. You can use the tiny property to set the card header to a tiny size.
bodyPadding
Properties
Default
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| utilClassNames | String | false | - | |
| children | Node | false | - | |
| cardRef | Shape {
"current": "Any"
} | false | - | |
| variant | Enum "light" │ "dark" │ "grey" │ "error" │ "warning" │ "success" │ "info" | false | light | Exported as Card.Variants.dark etc. |
| header | Node | false | - | |
| footer | Node | false | - | |
| tiny | Bool | false | - | |
| bodyPadding | Enum | false | Card.Spacer.spaceM |