Card

Overview Guidelines Examples
  1. Asset cards
  2. Avatars card
  3. Fast facts card
  4. Icon card
  5. Image card
  6. List cards
  7. Logo cards
  8. Title bar card
  9. Quote cards
  1. Asset cards
  2. Avatars card
  3. Fast facts card
  4. Icon card
  5. Image card
  6. List cards
  7. Logo cards
  8. Title bar card
  9. Quote cards

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

Example

fill-opacity="0.1" stroke-dasharray="4" stroke-width="1" stroke="var(--rh-color-border-interactive)" width="296" height="171"/>

Lorem ipsum dolor sit amet consectetur adipiscing elit. Nullam elifend elit sed est egestast, a solicitudin mauris tincidunt

href="#">Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

Example

viewBox="0 0 296 171" style="border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);">

viewBox="0 0 16 16" style="width: 1.5em; border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);"> Title, Lg

Lorem ipsum dolor sit amet consectetur adipiscing elit

HTML

Copy to Clipboard

CSS

Copy to Clipboard

Title and Link - Top

Example

Title, Lg

Lorem ipsum dolor sit amet consectetur adipiscing elit

viewBox="0 0 296 171" style="border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);">

HTML

Copy to Clipboard

CSS

Copy to Clipboard

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.

Example

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.

subtitle="Job title, Company name"> subtitle="Job title, Company name"> subtitle="Job title, Company name">

HTML

Copy to Clipboard

CSS

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.

Example

fill-opacity="0.1" stroke-dasharray="4" stroke-width="1" stroke="var(--rh-color-border-interactive)" width="80" height="80"/>

  • Title, lg

    Lorem ipsum dolor sit amet

  • Title, lg

    Lorem ipsum dolor sit amet

  • Title, lg

    Lorem ipsum dolor sit amet

Call to action

HTML

Copy to Clipboard

CSS

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.

Example

fill-opacity="0.1" stroke-dasharray="4" stroke-width="1" stroke="var(--rh-color-border-interactive)" width="80" height="80"/>

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

HTML

Copy to Clipboard

CSS

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.

Example

adorable kitten

Heading, sm

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

HTML

Copy to Clipboard

CSS

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.

Flat list

Example

  • List text
  • Linked list text
  • List text two lines Lorem ipsum dolor sit amet, consectetur adipiscing elit nulla vitae elit
Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

List with dividers

Example

  • List text
  • Linked list text
  • List text two lines Lorem ipsum dolor sit amet, consectetur adipiscing elit nulla vitae elit
Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

Ordered list

Example

  1. Ordered list text
  2. Linked ordered list text
  3. Ordered List text two lines Lorem ipsum dolor sit amet, consectetur adipiscing elit nulla vitae elit
Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

Unordered list

Example

  • Unordered list text
  • Linked unordered list text
  • Unordered list text two lines Lorem ipsum dolor sit amet, consectetur adipiscing elit nulla vitae elit
Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

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

Example

viewBox="0 0 613 145" height="32" width="135" role="img"> Red Hat d="M127.47 83.49c12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89 8.69 103.76.5 97.51.5 91.69.5 90 8 83.06 8c-6.68 0-11.64-5.6-17.89-5.6-6 0-9.91 4.09-12.93 12.5 0 0-8.41 23.72-9.49 27.16a6.43 6.43 0 0 0-.22 1.94c0 9.22 36.3 39.45 84.94 39.45M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33C22.27 52 .5 55 .5 74.22c0 31.48 74.59 70.28 133.65 70.28 45.28 0 56.7-20.48 56.7-36.65 0-12.72-11-27.16-30.83-35.78"> fill="currentColor" d="M579.74 92.8c0 11.89 7.15 17.67 20.19 17.67a52.11 52.11 0 0 0 11.89-1.68V95a24.84 24.84 0 0 1-7.68 1.16c-5.37 0-7.36-1.68-7.36-6.73V68.3h15.56V54.1h-15.56v-18l-17 3.68V54.1h-11.29v14.2h11.25Zm-53 .32c0-3.68 3.69-5.47 9.26-5.47a43.12 43.12 0 0 1 10.1 1.26v7.15a21.51 21.51 0 0 1-10.63 2.63c-5.46 0-8.73-2.1-8.73-5.57m5.2 17.56c6 0 10.84-1.26 15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52 0-16.94 2-26 6.1l6.1 12.52c6.52-2.74 12-4.42 16.83-4.42 7 0 10.62 2.73 10.62 8.31v2.73a49.53 49.53 0 0 0-12.62-1.58c-14.31 0-22.93 6-22.93 16.73 0 9.78 7.78 17.24 20.19 17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12h-18.07v28.29h-30.29V36.12h-18.09Zm-68.86-27.9c0-8 6.31-14.1 14.62-14.1A17.22 17.22 0 0 1 397 72.09v19.45A16.36 16.36 0 0 1 385.24 96c-8.2 0-14.62-6.1-14.62-14.09m26.61 27.87h16.83V32.44l-17 3.68v20.93a28.3 28.3 0 0 0-14.2-3.68c-16.19 0-28.92 12.51-28.92 28.5a28.25 28.25 0 0 0 28.4 28.6 25.12 25.12 0 0 0 14.93-4.83ZM320 67c5.36 0 9.88 3.47 11.67 8.83h-23.2C310.15 70.3 314.36 67 320 67m-28.67 15c0 16.2 13.25 28.82 30.28 28.82 9.36 0 16.2-2.53 23.25-8.42l-11.26-10c-2.63 2.74-6.52 4.21-11.14 4.21a14.39 14.39 0 0 1-13.68-8.83h39.65v-4.23c0-17.67-11.88-30.39-28.08-30.39a28.57 28.57 0 0 0-29 28.81M262 51.58c6 0 9.36 3.78 9.36 8.31S268 68.2 262 68.2h-17.89V51.58Zm-36 58.16h18.09V82.92h13.77l13.89 26.82H292l-16.2-29.45a22.27 22.27 0 0 0 13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z"> Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

Text and CTA

Example

viewBox="0 0 613 145" height="32" width="135" role="img"> Red Hat d="M127.47 83.49c12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89 8.69 103.76.5 97.51.5 91.69.5 90 8 83.06 8c-6.68 0-11.64-5.6-17.89-5.6-6 0-9.91 4.09-12.93 12.5 0 0-8.41 23.72-9.49 27.16a6.43 6.43 0 0 0-.22 1.94c0 9.22 36.3 39.45 84.94 39.45M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33C22.27 52 .5 55 .5 74.22c0 31.48 74.59 70.28 133.65 70.28 45.28 0 56.7-20.48 56.7-36.65 0-12.72-11-27.16-30.83-35.78"> fill="currentColor" d="M579.74 92.8c0 11.89 7.15 17.67 20.19 17.67a52.11 52.11 0 0 0 11.89-1.68V95a24.84 24.84 0 0 1-7.68 1.16c-5.37 0-7.36-1.68-7.36-6.73V68.3h15.56V54.1h-15.56v-18l-17 3.68V54.1h-11.29v14.2h11.25Zm-53 .32c0-3.68 3.69-5.47 9.26-5.47a43.12 43.12 0 0 1 10.1 1.26v7.15a21.51 21.51 0 0 1-10.63 2.63c-5.46 0-8.73-2.1-8.73-5.57m5.2 17.56c6 0 10.84-1.26 15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52 0-16.94 2-26 6.1l6.1 12.52c6.52-2.74 12-4.42 16.83-4.42 7 0 10.62 2.73 10.62 8.31v2.73a49.53 49.53 0 0 0-12.62-1.58c-14.31 0-22.93 6-22.93 16.73 0 9.78 7.78 17.24 20.19 17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12h-18.07v28.29h-30.29V36.12h-18.09Zm-68.86-27.9c0-8 6.31-14.1 14.62-14.1A17.22 17.22 0 0 1 397 72.09v19.45A16.36 16.36 0 0 1 385.24 96c-8.2 0-14.62-6.1-14.62-14.09m26.61 27.87h16.83V32.44l-17 3.68v20.93a28.3 28.3 0 0 0-14.2-3.68c-16.19 0-28.92 12.51-28.92 28.5a28.25 28.25 0 0 0 28.4 28.6 25.12 25.12 0 0 0 14.93-4.83ZM320 67c5.36 0 9.88 3.47 11.67 8.83h-23.2C310.15 70.3 314.36 67 320 67m-28.67 15c0 16.2 13.25 28.82 30.28 28.82 9.36 0 16.2-2.53 23.25-8.42l-11.26-10c-2.63 2.74-6.52 4.21-11.14 4.21a14.39 14.39 0 0 1-13.68-8.83h39.65v-4.23c0-17.67-11.88-30.39-28.08-30.39a28.57 28.57 0 0 0-29 28.81M262 51.58c6 0 9.36 3.78 9.36 8.31S268 68.2 262 68.2h-17.89V51.58Zm-36 58.16h18.09V82.92h13.77l13.89 26.82H292l-16.2-29.45a22.27 22.27 0 0 0 13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z">

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

HTML

Copy to Clipboard

CSS

Copy to Clipboard

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.

Example

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

HTML

Copy to Clipboard

CSS

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.

Basic

Example

In open source, we feel strongly that to really do something well, you have to get a lot of people involved.

Linus Torvalds Software Engineer Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

Logo and quote

Example

xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 145" height="32" width="135" role="img"> Red Hat d="M127.47 83.49c12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89 8.69 103.76.5 97.51.5 91.69.5 90 8 83.06 8c-6.68 0-11.64-5.6-17.89-5.6-6 0-9.91 4.09-12.93 12.5 0 0-8.41 23.72-9.49 27.16a6.43 6.43 0 0 0-.22 1.94c0 9.22 36.3 39.45 84.94 39.45M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33C22.27 52 .5 55 .5 74.22c0 31.48 74.59 70.28 133.65 70.28 45.28 0 56.7-20.48 56.7-36.65 0-12.72-11-27.16-30.83-35.78"> fill="currentColor" d="M579.74 92.8c0 11.89 7.15 17.67 20.19 17.67a52.11 52.11 0 0 0 11.89-1.68V95a24.84 24.84 0 0 1-7.68 1.16c-5.37 0-7.36-1.68-7.36-6.73V68.3h15.56V54.1h-15.56v-18l-17 3.68V54.1h-11.29v14.2h11.25Zm-53 .32c0-3.68 3.69-5.47 9.26-5.47a43.12 43.12 0 0 1 10.1 1.26v7.15a21.51 21.51 0 0 1-10.63 2.63c-5.46 0-8.73-2.1-8.73-5.57m5.2 17.56c6 0 10.84-1.26 15.36-4.31v3.37h16.82V74.08c0-13.56-9.14-21-24.39-21-8.52 0-16.94 2-26 6.1l6.1 12.52c6.52-2.74 12-4.42 16.83-4.42 7 0 10.62 2.73 10.62 8.31v2.73a49.53 49.53 0 0 0-12.62-1.58c-14.31 0-22.93 6-22.93 16.73 0 9.78 7.78 17.24 20.19 17.24m-92.44-.94h18.09V80.92h30.29v28.82H506V36.12h-18.07v28.29h-30.29V36.12h-18.09Zm-68.86-27.9c0-8 6.31-14.1 14.62-14.1A17.22 17.22 0 0 1 397 72.09v19.45A16.36 16.36 0 0 1 385.24 96c-8.2 0-14.62-6.1-14.62-14.09m26.61 27.87h16.83V32.44l-17 3.68v20.93a28.3 28.3 0 0 0-14.2-3.68c-16.19 0-28.92 12.51-28.92 28.5a28.25 28.25 0 0 0 28.4 28.6 25.12 25.12 0 0 0 14.93-4.83ZM320 67c5.36 0 9.88 3.47 11.67 8.83h-23.2C310.15 70.3 314.36 67 320 67m-28.67 15c0 16.2 13.25 28.82 30.28 28.82 9.36 0 16.2-2.53 23.25-8.42l-11.26-10c-2.63 2.74-6.52 4.21-11.14 4.21a14.39 14.39 0 0 1-13.68-8.83h39.65v-4.23c0-17.67-11.88-30.39-28.08-30.39a28.57 28.57 0 0 0-29 28.81M262 51.58c6 0 9.36 3.78 9.36 8.31S268 68.2 262 68.2h-17.89V51.58Zm-36 58.16h18.09V82.92h13.77l13.89 26.82H292l-16.2-29.45a22.27 22.27 0 0 0 13.88-20.72c0-13.25-10.41-23.45-26-23.45H226Z">

Inclusivity, open exchange of ideas, and collaboration are the foundations of innovative design and are essential to creating a Red Hat branded experience.

Jessica Cox Senior Director, Design, Brand + Creative Call to action

HTML

Copy to Clipboard

CSS

Copy to Clipboard

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub