CARDS

A card is a sheet of material that serves as an entry point to more detailed information. 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 coplanar or layout of cards on the same plane.

Usage :

Cards display content composed of different elements whose size or supported actions vary.ike photos with captions of variable length.

When to use:

Use a card layout when displaying content that:

1. As a collection, comprises multiple data types, such as images, movies, and text.
2. Does not require direct comparison (a user is not directly comparing images or text)
3. Supports content of highly variable length, such as comments.
4. Contains interactive content, such as +1 buttons or comments
5. Would otherwise be in a grid list but needs to display more content to supplement the image

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.

Content hierarchy

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.

Background images

Text is most legible when placed on a solid color background with a sufficient contrast ratio to the text.

Behavior

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

Supported gestures

1. swipe gesture
2. pick-up-and-move gesture

Card collection filtering and sorting

Card collections can be programmatically sorted or filtered by date, file size, alphabetical order, or other parameters.

1. The first item in the collection is positioned at the top left.
2. The order proceeds left to right and top to bottom.

Scrolling

Card collections only scroll vertically.

Card focus

When traversing through focus points on a card, all focusable elements are visited before moving to the next card.

Actions

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;

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

UI controls, like a slider, placed inline with primary content can modify the view of the primary content.

Overflow menu (optional)

Take care not to overload an overflow menu with too many actions. typically placed in the upper-right corner of a card & but can be placed in the lower-right corner.

Additional actions

Inline links within text content are strongly discouraged.

Content blocks

Cards can be constructed using blocks of content which include:

1. An optional header
2. A primary title
3. Rich media
4. Supporting text
5. Actions

On tablet/desktop, cards should follow the 24dp keyline.See Metrics&KeyLines

Content block types

for specs some combinations of content-blocks ClickHere.

Dividers in cards

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.