Card

Overview

A card formats content in a small, contained space. It can be used to display a preview of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.

These Card patterns document different design-approved uses of the <rh-card> element. Consult the <rh-card> element documentation for more information on how to use the card element.

Customizing cards

To customize a card the design tokens must be altered. These design tokens are different depending on the context for the card (light or dark theme).

Examples include:

• --rh-color-surface-lightest
• --rh-color-border-subtle-on-light
• --rh-color-text-primary-on-light

For more information, please see the card css custom properties.

Themes

Themes are expressed in terms of color palettes.

• lightest
• lighter
• light
• dark
• darker
• darkest

Context theming

Cards will automatically react to the color-palette context provided by a parent element, like <rh-surface>.

Explicit card theming

Cards can play an active role in theming by declaring a specific color-palette.

Lighter themed card

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

Call to action Copy to Clipboard

Custom theming

When using design tokens to apply custom themes, it is important to ensure that the colors used meet color contrast guidelines.

Other libraries

To learn more about our other libraries, visit the getting started page.