Updated: February 20, 2019
Version 1.60

List Card

Intro

List cards provide additional information to the conversation beyond plain text. A list card can have links, action buttons, graphical text, and more. It has a flexible structure to meet the needs for all kinds of use cases. Inside the card, the user can view and share content, take actions, or navigate to SAP Fiori for the information source.

Size Variations

List cards come in two sizes. Small for the floating panel and large for the full screen desktop view. List cards contain items related to a topic in the conversation. SAP CoPilot should show the most relevant items in a list and rank them by importance when possible. List cards should have no more than six items shown upfront. If there are more than six items to list, you can add a “See More” footer toolbar.

Usage

  • List items should be relevant to the topic. For example, a list of flights should contain list items with flight options for the user’s desired destination.
  • Labels should be consistent with list items. For example, if all titles refer to contact names, the lists must contain names.
  • If one list item does not have an image (and the rest do), we recommend using a blank container with one of the Fiori accent colors.
  • Do not overwhelm the user with too much content. Present only the most relevant information and prioritize it accordingly. For example, the list item at the top could be the most recommended option.


Layout

All list cards must have a header with a title. Subtitle, footnote, and description are optional. Within the list, there can be text, images, and action buttons. The description will go under the title/subtitle/footnote when the container is in panel view. In full screen view, the description will be in the second column.

Present no more than 6 items on a card. If there are more items to be shown, there can be a “See More” footer toolbar. We recommend presenting list cards with fewer than 6 items because we want to show the most recommended items to the user.

Text Guidelines

For all text in cards, make sure the content is direct, contextual, and helps the user understand the content at a glance. In general, we don’t recommend truncating text because it can take away the benefit of showing summary information. Just keep the text concise.

Header

List Header (Mandatory)

Maximum 2 lines. Truncates after it reaches the maximum. Keep list headers short and concise.

List Subhead (Optional)

Maximum 2 lines. Truncates after it reaches the maximum.

Counter (Mandatory)

Indicate how many list items are shown. The number must include the total number of items: the ones shown on the initial screen plus the number of items shown when the “See More” action is used.

 

List Item

Title (Mandatory)

Maximum 2 lines. Truncates after it reaches the maximum.

Subtitle (Optional)

Maximum 2 lines. Truncates after it reaches the maximum.

Footnote (Optional)

Maximum 1 line. Truncates after it reaches the maximum.

Description (Optional)

Maximum 1 line. Truncates after it reaches the maximum.

Status (Optional)

Maximum of 3 statuses stacked with a defined maximum width. Truncates after it reaches the maximum (avoid truncating as much as possible). Use statuses only when it’s necessary to call out attention to important or urgent information. In addition, statuses should be short, concise words that are easy to understand. Statuses have the flexibility of semantic colors and stacking multiple. We recommend placing the most important status at the top using a semantic color (for example, to show items that are overdue) or the primary color (for example, price). Lastly, statuses can also indicate CoPilot recommendations, such as best value/price, and so on.

List Card Text Guidelines
List Card Text Guidelines

Image Guidelines

Images are a great way to add a visual representation of a line item. Images are optional, and should only be used to represent the line item. For example, if the line item is a person, it should have their image or the Fiori accent color image with 2 letter initials. 

For images of people, use the round image container. For everything else, use the square container with 0.25rem rounded corners.

Image containers can include:

  •  1-3 letters of text, which abbreviates the object. For example, a Purchase Order object card should have “PO” in the image container.
  • Icons
  • Images

Images in small list cards are 2rem x 2rem. Images in large list cards are 3rem x 3rem.

Button Guidelines

Buttons are a great way for users to take action on a line item. They’re optional and should not exceed the card’s maximum width. Therefore, it’s best to limit buttons to one word with a call to action.

List Card with Buttons
List Card with Buttons


Variations

List cards are flexible to meet various use case needs. We currently support text, links, images, and buttons.

Examples of variations
Examples of variations

Responsiveness & Adaptiveness

List cards come in 2 sizes: small and large. The small-sized card is always used in panel view. In full-screen view, either the small or large size can be used. Small-sizes cards should be used in full screen view when there is no description present.

Small size card:

When there’s a description, it will go under the title/subtitle/footnote.

Large size card:

When there’s a description, it will be in the 2nd column.

Also, if the user manipulates the browser window in full screen mode, the description will wrap under the footnote when the screen width reaches 25 rem (560px) width. So, the large-size card becomes a small-size card. 

Behavior & Interaction

Default, Hover and Select State

When a user hovers over or clicks on a list item, the card background color changes to light grey (#EEEEEF). The list header behaves in the same way. Selecting a list item will reveal an object detail card.



See More

If there are more items to be shown, there can be a “See More” footer toolbar. It’s recommended to keep the number of items in a list to a minimum to avoid cognitive load. For example, for a flight booking, SAP CoPilot should show the top 3 recommended flights to book (based on previous travel history, price, and so on) rather than showing a list of all 100 flights available.

Clicking on the “See More” footer action reveals all items in a list. Additional options should supplement the decision making process and have less priority compared to the first 3 options shown. When options are carefully prioritized, users should be able to make a decision without having to expand for more details. The goal is to have CoPilot suggest the most highly recommended items in lists so that the user can make the best decision. 

See More Interaction
See More Interaction


Expand and Collapse List Items

By clicking on the expand icon, details on a line item will appear below it. The additional content should be consistent with the line item. Each additional item will have a title and subtitle. The title can wrap up to 2 lines and the subtitle can wrap up to 3 lines.

The benefit of this card is to show more information related to an item if the user needs it, without having to leave SAP CoPilot.

Expand and Collapse Interactive List Card
Expand and Collapse Interactive List Card

Specifications

The following visual design specifications apply to the list card style and spacing.