Intro

The timeline preview displays a snippet of the timeline, offering a high-level overview of what the overall project consists of.

Usage

Do’s

  • Do use the timeline preview to display objects and their respective timestamps.

  • Do use the timeline preview to indicate the status of objects via the nodes.

  • Do use the timeline preview to navigate to the timeline view.

Don’ts

  • Don’t use the timeline preview to show detailed or extended descriptions of objects.

  • Don’t use the timeline preview to mark tasks as complete.

Structure

The structure of the cell includes a header, timestamp, timeline, task title, and button footer.

A. Header 

The header summarizes the timeline preview.

B. Timeline Preview Object

The timeline preview object is a reduced representation of the timeline view objects. This includes reduced content such as the timestamp, node, and task title.

C. Button Footer

The button footer contains a button that will lead users to the timeline view with the task cards and descriptions.

Task Object

A. Timestamp

The timestamp displays the time of the timeline preview object.

B. Node

The node indicates the current state of the object.

C. Title

The title displays the name of the object.

Behavior

The timeline preview allows users to navigate to the timeline component. Users can tap on the “See All” button footer in the timeline preview to navigate to the timeline view. 

Mobile & Tablet

On mobile, the timeline preview allows the user to view the first two nodes. On tablet, a more extended view of the timeline allows for more objects, such as five nodes depending on the tablet orientation and screen size.

Specs

Main Colors

Sample Element Alpha Hex
Background #FFFFFF
Divider #E5E5E5

Text

Sample Element Alpha Hex
Date header #6A6D70
Date attribute #32363A
Item title #32363A

Nodes

Sample Element Alpha Hex
Start node #89919A
Past node #8089919A or #89919A 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