Intro

A standard table view cell is a table view cell that fits inside the table view container. It is highly customizable to accommodate a wide variety of uses.

Standard table view cell in compact width (left) and regular width (right)

Usage

Anatomy

Anatomy of a standard table view cell

A. Icon Stack (Optional)
A set of up to three vertically stacked icons can be displayed on the left of the detail image. These icons provide information about the object, such as whether it is unread or if it has attachments.

B. Detail Image (Optional)
The detail image provides a visual representation of the object within a 44 pixel frame. Leveraging the avatar component, the detail image has a minimum size of 16 pixels and a maximum of 60 pixels. 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 square frame.

C. Main Content
The main content is the main area for text content. The label within this area is the only mandatory item in the standard table view cell.

D. Right Accessory
The right accessories are a vertically or horizontally stacked arrangement of labels and icon types that are displayed towards the right side of the standard table view cell. These labels and icons can be used to indicate the condition of the item, such as its priority or status.

E. Disclosure Content (Optional)
The disclosure content is displayed on the trailing edge of the cell. It can be used to indicate navigation to a detail page for the item.

Best Practices

The standard table view cell component can be adjusted to several different use cases by leveraging the left and right accessories.

Different use cases for the standard table view cell component.

Resources

Related Components/Patterns: Contact Cell, Key Value Table View Cell, Preview Table View, Object Cell