Card

Style

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

Theme

All card variants are available on light and dark backgrounds.

Light background

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.

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.

Header

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.

Footer

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

Small screens

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

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.

Featured promo

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.

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.

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.

Theme

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

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

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.

Related elements or patterns

• Avatar
• Link
• Link with icon