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.
