Navigation
Display

Cell

Important building blocks of our mobile apps. Cells form the foundation of table views.

Anatomy

Variants

Basic cell

This is the simplest form of the Cell. It is a compacted-height Cell with limited subviews and accessories, to be used on Settings screens, in modal dialogs, and elsewhere. It has a minimum height of 48px and a non-bold title. It does not have subtitles or a progress bar, and in general it has less vertical space around text and accessories.

Subtitle cell

Subtitle cells can serve a variety of purposes based on what attributes (accessories and subtitles) are active. They vary in height depending on the presence or absence of subtitles and progress bars, and they allow for a wide range of functionality depending on which accessories are active.

Wide subtitle cell

Although cells are designed to be responsive, layout considerations (such as the progress bar) make a separate cell type for tablet layouts advantageous. The overall purpose of wide subtitle cells is identical to that of subtitle cells.

Options

Left accessory

Optional, this can tends to include circular or rounded-rectangle ItemAvatars with or without topic icons, although other accessories could potentially be used.

Right accessory

Optional. The most commonly used right accessories are carets (on iOS specifically). Other types of right accessories include selection indicators, download buttons, info icons, and switches.

Title

Either LabelLarge or LabelMedium, titles are the main text in a cell

Subtitle

Either LabelMedium or LabelSmall. Cells can have up to two subtitles simultaneously.

Borders

Cells have different horizontal rules depending on their position and relation to other cells. Cells bordering other cells in a list have an inset bottom border (except for the last cell in the list). Cells on their own have full-width borders on both top and bottom.

Guidelines

Follow existing conventions

Base new cell designs off cell designs that currently exist in the app to ensure consistency and buildability. If a design task would benefit from a new cell type, discuss feasibility and implementation with a mobile engineer.