Card

v1.0

Cards display a distinct collection of content and actions in a flexible container.

Considerations

Contained

Each card is a standalone object, even within a card group. The actions and information within one card is distinct from others.

Summarized

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.

Interactive

Cards are implicitly interactive by nature whether they have nested buttons or not. They are never static or decorative.

Anatomy

Properties

Common elements

Behavior

Width

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.

Two vertical cards with specs. The first is small with a label of 200 width. The second is large with a label of 400 width.
Two horizontal cards with specs. The first is small with a label of 300 width. The second is large with a label of 800 width.

Responsiveness

To allow for a more readable experience on smaller screens, an inline card will shift to a stacked layout on screens below 360px wide.

A vertical and horizontal card.

Screen size

Best practices

Specs

A card with specs highlighted. The corner radius of the image is 16px and the corner radius of the card is 24px. The padding around the edge is 12px.
A horizontal card with specs highlighted. The corner radius of the image is 16px and the corner radius of the card is 24px. The padding around the edge is 12px.