Cards group related elements and call attention to them. Cards shouldn’t be used solely for style purposes; they imply interactivity. There should always be something about a card that is clickable.

Card sizes and layouts can vary. They can have multiple interactions to support the types of content they contain. Cards can sit at different layers. Review the Overlays documentation to understand which layers cards should sit at.

Limit the complexity of card designs (fonts, colors, icons) to ensure that they are easily scan-able.

Messages

Tiles

Tiles use a card to unify media, description text, and meta around a single link.

The concept of a tile is similar to that of physical baseball cards, coupons, or event tickets: they are small bursts of vital information pertaining to a single topic or object. Tiles should be concise and lead to deeper information.

When displaying multiple tiles related to the same category, consider whether a grid layout or a list layout will better serve users. A grid may be better for a “leaned-back” browsing experience, where a list may be better for a “lean-forward” experience where users are searching and comparing information. Tiles should not contain independently scrolling content.

Consider what happens in situations where a tile doesn’t contain all of the elements it was designed to have.

MAYBE LATER:

Sometimes it may be useful to have expanding tiles. Take care to think about how expanding tiles will affect other elements on the page. Expandable tiles can contain more content, but their intent should still be the same: to display vital information that leads to something more in-depth. For example, you shouldn’t put an entire article or photo gallery into a tile; the tile should lead you to those things.