Card

OverviewStyleGuidelinesCodeDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.0/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-card/rh-card.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/rh-card/rh-card.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.11/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.0/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-card/rh-card.js';
</script>
Copy to Clipboard Wrap lines

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" priority="primary">
    <a href="#">Call to action</a>
  </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>
Copy to Clipboard Wrap lines

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 4
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.
Attributes 3
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

Card always resets its context to base, unless explicitly provided with a color-palette.

 
ColorPalette | undefined
 
unknown
variant variant

Change the style of the card to be a "Promo"

 
'promo' | undefined
 
unknown
full-width fullWidth

Change a promo with an image + body + footer to use the full-width style

 
boolean
 
false
Methods 0
None
Events 0
None
CSS Shadow Parts 5
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 Custom Properties 4
CSS Property Description Default
--rh-card-border-color

Computed from the colour context. Intended to be read for theming purposes, rather than set in page css.

 var(--rh-border-color-subtle-on-light)
--rh-card-heading-font-family

The font family for headings in the header and body

 var(--rh-font-family-heading)
--rh-card-heading-font-size

The font size for headings in the header and body

 var(--rh-font-size-heading-sm)
--rh-card-heading-font-weight

The font weight for headings in the header and body

 var(--rh-font-weight-body-text-medium)
Design Tokens 37
Token Copy
--rh-border-width-lg
--rh-border-width-sm
--rh-color-border-subtle
--rh-color-interactive-primary-active
--rh-color-interactive-primary-default
--rh-color-interactive-primary-focus
--rh-color-interactive-primary-hover
--rh-color-interactive-primary-visited-active
--rh-color-interactive-primary-visited-default
--rh-color-interactive-primary-visited-focus
--rh-color-interactive-primary-visited-hover
--rh-color-surface
--rh-color-surface-dark
--rh-color-surface-darker
--rh-color-surface-darkest
--rh-color-surface-light
--rh-color-surface-lighter
--rh-color-surface-lightest
--rh-color-text-primary
--rh-font-family-body-text
--rh-font-family-heading
--rh-font-size-body-text-2xl
--rh-font-size-body-text-lg
--rh-font-size-body-text-md
--rh-font-size-body-text-xl
--rh-font-size-heading-md
--rh-font-size-heading-sm
--rh-font-size-heading-xs
--rh-font-weight-body-text-medium
--rh-line-height-body-text
--rh-line-height-heading
--rh-space-2xl
--rh-space-3xl
--rh-space-4xl
--rh-space-7xl
--rh-space-lg
--rh-space-xl
Edit this page on GitHub