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.

Sample pattern

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.

Call to action

Sample - Slotted Title

Headline, sm

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 milacinia quis. Vivamus at felis sem.

Call to action

Sample - alternative color scheme

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.

Call to action

Sample - title bar

Headline, sm

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.

Call to action

Title bar

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.

Footer

Image title bar

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.

Footer

Style

A card can be used in light and dark themes.

Theme

Light Theme

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.

Footer

Dark Theme

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.

Footer

Custom Theming

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.

Custom Light Theme

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.

Footer

Custom Dark Theme

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.

Footer

Usage

Character count

The recommended maximum character count for the elements of a card are listed below and include spaces.

Element	Character count
Title	20
Headline	50
Body text	165
Footer	55

Other libraries

To learn more about our other libraries, visit this page.