Cards

Cards

A card is a sheet of material that serves as an entry point to more detailed information.

Cards display content composed of different elements whose size or supported actions vary.

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.

Simple Card

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.

Word of the Day

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

Media

Example of a card using an image to reinforce the content.

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

UI Controls

Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.

Here's an example of a media control card.

Live From Space

Mac Miller

Complex Interaction

On desktop, card content can expand.

R
Shrimp and Chorizo PaellaSeptember 14, 2016

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.