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.