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.
<rh-card> element. Consult the <rh-card> element documentation
for more information on how to use the card element.
Customizing cards
Cards act as both themeable containers and also respond to the color theme from their themeable containers.
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:
For more information, please see the docs on theming and
<rh-card> css custom properties.
Color Palettes
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.
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.
