Intro

The list card displays a set of items or objects in a vertical list format. Similar to the object card, the list card is also highly customizable. For increased organization, there are a few best practices on list item usage.

List cards in mobile (left) and tablet (right)
List cards in mobile (left) and tablet (right)

Usage

Do
  • Use the list card if you want to preview information from a set of related items or objects.
Don't
  • Don’t use the list card to highlight an individual item or object. Use the object card instead.

Anatomy

A. Header (optional)

The header area supports 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. It is recommended to have the same format across list items per card and have 5 items maximum. 

C. Footer (optional)

In the footer area, users can access and perform select actions. It is recommended to have 2 actions maximum.

Anatomy of a list card
Anatomy of a list card

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.

List card touch target areas
List card touch target areas

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.

Navigating from list card header to a full list page
Navigating from list card header to a full list page

List Item Navigation

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

Navigating from a list card item to individual object details page
Navigating from a list card item to individual object details page

Variations

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

List card variations: (list item) with tonal button, (list item) with icon buttons, and one list card without optional attributes
List card variations: (list item) with tonal button, (list item) with icon buttons, and one list card without optional attributes

Specifications

Header

List card header
List card header
List card header – specifications
List card header – specifications

List Items

List items
List items
List items – specifications
List items – specifications

Footer

Footer
Footer
Footer – specifications
Footer – specifications

Card

List card
List card
List card – specifications
List card – specifications

Resources

Related Components/Patterns: Object Cell

Development: List Card

SAP Fiori for iOS: List Card