Intro

The key value cell is a table view cell that fits inside the table view container. It is ideal for displaying sets of data that also need to display their labels. Key value cells are typically found in the object and object details page.

Usage

Do’s

  • Use a key value cell to display a piece of information with its label.

Don’ts

  • Do not use the key value cell to display an image.
  • Do not use the key value cell to display text content that is not related to a property.

Structure

A. Key Label

This is the property name that identifies what the value is representing.

B. Value

Value is used to show the data for a property. This could be pre-defined values or input created by users. If there is a specific action associated with it (for example, phone number or email address), the value should be a button color.

C. “Expand”/”Collapse” Icon

When the value text exceeds 6 lines, it’s truncated at the end of the sixth line, and an expand icon shows up. Users can tap the expand icon to view the rest of the value text. When the cell is expanded, a collapse icon replaces the expand icon.

Behavior & Interactions

Key value cells have a maximum height of 6 lines of value text. If the content is more than 6 lines, it is truncated at the end of the 6th line and an “expand” icon will appear on the top right corner of the cell. Users can tap to expand / collapse the cell to view all of the text.

In general, key value cell is for display only. Tap to drill down is possible, though it depends on the context. If the value displayed has a specific action associated with it (for example, phone number or email address), tapping on the cell would trigger that action (for example, call that phone number or send an email to that address).

Layout

Mobile

On mobile, always display the key value cell as one full-width column.

Tablet

On tablet, key value cells can be displayed as one or two columns.

One-column

Two-column

Only use the two-column layout when the cells in this group have relatively consistent height among all the rows. Avoid having expandable key value cells in a two-column layout.

Specs

One to Six Lines of Value Text

Mobile



 Tablet



More than 6 lines of value text

Mobile



 Tablet



Two-column Layout (Tablet Only)



Sample Element Alpha Hex
Key / label text #6A6D70
Value text #32363A
"Expand" / "Collapse" button
Text with action
#0A6ED1