Card
v1.0
Cards display a distinct collection of content and actions in a flexible container.
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.
Required. A strong headline leads with user benefit and uses bold, active language. Headlines are shown on every screen size.
Required. Body copy should expand on the headline with specific user-focused value. Body copy is shown on every screen size.
A strong action uses verbs to make the next step and outcome immediately clear.
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:
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.
Vertical cards have a minimum width of 200px and a maximum width of 400px.
Horizontal cards have a min width of 300px and max with of 800px.
To allow for a more readable experience on smaller screens, an inline card will shift to a stacked layout on screens below 360px wide.
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.
Cards fill their container up to their maximum width. Cards in a grid will expand in width between their minimum and maximum width, wrapping to a new row as space allows.
Do keep card heights and styles consistent when grouped in a carousel or grid.
Don’t mix card styles when grouped in a carousel or grid.
Do use cards to display grouped content about a specific subject or theme.
Don’t force content into cards when a simple list or whitespace and typography would create better hierarchy.
Do use “borderSubtle” when using the outlined card.
Don’t change the border color when using the outlined card.
Each card is a standalone object, even within a card group. The actions and information within one card is distinct from others.
A card focuses on high-level details to inform users of the card’s purpose and aid in deciding whether to interact with more content.
Cards are implicitly interactive by nature whether they have nested buttons or not. They are never static or decorative.
