The timeline preview cell provides the user with a glimpse of upcoming objects, events, or posts using a horizontal timeline sorted by chronological order. The objects in the timeline preview cell are read-only and tapping on a cell navigates the user to the full timeline view.

Anatomy

A. Cell Header

Provide a meaningful title to the timeline cell.

B. Object Title

The object title contains the name of the object with no additional information, and it can wrap up to two lines.

C. Node and Axis

A node may be used to show the different statuses of an object or event. The node sits on the axis.

D. Timestamp

Include the timestamp below the axis.

Compact & Regular

In compact width, only show two objects in the timeline preview cell. In regular width, when readable-width is applied, only show three objects; when readable-width is not applied, four objects should be displayed.

Variations

The timeline preview cell should only display upcoming open objects or events. When there is only one remaining open object or event to display, the timeline preview will show that remaining object as well as the most recent completed objects before it, giving the user a sense of completion.

Resources

Timeline View