Intro

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

Sample Element Alpha Hex
Background #FFFFFF
Today’s date indicator #800A6ED1 or #0A6ED1 with 50% opacity
Divider #E5E5E5

Timestamp

Sample Element Alpha Hex
Header text #6A6D70
Header text disabled #806A6D70 or #6A6D70 with 50% opacity
Date text #32363A
Date text disabled #8032363A or #32363A with 50% opacity
Today's date text #FFFFFF

Cards

Sample Element Alpha Hex
Background #FFFFFF
Header text #32363A
Header text disabled #8032363A or #32363A with 50% opacity
Description text #32363A
Description text disabled #8032363A or #32363A with 50% opacity
Attribute text #6A6D70
Attribute text disabled #806A6D70 or #6A6D70 with 50% opacity

Nodes

Sample Element Alpha Hex
Start node #89919A
Past node #8089919A or #89919A with 50% opacity
Today marker #806A6D70 or #6A6D70 with 50% opacity
Done node background #0A6ED1
Done node icon #FFFFFF
Upcoming node border #0A6ED1
Upcoming node background #FFFFFF
End node border #89919A
End node background #FFFFFF