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:
- As a collection, is comprised of multiple heterogeneous data types (for example, the card collection consists of photos, movies, text, images)
- Does not require direct comparison (a user is not directly comparing images or text strings)
- Includes supporting content of highly variable length, such as comments
- Consists of rich content or interaction, such as +1 buttons, sliders, or comments
- Would otherwise be in a list but needs to display more than three lines of text
- Would otherwise be in a grid list but needs to display more text to supplement the image
Card layout guidelines
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