Card

Accented cards

Use to highlight a single card or set of cards in a group or row.

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.

Text and CTA

Title and Link

Title and Link - Top

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.

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.

Icon card

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

Image card

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

List cards

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

Flat list

List with dividers

Ordered list

Unordered list

Logo cards

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

CTA only

Text and CTA

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.

Quote cards

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

Basic

Logo and quote

Other libraries

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