Updated: November 24, 2020

Object Cell

Intro

The object cell is a table view cell that fits inside the table view container. It is highly customizable so as to accommodate a wide variety of uses.

Usage

Object Cell is intended to be used to preview information about an object and can be tapped to navigate to a full view of that object’s information, usually displayed as an object page. It does not always need to be used in this way, however, and can be customized to be used for object detail lists that can be found in object details pages.

Do

Keep consistent height and alignment of all object cells in a Table View or List Report.

Don't

Do not mix object cells with different height and content types in a Table View or List Report.

Structure

A. Editing Control (In Edit Mode)

An editing control appears only when in edit mode. When this mode is triggered, the content shifts to the right, and the control appears on the left. Any navigational indicator, such as the chevron or information disclosure icon, disappears while in edit mode.

B. Detail Image

An image representing the object can be set. The image can be square or circular and has a minimum size of 28 pixels and a maximum of 60 pixels. When using the detail image to display an individual’s profile image, it must be set as circular at 45 pixels.

C. Attributes

If an object has an attribute, such as a status, associated with it, it can be displayed on the right, in front of the accessory view. Up to two attributes can be displayed, stacked vertically. The attribute can be in the form of text or icon.

D. 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 or that it has attachments.

E. Main Content

The main content is the main area for text content. It allows for a title, subtitle, and footnote. The title is the only mandatory content for the object cell.

F. Description

If a description has been defined, it will appear in regular mode only. This is typically a longer string of text than what is displayed in the title content area.

G. Accessory View

The accessory view is usually a navigational icon, such as a chevron, which would trigger a push navigation, or an information disclosure icon, which would bring up a model. It can also be used for a single action, such as download.

Variations

Preview

The preview object cell variation is the most common variation. It is used to display a preview of an object. A chevron icon is used in the accessory view on the right to indicate a drill down to the complete content, usually shown as an object page.

Quick View

The quick view object cell variation is used to display a simple object that doesn’t need a full object page. Instead, an information disclosure icon is used on the right, which brings up a modal when tapped. In the modal, some more information for the object can be viewed and a few simple actions can be performed.

Single Action

The single action object cell variation is used to display an object that has a specific action associated with it, such as downloading a document or adding an item to your cart. An icon or button is used on the right, indicating what the action is. The button can also be set to act as a toggle like in the example ‘follow/unfollow.’

Text Display

The text display object cell variation is used to display complete information where the cell expands in place. This variation should only be used when the object does not require any further drill down. The collapsed state is the default view and the expanded state is triggered by tapping the ‘more’ text button. Tapping the ‘less’ text button will return the cell to the collapsed state.

Behavior & Interaction

Select (Edit Mode)

When Edit Mode is triggered, users can select single or multiple object cells at once to perform an action such as delete, change status, and so on.

Quick Actions

Quick actions are activated by a gesture such as swipe to delete.

Peek & Pop

Users can activate a Peek & Pop preview of an object by holding a long press on the object cell.

Navigation

The preview and quick view variations both include a navigational aspect. The preview uses a chevron icon to indicate a push to the full content of the object, while the quick view uses an information disclosure icon to indicate that a modal will pop up with the full content of the object.

Adaptivity

Compact & Regular Width

The object cell is supported in both regular and compact width layouts. An optional description is available to be displayed in regular width. The width of the title content container and description container is flexible and can be set by the app developer.

Compact & Regular Height

The object cell also supports layouts with compacts height, allowing more objects to be exposed in smaller screens.

Specifications

Adaptive Design

Compact Width

Compact Width layout has a 16pt layout margin generally.

Using Icon Stack makes the left layout margin reduce to 10pt, adding 8pt spacing after the stack.

The detail image has a 12pt right margin.

Main Content has an 8pt right margin when either Attributes or Accessory View is available. Similarly, the Attribute area also has an 8pt right margin when Accessory View is available.

In a Quick View variant, the info icon stays in the center of a 44pt touch area. The icon aligns to the right with the icon adhering to the right layout margin. Any items on the left side of the icon stay further out outside the touch area.

Regular Width

Regular Width layout has a 20pt layout margin generally. (e.g. iPad split-screen, page sheet, etc.) When using the component in the iPad device full screen, a full-width variant with a 48pt layout margin is used.

Using the icon stack in the stand regular width layout makes the left layout margin reduce to 14pt, adding an 8pt margin after the stack.

The detail image has a 12pt right margin.

Main Content has an 8pt right margin when either Attributes or Accessory View is available. Similarly, Attributes also has an 8pt right margin when Accessory View is available.

In a Quick View variant, the info icon stays at the center of a 44pt touch area. The icon aligns to the right with the icon adhering to the right layout margin. Any items on the left side of the icon stay further out outside the touch area.

 

In the Full-width Regular Width layout, it is possible to expose the Description content of the object. There are 24pt spacings separate between the main content and description areas, and between the description area and what comes after.

When the description area is available, the width of each section becomes as the following:

  • C = (A – B – F) * x – 24pt
  • D = (A – B – C – 24pt)
  • E = (D – F) – 24pt

when

  • x is the multiplier (by default, it is 0.45),
  • A is the total width, not including layout margins,
  • B is the width of the detail image area, including the right margin,
  • C is the width of the main content area (it is possible to set minimum and maximum width values of this area)
  • D is the width of the description area, attribute area, accessory view area, and spacings between combined,
  • E is the width of the description area, and
  • F is the width of the attribute and accessory view areas combined. the width of the attribute area does not exceed 40% of D.

Compact & Regular Height

The icon stack has 3pt top and bottom paddings.

The description area’s maximum height adapts to the height of the cell.

Regular Height layout has 16pt top and bottom paddings,

4pt spacings between icons in the icon stack and between attributes in the attribute stack, and

3pt spacings between text content in the main content area.

 

Compact Height layout has 11pt top and bottom paddings, but the cell needs to be at least 44pt in total height to maintain the suitable size of the touch area,

3pt spacings between icons in the icon stack and between attributes in the attribute stack, and

2pt spacings between text content in the main content area.

Rules

Chevron is center-aligned with the first line of the Title.

When an object cell variant with the only title available in the main content area is used, the main content, detail image, and icon stack areas are middle aligned vertically.

In this case, the icon stack position will not be affected by the top and bottom paddings of the cell.

When a multiple-line title variant is used, the elements are top-aligned instead.

It is recommended to use a consistent height of cells and the position of similar UI elements in each cell.

If an object cell variant with other content apart from the title is available, the icon stack, detail image, and main content area are top-aligned vertically instead.

If an indicator icon is the first item in the attribute stack, the icon always stays middle-aligned vertically with the first line of the title.

Whereas, the text attribute and the first line of description always stay baseline-aligned with the first line of the title.

By default for a title-and-subtitle or a title-and-footnote variant with one text attribute, the attribute will align with the title, a primary text; however, it is optional to align with the secondary text instead. For the latter, the text attribute will be baseline-aligned with the last line of the secondary text

If an icon other than a chevron is used in the accessory view, only one item in the attribute stack is allowed, and both the attribute and accessory view will be middle-aligned with the cell.

If one attribute is being used, the width of text content in the main content area will adapt and maintain an 8pt spacing from the attribute.

If two attributes are being used, the attribute area width will be the width of the longest attribute. Then, the whole main content area width will adapt and maintain an 8pt spacing from the attribute area.

Text attributes do not wrap. The total width of the area does not exceed 40% of the inner width of the cell.

A checkmark for selection stays middle-aligned vertically to the cell.

The maximum number of lines for the description text is 3.

Changelog

V7

  • Changed Title to Main Content
  • Added Compact Height
  • Added Specifications section
  • Spacing changed
    • Icon stack’s left and right spacings
  • Rules
    • Allow 3 icons for a variant with only 2 lines of text in the main content area