Updated: September 16, 2019

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. 

Structure

A. Icon Stack

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, and footnote. 

C. Attributes

If there are attribute, such as a status, it 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 icon.

D. Detail Image

Just like in the object cell, an image representing the object can be included and be set to either square or 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

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.

Resources