Card

Overview Style Guidelines Demos Code
  1. rh-card
  1. rh-card

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-card/rh-card.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-card/rh-card.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-card/rh-card.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-card/rh-card.js": "./elements/rh-card/rh-card.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

rh-card

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