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

Screen size

Best practices

Specs