Card
Importing
Add rh-card to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-card/rh-card.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-card>
<h2 slot="header">Card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
<rh-cta slot="footer"
variant="primary"
href="#">Call to action</rh-cta>
</rh-card>
<style>
rh-card {
& h2 {
font-size: initial;
}
}
</style>
<script type="module">
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
</script>rh-card
Cards are flexible surfaces used to group information in a small layout. They give small previews of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.
Slots
| Slot Name | Summary | 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. |
|
|
Use this slot for anything that you want to be stuck to the base of the card. |
||
image
|
Use this slot for the promo variant of the card. Images & CTA's are most often slotted here. |
|
[default]
|
Any content that is not designated for the header or footer slot, will go to this slot. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
color-palette
|
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 |
|
|
variant
|
variant |
Change the style of the card to be a "Promo" |
|
|
full-width
|
fullWidth |
Change a promo with an image + body + footer to use the |
|
|
Methods
None
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
header
|
The header for the card. Contains the header slot. |
|
|
|
The footer for the card. Contains the footer slot. |
|
container
|
The container for the card. Contains the image, header, body, and footer. |
|
image
|
The image for the promo variant for the card. Contains the image slot. |
|
body
|
The body for the card. Contains the default slot. |
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-card-header-background-on-light |
transparent
|
|
--rh-card-header-background-on-dark |
transparent
|
|
--rh-card-heading-font-weight |
The font weight for headings in the header and body |
var(--rh-font-weight-body-text-medium, 500)
|
--rh-card-heading-font-family |
The font family for headings in the header and body |
var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif)
|
--rh-card-heading-font-size |
The font size for headings in the header and body |
var(--rh-font-size-heading-md, 1.75rem)
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-color-interactive-primary-default
|
|
|
--rh-color-interactive-primary-hover
|
|
|
--rh-color-interactive-primary-focus
|
|
|
--rh-color-interactive-primary-active
|
|
|
--rh-color-interactive-primary-visited-default
|
|
|
--rh-color-interactive-primary-visited-hover
|
|
|
--rh-color-interactive-primary-visited-focus
|
|
|
--rh-color-interactive-primary-visited-active
|
|
|
--rh-border-radius-default
|
Card's default border radius 3px border radius; Example: Card |
|
--rh-font-family-body-text
|
Body text font family |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-border-width-sm
|
1px border width; Example: Secondary CTA or Button |
|
--rh-color-border-subtle
|
Computed from the color context. Intended to be read for theming purposes, rather than set in page css. |
|
--rh-color-text-primary
|
|
|
--rh-color-surface
|
|
|
--rh-font-size-heading-xs
|
h6 heading font size |
|
--rh-color-surface-lightest
|
Primary surface (light theme) |
|
--rh-color-surface-darkest
|
Primary surface (dark theme) |
|
--rh-color-surface-lighter
|
Tertiary surface (light theme) |
|
--rh-color-surface-darker
|
Secondary surface (dark theme) |
|
--rh-font-family-heading
|
Heading font family |
|
--rh-font-size-body-text-xl
|
20px font size |
|
--rh-font-weight-body-text-medium
|
Medium font weight |
|
--rh-line-height-heading
|
Line height for headings |
|
--rh-space-lg
|
16px spacer |
|
--rh-font-size-body-text-md
|
16px font size |
|
--rh-font-size-body-text-2xl
|
24px font size |
|
--rh-font-size-heading-sm
|
h5 heading font size |
|
--rh-space-3xl
|
48px spacer |
|
--rh-space-xl
|
24px spacer |
|
--rh-space-2xl
|
32px spacer |
|
--rh-space-4xl
|
64px spacer |
|
--rh-font-size-body-text-lg
|
18px font size |
|
--rh-font-size-heading-md
|
h4 heading font size |
|
--rh-space-7xl
|
128px spacer |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
