Updated: January 27, 2022

Object Card

Intro

The object card gives a preview of an object. It is highly customizable so as to accommodate a wide variety of uses and work best when used in a collection view with clear distinctions between groups. 

Object Card variation examples
Object Card variation examples

Anatomy

Object card anatomy
Object card anatomy

A. Icon Stack (optional)

A set of up to 3 vertically stacked icons can be displayed on the far left. These icons indicate something about the object, such as its unread status.

B. Object Labels

This is the main area for text content. It allows for a title, subtitle (optional), and footnote (optional).

C. Attributes (optional)

If there are attributes, such as a status, they can be displayed on the right of the card. Up to two attributes can be displayed, stacked vertically. The attribute can be in the form of text or icons.

D. Detail Image (optional)

Just like in the object cell, an image representing the object can be included and be set to either thumbnail (square) or avatar (circular) with all the same sizing properties. Since space is limited in the object card, it is recommended to use a 45-pixel image or smaller.

E. Additional Information (optional)

If there is additional information such as a rating for the object or tags, it can be included below the object labels.

Variations

The content within the object card is designed to be flexible so as to accommodate different use cases. The content you choose to include will depend on the needs of your specific user and requirements. The examples on the right show some different ways the the object card can be structured.

Object Card variations: profile icon stack with supplementary tags and 2 statuses, image with supplementary ratings and 1 status, image default with button accessory
Object Card variations: profile icon stack with supplementary tags and 2 statuses, image with supplementary ratings and 1 status, image default with button accessory

Resources

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