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
Use cards to group small previews of content with optional calls to action.
Cards should contain a header with a heading level tag (h1-h6) and must not
replace primary page content. Cards do not manage focus; interactive elements
inside (links, CTAs) must be keyboard-accessible via Tab and activated with
Enter. Screen readers announce card content in DOM order. The promo variant
should be used for promotional content separate from the main page flow.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
This element is a
color palette
container and supports all color palettes via
the color-palette attribute.
Slots
| Slot Name | Summary | Description |
|---|---|---|
header
|
Card header content |
Must contain a heading level tag (h1-h6) for screen reader navigation. Icons, SVGs, or rh-icon are also valid. Screen readers announce this slot content first in the card. |
Card footer content |
Use for calls to action or links anchored to the card bottom. Screen readers announce footer content last. Interactive elements must be focusable via Tab and activated with Enter. |
|
image
|
Promo variant image content |
Use for images or CTAs in the promo variant. Images should include alt text for screen readers. Decorative images should use alt="" to be hidden from assistive technology. |
[default]
|
Card body content (default slot) |
Receives all content not assigned to named slots. Should
contain descriptive text, headings, or supporting elements.
Screen readers announce this between header and footer. |
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. Accepts 'lightest' | 'lighter' | 'light' | 'dark' |
'darker' | 'darkest'. Promo variants automatically compute palette: featured promos
use the |
|
|
variant
|
variant |
Controls the card's visual variant. Accepts 'promo' or undefined. When set to 'promo', the card renders in a promotional layout with grid-based positioning for image, body, and footer. Defaults to undefined (standard card layout). Avoid mixing promo and standard cards in the same group. |
|
|
full-width
|
fullWidth |
When true, a promo card bleeds to the edges of its container with no border.
Only applies when |
|
|
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 |
Header background in light mode |
transparent
|
--rh-card-header-background-on-dark |
Header background in dark mode |
transparent
|
--rh-card-heading-font-weight |
Header font weight override Promo heading font weight override |
var(--rh-font-weight-body-text-medium, 500)
|
--rh-card-heading-font-family |
Header font family override Promo heading font family override Promo standard font family override |
var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif)
|
--rh-card-heading-font-size |
Header font size override Body heading font size override Promo heading font size override Full-width promo heading size override Promo heading size override at containers >= md Full-width promo heading size override at containers >= md |
var(--rh-font-size-heading-md, 1.75rem)
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-color-interactive-primary-default
|
Link default color |
|
--rh-color-interactive-primary-hover
|
Link hover color |
|
--rh-color-interactive-primary-focus
|
Link focus color |
|
--rh-color-interactive-primary-active
|
Link active color |
|
--rh-color-interactive-primary-visited-default
|
Visited link default color |
|
--rh-color-interactive-primary-visited-hover
|
Visited link hover color |
|
--rh-color-interactive-primary-visited-focus
|
Visited link focus color |
|
--rh-color-interactive-primary-visited-active
|
Visited link active color |
|
--rh-border-radius-default
|
Card border radius 3px border radius; Example: Card |
|
--rh-font-family-body-text
|
Card typeface Body text font family |
|
--rh-line-height-body-text
|
Card line height Line height for body text |
|
--rh-border-width-sm
|
Card border thickness 1px border width; Example: Secondary CTA or Button |
|
--rh-color-border-subtle
|
Card border color |
|
--rh-color-text-primary
|
Card text color |
|
--rh-color-surface
|
Card surface color |
|
--rh-font-size-heading-xs
|
Promo heading font size h6 heading font size |
|
--rh-color-surface-lightest
|
Card surface in light mode Promo surface in light mode Primary surface (light theme) |
|
--rh-color-surface-darkest
|
Card surface in dark mode Promo surface in dark mode Primary surface (dark theme) |
|
--rh-color-surface-lighter
|
Promo standard surface in light mode Tertiary surface (light theme) |
|
--rh-color-surface-darker
|
Promo standard surface in dark mode Secondary surface (dark theme) |
|
--rh-font-family-heading
|
Card heading typeface Header font family Promo heading font family Promo standard font family Heading font family |
|
--rh-font-size-body-text-xl
|
Promo standard text size 20px font size |
|
--rh-font-weight-body-text-medium
|
Header font weight Promo heading font weight Promo standard font weight Medium font weight |
|
--rh-line-height-heading
|
Card heading line height Promo standard heading line height Line height for headings |
|
--rh-space-lg
|
Header content gap Promo paragraph margin-block-end Promo header margin-block-end 16px spacer |
|
--rh-font-size-body-text-md
|
16px font size |
|
--rh-font-size-body-text-2xl
|
Full-width promo heading size 24px font size |
|
--rh-font-size-heading-sm
|
Header font size Body heading font size Promo heading size at containers >= md h5 heading font size |
|
--rh-space-3xl
|
Promo body margin at containers >= md Promo standard inline padding at containers >= md 48px spacer |
|
--rh-space-xl
|
Card margin inline Header margin-block-start Body margin-block-end Footer margin-block-end Body margin block at containers < md Promo footer margin-block-start Promo standard column gap at containers >= md 24px spacer |
|
--rh-space-2xl
|
Body margin-block-start Body margin-block-end Card margin inline at containers >= md Card margin-block-start at containers >= md Card margin-block-end at containers >= md Promo standard inline padding Promo body margin 32px spacer |
|
--rh-space-4xl
|
64px spacer |
|
--rh-font-size-body-text-lg
|
Promo paragraph font size 18px font size |
|
--rh-font-size-heading-md
|
Full-width promo heading size at containers >= 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.
