Object Cell
Intro
Object cell is made up of text, images or icons. They can be configured in many ways to accommodate a wide variety of use cases.

Usage
Do’s
- Use object cell to preview information about an item in a list format.
Don’ts
- Do not use object cell to compare attributes from different list items. Instead, refer to data table.
Structure
An object cell may contain text label(s), image, or icon(s) each with a specific purpose. These content types are structured in the following way and can be reconfigured, added or subtracted:
A. Container
The container holds all content types. The container height depends on the height of the tallest vertical element while the container width is defined by the view.
B. Icon Stack (optional)
The icon stack is a vertically stacked arrangement consisting of labels and/or icon types that are displayed on the far left. The icons or labels are used to indicate aspects of the object such as its unread status or whether it has attachments.
C. Detail Image (optional)
A detail image provides a visual representation of the object within a 40dp frame. The image may have a square or circular frame depending on the type of object that the object cell represents. If the object cell represents a user, use a circular frame. If the object cell represents an object, use a squared frame.
D. Title Area
The title area is used to place the main text content related to the object. The title area is limited to 3 lines of text, (title, subtitle, and footnote) and is the only mandatory content for the object cell.
E. Description (optional)
A description is used to provide supplementary information relating to the object. The description label can wrap up to 3 lines and will truncate after that. This content type is only available in tablet format.
F. Attribute (optional)
An attribute is a vertically stacked arrangement consisting of labels and/or icon types that are displayed towards the right. The icons or labels can be used to indicate a condition of the item such as its priority or status.
G. Actions Area (optional)
An actions area is used to place secondary actions in addition to the primary act of drilling down. Secondary actions include but are not limited to Information disclosure, download, or more menu.

Variations
Different variations of the object cell can be created by reconfiguring different content types. Moving in this modular approach allows it to cover simple as well as complex requirements.
Navigation
As the most basic configuration, this variation’s primary function is to navigate to a specific page. This variation consists only of the container and the title area.

Preview
The most common variation is used to preview information of an object and navigate to view the entirety of the object, usually as an object page. This variation consists of but is not limited to a container, Image, title area, and description (Tablet only).

Contact
The contact variation is similar to the preview variation but provides quick access to various methods of communicating with a contact. This variation consists of but is not limited to a container, image, title area, and actions.

Control
The control variation displays information and controls. This variation consists of a container, text area, and control. The controls that can be used in this variation are radio button and checkbox.

Behavior & Interactions
The following are behaviors found throughout all object cells. These behaviors can be enabled or disabled depending on the app’s needs.
Drill Down
As the most basic interaction model, the object cell uses drill down to navigate to another page.

Swipe
Secondary actions can also be hidden and are activated by either swiping left or right. Different types of actions can be determined by an app’s needs such as delete, mark as favorite, pin or archive.

Mobile & Tablet
The object cell is supported in both mobile and tablet devices. The description is optional and is available only in tablet devices. The width of the title content container and description container is flexible and can be set by the app developer.

Controls
The following are controls that are supported by the object cell.
Radio Button
The radio button is used to single-select an object cell in a list.

Checkboxes
The checkbox is used to multi-select object cell in a list.

Switches
The switch control is used to toggle two mutually exclusive states, On or Off.

Specs
Single-Line Object Cell


Two-Line Object Cell


Three-Line Object Cell


Container
Sample | Element | Alpha Hex |
|
Background Color | #FFFFFF |
Icon Stack
Sample | Element | Alpha Hex |
|
Numeric Label | #6A6D70 |
|
Indicators | #6A6D70 |
Title Area
Sample | Element | Alpha Hex |
|
Title Text | #32363A |
|
Subtitle Text | #32363A |
|
Body Text | #6A6D70 |
Description
Sample | Element | Alpha Hex |
|
Description Text | #6A6D70 |
Attribute
Sample | Element | Alpha Hex |
|
Negative | #BB0000 |
|
Critical | #E9730C |
|
Positive | #107E3E |
|
Neutral | #6A6D70 |
Action Area
Sample | Element | Alpha Hex |
|
Gray | #6A6D70 |
|
Action Controls | #0A6ED1 |