Card

OverviewStyleGuidelinesCodeDemos

Style

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

A breakdown of the parts of a card

Theme

All card variants are available on light and dark backgrounds.

Light background

Card on light background

Dark background

Card on dark background

Cards can also set any of the six color palettes, to create an emphasized or contrasting section of the page. Promo cards can only use the Lightest or Darkest color palettes, while standard promo cards can only use the Lighter or Darker color palettes.

Color

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Call to action
A white card with a light gray border is the most common use case in the light theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Call to action
A light gray card with a light gray border can also be used as an alternate option.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Call to action
A black card with a dark gray border is the most common use case in the dark theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Call to action
A dark gray card with a dark gray 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.

Example of a card layout Anatomy of a card layout

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.

Responsive design

Breakpoints

Cards will get thinner or move below each other on smaller screens.

Large screens

Card layout on desktop

Small screens

Card layout on mobile

Spacing

Container padding

Container padding defines how far away content is from the edges of the component. When cards become wider, the container padding increases. When they become thinner, the container padding decreases.

Desktop

Card spacing on desktop

Mobile

Card spacing on mobile

Promo

Promo cards are available in four different configurations: standard, featured, full-width, and narrow.

Configurations

Standard promo

A standard promo has a subtle border, but it uses the Lighter or Darker surface color. It does not have an image slot and the call to action appears either to the left or right of the text.

Standard promo with placeholder text

A featured promo uses the Lightest or Darkest surface color with a subtle border. An image can optionally appear on the left or right side of a promo.

Featured promo with placeholder text and image

Full-width promo

A full-width promo bleeds to the left and right edges of the screen. It does not have a border. Similarly to a featured promo, a full-width promo can use either the Lightest or Darkest surface color, and it can have no image or an image positioned to the left or right of the text.

Full-width promo with placeholder text and image

Narrow promo

A Narrow promo can fit into a section or container smaller than 296 pixels. It moves an image in any type of promo below the body text and call to action. This is also the configuration used on phone viewports for a featured, standard promo, or full-width promo.

Narrow promo versions with featured promo and standard promo

Theme

The standard promo can set the Lighter or Darker color palettes. It can appear on either light or dark backgrounds.

Standard Promo's in light and dark themes

The featured and full-width promos can set the Lightest and Darkest color palettes, and can appear on either light or dark backgrounds.

Featured and full-width Promo's in light and dark themes

Responsive Design

When promos are viewed on phone viewports or added to small containers, they will use the Narrow promo configuration.

Spacing

Except for narrow promos, spacing within the other promo configurations is a little different from Card.

Standard promo with spacing annotations. 48px on all sides and 24px to the left of the CTA.
Standard promo
Featured promo with spacing annotations. 48px on all sides. 32px between the copy and image. 16px after the heading and 24px above the CTA.
Featured promo
Full-width promo with spacing annotations. 32px between the image and body copy.
Full-width promo
Narrow promo with spacing annotations. 32px on all sides and 24px above the CTA.
Narrow promo