The timeline preview displays a snippet of the timeline, offering a high-level overview of what the overall project consists of.
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’t use the timeline preview to show detailed or extended descriptions of objects.
Don’t use the timeline preview to mark tasks as complete.
The structure of the cell includes a header, timestamp, timeline, task title, and button footer.
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.
The timestamp displays the time of the timeline preview object.
The node indicates the current state of the object.
The title displays the name of the object.
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.
|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|