Cards

Cards contain content and actions about a single subject.

Types

App card

App cards display content relating to a single topic with supporting avatar and text.

Title card

Title cards display content relating to a single topic.

Image card

Image cards display content relating to a single topic with supporting background images.

Flexible card

Flexible cards display customizable content. The container is the only required element. All other elements are customizable.

Anatomy

Cards are typically made up of a variety of elements which vary based on card type.

1. App card

A. Title text

B. Body text

C. Container

D. Time text

E. Avatar (optional)

F. Avatar supporting text (optional)

2. Title

A. Title text

B. Body text

C. Container

D. Time text

3. Image card

B. Title text

C. Body text

G. Container with image background

4. Flexible card

A. Container

Usage

See the following examples of cards use cases.