Red Hat design system

Style

Cards can be used in light and dark themes. They act as a blank canvas where elements and styles can be placed inside.

Cards are secondary layouts that shouldn’t command too much attention and blend in with whatever background they’re placed on. The card container is the only required element and it consists of a background color and rounded corners. A thin border is required if the card background is the same color as the background it's placed on.

White card colors — A white card with a light gray border is the most common use case in the light theme

Gray card colors — A light gray card without a border can also be used as an alternate option

Black card colors — A black card with a dark gray border is the most common use case in the dark theme

Dark theme gray card colors — A dark gray card without a border can also be used as an alternate option

Layout

A card features header, body, and footer sections. Those sections should include a limited amount of content to ensure that the card doesn’t become too tall.

The header section is required, it introduces what the content is and shouldn’t be hidden.

Body

The body section can include a headline, text, an icon, or sometimes an image. The body section describes the content in more detail and shouldn’t be hidden.

The footer section can include normal links or a call to action. It can be hidden if necessary if there’s content included where a user can take an action.