Card

Asset cards

Use to display that an asset can be downloaded. An icon and label group or text may be used to describe the asset.

Avatars card

Use to highlight a group of people who engage in an event. A label should be included, but including text is optional.

Use the <rh-avatar> element to element to present the list of users.

Title, Lg

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.

Copy to Clipboard Copy to Clipboard

Fast facts card

Use to display quick facts or short data points under a label. A Secondary call to action may be used or not.

• Title, lg

  Lorem ipsum dolor sit amet

• Title, lg

  Lorem ipsum dolor sit amet

• Title, lg

  Lorem ipsum dolor sit amet

Call to action Copy to Clipboard Copy to Clipboard

Icon card

Use to add an icon to the basic style above the text. Secondary and Default calls to action may be used.

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel dapibus risus. Call to action Copy to Clipboard

Image card

Use to add an image to the basic style above the text. Secondary and Default calls to action may be used.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Call to action Copy to Clipboard Copy to Clipboard

List cards

Use to display a short amount of content using various list styles. Secondary and Default calls to action may be used.

Logo cards

Use to display a customer logo in a variety of arrangements. A call to action is required, otherwise use a logo wall.

Title bar card

Use to add a small icon and a label group to the header section. A larger icon or a logo may be used.

Alternative title bar styles can be achieved by selecting card's header CSS Shadow Part.

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 Copy to Clipboard

Quote cards

Use to display a short quote with attribution text. Logos, images, and a Secondary call to action may be used or not.

Other libraries

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