Use the list card if you want to preview information from a set of related items or objects.

Don’t use the list card to highlight an individual item or object. Use the object card instead.

A. Header (Optional)

The header area supports a photo thumbnail or icon, and an overflow button for additional actions. A title is required when a header is used.

B. List Items

Similar to shortened object cells, list items can display a name, a subtitle, and a footnote, in addition to a photo thumbnail and inline actions. We recommend using the same format across list items per card and a maximum of five items. 

C. Footer (Optional)

In the footer area, users can access and perform select actions. We recommend a maximum of two actions.

Behavior and Interaction

Touch Targets

The touch target areas on the list card enable users to perform a variety of interactions across the header, the list items, and the footer.

Header Navigation

When a user taps on the header area of the list card, a page that shows the complete list of objects or items is opened.

List Item Navigation

Tapping a list item on the card opens to that specific item’s object details page.

The list card is designed to be flexible for accommodating different use cases. While flexible, we recommend keeping attributes consistent and concise among the card’s list item set.

• To keep the card content scannable, use concise text and include only high-priority information
• Each object card is about one object. Content in one card is independent of other cards
• Surface no more than two direct actions in the object card. Use the overflow button to access more actions

• Don’t include very long information in the object card. Users can always drill down to view the full details
• Don’t use cards if objects are homogeneous and can be more efficiently displayed in regular object cells

A. Image (Optional)

Like in the object cell, a detail image provides a visual representation of the object within a 40dp frame. The image may have a square or circular frame depending on the type of object that the object cell represents. If the object cell represents a user, use a circular frame. If the object cell represents an object, use a squared frame.

B. Title Area

The title area is used to place the main text content related to the object. The title area contains a title (required), a subtitle (optional), a footnote (optional), and attributes (optional) like statuses.

C. Overflow Button

The overflow button allows users to access additional actions on the card and/or the represented object via a menu.

D. Description (Optional)

The description is typically a long string of text than what is displayed in the header area to provide additional information.

E. Actions (Optional)

Object cards allow up to two buttons at the bottom of the card so the user can perform the actions without drilling down to object details. Only surface the most relevant or frequently used actions. Use the overflow button for additional or general actions.

Behavior and Interaction

Touch Targets

By default, the card area is one touch target. Within the card area, there could be two additional touch areas: the overflow button, and up to two action buttons.

Overflow Button

When the user taps on the overflow button, a menu<link to Menu> will pop up listing available actions the user can take. The options in the menu depend on the object type or user role.

Action Buttons

When the user taps an action button at the bottom of the object card, said action will be performed directly, or a specific workflow will be triggered based on the app’s configuration.

 

Card Area

By default, tapping on the card area (outside the overflow button and action buttons) will navigate the user to the object’s detail page, where they can view additional information about the object.

Card Carousel

A group of object cards can be displayed in one row like a collection view. Users can scroll horizontally to view more cards or tap the “See All” button to view all cards in this group.

The content within the object card is designed to be flexible to support different use cases. Choose the most relevant content based on context and keep a consistent information hierarchy. Focus on information that could help the user take the immediate next step.

The examples below show some different object card contents.

Like chart cards, the object cards on mobile follow a single column vertically stacked layout. The tablet displays a two or three-column grid layout.

The card carousel follows the same number of columns as the grid with adjusted card width, so an additional card is visible and cut off at the end. The slice of a card at the end indicates horizontal scrolling.