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. |
image |
Use this slot for the promo variant of the card. Images & CTA's are most often slotted here. |
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 |
|
|
variant |
Change the style of the card to be a "Promo" |
|
|
fullWidth |
Change a promo with an image + body + footer to use the |
|
|
None
None
| Part Name | Description |
|---|---|
container |
The container for the card. Contains the image, header, body, and footer. |
header |
The header for the card. Contains the header slot. |
image |
The image for the promo variant for the card. Contains the image 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-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.
