Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.
Note: Though similar in appearance, Now cards are a distinct subset of cards with unique behavior and formatting requirements.
A card collection is a coplanar layout of cards.
Use a card layout when displaying content that:
1. Cards have rounded corners.
2. Cards can have multiple actions.
3. Cards can be dismissable and rearranged.
This is a tile, not a card.
1. Tiles have square corners.
2. Tiles have no more than two actions.
A quickly scannable list, instead of cards, is an appropriate way to represent homogeneous content that doesn't have many actions.
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.
Typography
Body type: 14 sp or 16 sp
Headlines: 24 sp or larger
Flat Buttons: Roboto Medium, 14 sp, 10 sp tracking
Card gutters on mobile
Padding from edge of screen to card: 8 dp
Gutters between cards: 8 dp
Content padding
16 dp
Card content type and quantity can vary greatly depending on the content being expressed. Cards provide context and an entry point to more robust information and views; make sure not to overload cards with extraneous information or actions.
Place primary content at the top of the card. Use hierarchy to direct users’ attention to the most important information in the card.
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
Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
UI controls placed inline with primary content can modify the view of primary content, for example, a slider to choose a day, stars to rate content, or a segmented button to select a date range.
Limit supplemental actions to two actions, in addition to an overflow menu.
Overflow menu
An overflow menu (optional) typically is placed in the upper-right corner of cards, but it can be placed in the lower right if the placement improves content layout and legibility.
Take care not to overload an overflow menu with too many actions.
Considerations
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.
The swipe gesture on a per-card basis is supported. Card gesture behavior should be consistently implemented within a card collection.
The pick-up-and-move gesture is possible. However, consider whether it’s important for the user to be able to sort cards within the collection or if the content would be better experienced with programmatic filtering/sorting.
Card collections can be programmatically sorted or filtered by date, file size, alphabetical order, or other parameters. The first item in the collection is positioned at the top left of the collection, and the order proceeds left to right and top to bottom.
Card collections scroll vertically only. Card content that exceeds the maximum card height is truncated and does not scroll.
Cards with truncated content can be expanded, in which case the card height may exceed the maximum of the view. In this case, the card will scroll with the card collection.
For interfaces dependent upon sequential focus traversal for navigation (DPad, keyboard), individual cards should either have only a primary action or open a new view with the primary and supplemental actions available.
