Timeline
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 |