The timeline displays a list of objects (tasks, events, or meetings) in chronological order. Objects in the timeline are presented as tappable cards that display the most important information about an object such as title, description, or status. The timeline view can be filtered or searched.

Nodes

Usage

Do’s

• Do use the timeline cards to show a brief preview of the object’s details.

• Do use the timeline to organize objects based on due date or time.

• Do use the timeline to view the status of different objects.

• Do use the timeline if there are at least two objects.

Don’ts

• Don’t put the entire object’s details in the timeline cards. To view details, the user can drill down into the card.

Structure

The structure of the cell includes a timestamp, indicator, and task card.

A. Timestamp

The timestamp displays the time of the object.

B. Indicator 

The indicator represents the state of the object. Users can set the state of an object by drilling down to the object’s detail page.

C. Object Card

This card displays the object and object details for the corresponding date. If the user taps on the card, they will be able to view the full description of the object.

Object Card

The object card can contain up to three levels of content: task title, description, and the task type.

A. Title

This displays the name of the object.

B. Description (Optional)

The description shows details or instructions for the object.

C. Supporting Text (Optional)

This provides an additional label to accommodate additional information.

Indicators

There are six indicators for the timeline component: start node, past node, today marker, done node, upcoming node, and end node. Each indicator represents a different state of objects in the timeline.

A. Start Node

The start node indicates the beginning of the timeline.

B. Past Node

The past node indicates objects that are in the past from the current date or time.

C. Today Marker

The today marker indicates the user’s current position on the timeline. The timestamp will be encompassed by an oval.

D. Done Node

The done node indicates that an object has been completed. Once the user marks the task as “complete” in object detail, the node will display a blue fill with a checkmark.

E. Upcoming Node

The upcoming node indicates an upcoming object in the timeline.

F. End Node

The end node indicates the end of the timeline.

Behavior

Users can scroll through the timeline to view any number of objects in the past, present, or future. The object cards are tappable and if tapped, will drill down to the object detail of that particular card. To provide further legibility and locality, the header is sticky in order to aid users in keeping track of their place on the timeline.

Mobile

Because of real estate on mobile, the content within the object card may display truncated titles, description and supporting text. Additionally, depending on the use case, the timeline may share the screen with another content type such as a map view. This translates to using a bottom sheet as a way to display the timeline.

Tablet

Similarly, the timeline component can fit on tablet in different ways. If the timeline is the only content on the screen, it will be center-aligned. However, if the timeline shares the screen with other content, this translates to using a side sheet as a way to display the timeline.

Specs

Main Colors

Timestamp

Cards

Nodes