Card

The card container bounds all of the card’s content and manages its state. It can flex according to the amount of content inside the card and the space available in the surrounding UI.

The card container is the only required element of a card. However, follow the standard placement of preview images, content areas, and actions.

Cards are available as either filled or outlined. Choose a style that fits best in the page hierarchy. Outlined cards are generally more pronounced while filled cards are subtler.

Filled cards use a light gray background to denote the card’s boundary. They generally work best on primary page backgrounds and in more relaxed page layouts.

Outlined cards have a distinct border and white background. They generally work across various page backgrounds and in denser page layouts.

Card contents can be oriented vertically or horizontally.

For vertical cards, the preview image, content area, and footer all flex to fill the available space. The preview media can be square, 16:9, or 5:4. The default ratio is 5:4.

For horizontal cards, the content area flexes to fill the available space, while the preview image maintains a fixed square ratio.

Optional. An overline provides context that helps users quickly understand the category, promotion, or program before reading the headline. Overlines are shown on every screen size.

Overlines will appear above the headline and can also support a custom SVG. It can incorporate partner logos when relevant.

• Use sentence case
• No ending punctuation
• Max character count: 33

Required. A strong headline leads with user benefit and uses bold, active language. Headlines are shown on every screen size.

• Use sentence case
• No ending punctuation
• Max character count: 22

Required. Body copy should expand on the headline with specific user-focused value. Body copy is shown on every screen size.

• Use sentence case
• Use conversational language
• Max character count: 64 (2 lines)

A strong action uses verbs to make the next step and outcome immediately clear.

• Use sentence case
• No ending punctuation
• Use a [verb] [noun] or [verb] [article] [noun] pattern
• Max character count: 20

Cards can have a preview image to enhance the visual impact of the card. Previews are aligned at the top of vertical cards and can be square, 16:9, or 5:4. The default ratio is 5:4

Preview images in horizontal cards are square and aligned to the leading edge of the card.

The card content area contains the primary details and purpose of the card. This includes a title, subtitle, description, or overline. The content area can also include leading and trailing accessories, like avatars and buttons.

Cards can have a footer that holds buttons and other metadata related to the card content.

Cards are directly interactive or not. The entire card is interactive if no additional buttons are present. Otherwise, only the nested buttons are interactive.

Directly interactive cards use a state layer to indicate hovered, pressed, and focused states.

In uniform grid or carousel layouts, cards have fixed heights and truncate content that exceeds the following limits:

• Body copy truncates at 3 lines (~96 characters)
• Titles truncate at 1 line (~33 characters) 

Translated content often runs longer than the source, so allow for text expansion when adapting cards for other languages.

In masonry or mosaic layouts, cards have flexible heights and wrap titles and body copy to fit all content by default.

Cards on small screens can be standalone and extend the width of the grid. Cards within a carousel include one visible card and a peek of the second card.