Card
Installation
rh-card
| Slot Name | Description |
|---|---|
header |
If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). An icon, svg, or use of the icon component are also valid in this region. |
Any |
content that is not designated for the header or footer slot, will go to this slot. |
footer |
Use this slot for anything that you want to be stuck to the base of the card. |
| DOM Property | Description | Type | Default |
|---|---|---|---|
colorPalette |
Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values Card always resets its context to |
|
|
None
None
| Part Name | Description |
|---|---|
container |
The container for the card. Contains the header, body, and footer. |
header |
The header for the card. Contains the header slot. |
body |
The body for the card. Contains the default slot. |
footer |
The footer for the card. Contains the footer slot. |
| CSS Property | Description | Default |
|---|---|---|
--rh-card-header-font-size |
Font size for header on card |
1.5rem
|
--rh-card-heading-font-family |
The font family for headings in the header and body |
--rh-font-family-heading
|
--rh-card-heading-font-size |
The font size for headings in the header and body |
--rh-font-size-heading-sm
|
--rh-card-heading-font-weight |
The font weight for headings in the header and body |
--rh-font-weight-body-text-medium
|
None
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
