The timeline view displays a list of items such as tasks, events, or meetings in chronological order. The information in the timeline view is presented as tappable cells that show the most important information about the object. The timeline view may be filtered or searched.

• Use the timeline cells to show a brief and concise overview of the object.
• Use the timeline view to organize objects based on due date or time.
• Use the timeline view to indicate the status of different objects.

Don’t show all the object’s details in the timeline cell. To view details, the user can tap to drill down into the cell’s details.

Timeline View

The timeline view contains a chronological axis with timestamps on the left and timeline cells to the right of the axis.

The timeline can be filtered and searched using the local search behavior. See Filter and Search for more details.

A. Header

The header shows the parent time unit (month, day, etc.) of the timeline cells with a customizable format.

B. Now Indicator

The now indicator indicates today’s timeline cell(s). It appears on top of the first cell with current tense or the cell with future tense that is closest to now.

C. Timeline Start / End Cells (Optional)

Differentiated by a diamond shaped node, a start or end node indicates the beginning or end of the timeline.

D. Timeline Cells

The timeline cells provide concise key information about timeline objects. These may be tappable to drill down into full details.

Timeline Cell

The timeline cell contains the title of the object along with other key information. Designed for flexibility, information may be hidden or formatted according to the user’s needs. These cells may also be made tappable to allow the user to navigate to the object details.

A. Timestamp Column

The timestamp column displays the timeline cell timestamp. The timestamp may have a flexible format. Underneath the timestamp, a non-interactive icon may be displayed to indicate more information upon drill down.

B. Node and Node Line

The nodes and node lines indicate the status and tense of the timeline view object by using color, shape, and icons. See variations below for details.

C. Timeline Title

The timeline title provides a concise overview of the timeline object. The timeline title may wrap to two lines before truncating.

D. Status Stack

The status stack provides 2 statuses of the timeline object.

E. Description

The description may wrap to three lines before truncating.

F. Attributes

The two attributes provide additional information about the timeline object. Attributes cannot exceed one line.

Variations

Through shape and color, timeline cell nodes and the node line indicate the state and status of timeline objects.

Past objects are indicated by a blue node and blue node line.

Current objects are indicated by a blue cell background, a blue node, and blue node line.

Future objects are indicated by a gray node and gray node line.

Icons within the node indicate whether an object is open, in-progress, or completed.