Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.
A card collection is a layout of cards on the same plane.
Cards display content composed of different elements whose size or supported actions vary.
Swipe
Pick-up-and-move
Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
Example of a card
A card collection is coplanar, or a layout of cards on the same plane.
Example of a card collection
Example of a card collection
When to use
Use a card layout when displaying content that:
Do.
1. Cards have rounded corners.
2. Cards can have multiple actions.
3. Cards can be dismissible and rearranged.
Don’t.
This is a tile, not a card.
1. Tiles have square corners.
2. Tiles have no more than two actions.
Do.
A quickly scannable list, instead of cards, is an appropriate way to represent homogeneous content that doesn't have many actions.
Don’t.
The use of cards here distracts the user from being able to quickly scan. These list items are also not dismissable, so having them on separate cards is confusing.
Do.
Grid tiles are a clean and lightweight way to present a gallery of images.
Don’t.
Cards are unnecessary in a gallery of images (homogeneous content).
Cards provide context and an entry point to more robust information and views, and their content and quantity can vary greatly. Cards within a card collection can each contain a unique data set, such as a checklist with an action, a note with an action, and a note with a photo.
Don't overload cards with extraneous information or actions.
Use hierarchy within the card to direct users’ attention to the most important information. For example, place primary content at the top of the card, or use typography to emphasize primary content.
Images can reinforce other content in a card. However, their size and placement within the card depends on whether images are the primary content or are being used to supplement other content on the card.
Background images
Text is most legible when placed on a solid color background with a sufficient contrast ratio to the text. Text placed on image backgrounds should preserve text legibility.
This card collection contains cards with varied layouts.
This card collection contains cards with varied content types and layouts.
Typography can emphasize primary content.
This card collection contains cards with varied layouts and content hierarchy.
Cards have a constant width and variable height. The maximum height is limited to the height of the available space on a platform, but it can temporarily expand (for example, to display a comment field).
Cards do not flip over to reveal information on the back.
Card gestures should be consistently implemented within a card collection.
Supported gestures include:
Card collections can be programmatically sorted or filtered by date, file size, alphabetical order, or other parameters.
Card sorting from left to right, top to bottom.
Card collections only scroll vertically.
Card content that exceeds the maximum card height is truncated and does not scroll, but the card can be expanded. Once expanded, the card may exceed the maximum height of the view. In this case, the card will scroll with the card collection.
Card content that exceeds the maximum card height is truncated and does not scroll
Do.
Cards may be expanded to reveal more content, without using scrolling.
Don’t.
On mobile, avoid placing scrollable space within a card, as it could cause two sets of scroll bars to be displayed, if one is already present.
On desktop, card content can expand and scroll internally
When traversing through focus points on a card, all focusable elements are visited before moving to the next card.
For interfaces that depend on focus traversal for navigation (D-pad and keyboard), cards should have either a primary action or open a new view containing primary and supplemental actions.
Action selected during focus traversal
Expanded supporting text made visible, with the focus then placed on a supplemental action
The primary action in a card is typically the card itself.
Supplemental actions can vary from card to card in a collection, depending on the content type and expected outcome; for example, playing a movie versus opening a book. Within cards in a collection, position actions consistently.
Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
Limit supplemental actions to two actions, in addition to an overflow menu.
Card with action area, rich media and supporting text
Card with action areas 1 and 2, optional header, rich media, supporting text, and supplemental actions
Card with action areas 1, 2, 3 and 4, optional header, rich media, and supplemental actions
Card with action areas 1 and 2, optional header, supporting text and supplemental actions
UI controls, like a slider, placed inline with primary content can modify the view of the primary content. For example, a slider to choose a day, stars to rate content, or a segmented button to select a date range.
This card contains UI controls within the action area block
This card contains segmented buttons within the action area block.
This card contains a slider control within the action area block.
This card contains tabs within the action area block.
An overflow menu is typically placed in the upper-right corner of a card, but can be placed in the lower-right corner if doing so improves content layout and legibility.
Take care not to overload an overflow menu with too many actions.
This card contains an overflow menu in the top right.
Inline links within text content are strongly discouraged.
Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
Do.
Use cards as an entry point to more detailed information.
Don’t.
Cards provide context and an entry point to more robust information and views. Don't overload cards with extraneous information or actions. Inline links within text content are strongly discouraged.
Cards can be constructed using blocks of content which include:
These blocks can be organized to promote different types of content. For example, numbers may be emphasized by increasing their typographic scale.
On tablet/desktop, cards should follow the 24dp keyline. See Metrics & Keylines for more information.
Primary title top padding: 24dp
Primary title bottom padding: 16dp
Action button row padding: 8dp
Supporting text top padding: 16dp
Supporting text bottom padding: 24dp
Rich media
16:9 or 1:1 aspect ratio (recommended)
Actions
Padding: 8dp
Primary title/text
Title: 24sp or 14sp
Subtitle: 14sp
Left and right padding: 16dp on mobile
On tablet/desktop, cards should follow the 24dp keyline. See Metrics & Keylines for more information.
Top padding: 16dp or 24dp (when a large primary title is present)
Bottom padding: 16dp (if there are additional actions or supporting text) or 24dp (no actions or supporting text)
Supporting text
Supporting text: 14sp
Left and right padding: 16dp on mobile
On tablet/desktop, cards should follow the 24dp keyline. See Metrics & Keylines for more information.
Top padding: 16dp
Bottom padding: 24dp (16dp if there are additional actions or text below)
Bullet points (but not their text), images, and buttons may extend outside of the 16dp padding.
Card margins on mobile
Padding from edge of screen to card: 8dp
Space between cards: 8dp
Responsive UI
Card gutters and margins may vary on larger screen sizes, as long as they follow Material Design 8dp grid. Card margins and gutters can be 8, 16, 24, or 40dp wide.
Margins and gutters don’t need to be equal. For example, both 40dp margins and 24dp gutters can be used in the same layout.
This animation shows interactions of the following margin and gutter width variations:
Elevation
Card resting elevation: 2dp
Card raised elevation: 8dp
Cards have a default elevation of 2dp.
On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
Card resting elevation of 2dp, and raised elevation of 8dp
On desktop, cards have a resting elevation of 0dp (left), and an elevation of 8dp on hover (right)
(desktop only)
The following examples illustrate some possible combinations of content blocks.
Media area
Supporting text
Avatar, Title, and Subtitle area
Media area
Supporting text
Actions
Avatar, Title, and Subtitle area
Media area
Actions
Media area
Primary text
Supporting text
Actions
Media area
Primary text
Supporting text
Actions
Expanded supporting text
Primary text
Supporting text
Supporting text
Supporting text
Actions
Media area
Actions
Media area
Primary text
Supporting text
Actions
Media area
Primary text
Actions
Media area
Primary text
Supporting text
Actions
Media area
Primary text
Supporting text
Actions
Media area
Primary text
Supporting text
Actions
Media area
Actions
Dividers may be used to separate content areas in cards that require distinct visual separation. Dividers may also indicate seams in places where material may expand.
Content areas that can be expanded should use full-width dividers. Dividers can indicate seams in material where the material will expand when content is expanded.
This example uses a full-bleed divider. Similar to expansion of lists, this card uses a full-width divider to denote expansion.
Content areas that need more distinct visual separation should use dividers.
This example uses a full-bleed divider as a way to visually separate the slider content and list from the action below.
Use inset dividers to separate related content.
This example uses an inset divider to separate related the restaurant information from the booking section.