Updated: June 23, 2022

List Card

Intro

The List Card gives a preview of a set of items or objects in a vertical list format. Similar to the Object Card, the list card is also highly customizable but does have a few best practices guides on list item usage for better organization.

List Card View examples
List Card View examples

Anatomy

List Card anatomy
List Card anatomy

A. Header

The header area of a list card opens to the full list report, which shows the list of all the objects apart of that preview set.

B. List Items

Tapping on the list item on the card opens the object detail page for that specific item. It is also generally recommended to have the same format for all the list items inside of the same list, as well as keeping list items to a maximum of 5 items.

C. Footer

In the footer area, users can quickly access and perform select actions (limited to 2) on the list.

Variations

Like the object card, the content within the list card and its items are designed to be flexible so as to accommodate different use cases. However, the content used for the list item, which are housed in condensed object cells, should be very consise.

List Card variations: Shape buttons, Symbol buttons
List Card variations: Shape buttons, Symbol buttons

Resources

Development: Mobile Cards
Related Pattern: Object Cell
SAP Fiori for Android: N/A