Updated: February 15, 2019
Latest Version 1.70

Object Card

Intro

Object cards provide additional information to the conversation with content beyond plain text. It has a flexible structure to meet the needs for all kinds of use cases. The card can view and share content, take actions, or navigate to SAP Fiori for the information source.

Size Variations

List cards come in 2 sizes. Small for the floating panel and large for the full-screen desktop view. The object card can remain in small size while viewing in the full screen desktop. However, when it has a description, use the large size.



Usage

  • Each form of content should play a role in summarizing the object.
  • Statuses should be used to highlight progress, indicate importance, and numerical scores. Semantic colors should be used to represent positive, negative, and urgent information.
  • Don’t overwhelm the user with too much content. Present only the most important information, and prioritize it accordingly.
  • As much as possible, avoid truncating text.


Layout

The object card can contain text, images, and action buttons. All object cards will have a title. A subtitle, footnote, description, status, or action button are optional.

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 recommend to not truncate text because it can take away from the benefit of showing summary information. Just keep the text concise.

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 for users 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, overdue) or the primary color (for example, price). Lastly, statuses can also indicate recommendations, such as best value/price and so on.

Object Card Text Guidelines
Object Card Text Guidelines

Image Guidelines

Images are a great way to visually represent an object. Images are optional.

Both large and small size cards will have an image size of 3rem x 3rem.

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

Image containers can include…

  •  2-3 letters of text, which abbreviates the object. For example, Purchase Order object card should have “PO” in the image container.
  • Icons are 1.125rem
  • Images should be center-aligned within the 3rem x 3 rem container
Image Guidelines
Image Guidelines

Button Guidelines

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

Object Card Button Example
Object Card Button Example


Variations

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

Examples of variations
Examples of variations


Responsiveness & Adaptiveness

Object cards come in 2 sizes: small and large. The small size card is always used in panel view. In full screen view, either the small or large size can be used. Small size 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 will become a small size card. 



Behavior & Interaction

When a user hovers over a card or clicks on a card, the card background color changes to light grey (#F0F0F0). Once a user selects a card, there won’t be a navigation change on the screen. The system will either respond with a new message in the conversation thread and provide a new object card below the selected one, or prompt the next steps with text.





Specifications

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

Object Card Spacing
Object Card Spacing