Table Components


We use large cells when the summary for the content that cell represents requires more than a title. For example, on a food cell, we display the food name as the title and the serving size as a description. These two things together provide enough context for the points coin on the cell, while either alone would not suffice. On message cells, we show the message title and a preview of the message as the description. In both of these cases, the extra information provides necessary context for members to know if they want to tap on the cells.


When a title provides enough context, use a table row.

We signify unread messages by _______.
We use the same pattern to display unread Journey messages, Connect notifications, and Coaching messages.

We wrap title text when it is necessary for the member to see the entire title. For example, we wrap the food name in search, to help members know which food item is the one they’re looking for, but truncate the food name in food cells on my day after they have been tracked.


We use grids instead of table rows when the visual content is as or more important than the text in a cell. For example, a recipe photo is as important (if not more) as a recipe’s name. Similarly, a coach’s photo is as important as the coach’s name.