#Overview
A timeline represents a timeline of steps. The steps can be in the past, present and future.
#When to use
- To show a user what’s going to happen during a specific process
- For a process that has at least two steps
- Delivery
- Resale
- Parcel loss
- My Cases
#Don’t use for
- A process that only has one step
#Anatomy
- Info label
- Step title
- Second line
- Subline (optional)
- Sidenote (optional)
- Link (optional)
- Button (optional)
You may use additional elements in a timeline if required, such as extra headings, buttons or an alert.
#Info label
- Past
- Done
- Done (Delivery Tracking only*)
- In progress
- Warning
- Error
- Future
* The green arrow (3) is a special variant. It is only used in Delivery Tracking to indicate that a parcel is on its way but hasn’t arrived. In this case, the green checkmark (2) is only shown at the end once the parcel has arrived.
#Best practices
#Less is more
Do
Keep copy minimal.
Don't
Avoid using paragraphs of text for each step.
#Known vs unknown steps
Do
When all steps are known, they are displayed in chronological order.
Do
If any steps are unknown (such as for the Delivery process), they are displayed in the opposite order.
#Timestamps
Do
When a step only has a title (usually for the “Done” status), a timestamp is added for visual balance.
Don't
A step with a title on its own appears unfinished.
#Placement
A timeline is generally placed at the top as it is the most important information on the page.
#States
#Galaxus
#Digitec
