Timeline

You might say

Show the shipping updates in time order so people can tell where the package is.

Show a sequence of events in time orderA timeline works for shipping, approval records, and release history. Choose whether the newest event appears first or last and stay consistent. Dates, labels, and status text carry the meaning; dots and colors only help people scan.
Package has been signed07-20 14:32
In transit07-19 09:15
Order placed07-18 20:02

When to use it

  • Shipping progress
    Delivered · Today, 14:32
    In transit · Yesterday, 09:15
    Order placed · 2 days ago, 20:02
  • Approval history
    oil-oil approved the request
    Alex Chen submitted the request
    Created the approval request
  • Release notes
    v2.4 added dark mode
    v2.3 fixed 12 issues
    v2.2 launched collaboration
  • A record of events over time
    Deployment successful
    Building…
    Tests failed

When NOT to use it

  • Use a timeline for items with no meaningful order
    1Enter information2Confirm order3Complete payment
  • Switch time direction halfway through
    Weekly meeting today
    Lunch together at noon
    There’s no time sequence here; a regular list works
  • Rely on dot color without status text
    Feature A
    Feature B
    Feature C
    The items have no sequence, so a timeline doesn’t fit
  • Pack long, unrelated documents into each event
    Release announcement
    The nodes are too dense; use cards instead
Anatomy
Package has been signed for07-20 14:32
The axis and container for a list of events
Use markers to show position and status; explain the outcome with text or icons
What happened at this step
Include the time to the minute when it matters
Variants
Vertical
Shipping07-19 09:15
Order placed07-18 20:02
Use the vertical layout when there are many events
Status
Deployed successfully
Building...
Test failed
Use text to describe outcomes and color only as a supporting cue
Horizontal
Project approval03-01
Design04-10
DevelopmentIn progress
LaunchTo be determined
When there are few steps and enough room to show progress horizontally
Typical use cases
Order tracking
Waybill SF1024888In transit
In transit · Shenzhen Nanshan Transfer CenterToday 09:15
Accepted · Hangzhou Yuhang outletYesterday 20:02
Order placedYesterday 18:40
Approval record
Leave approval · 3 days annual leaveApproved
maya-lee approved07-21 10:24 · Agree
Amai approved07-20 16:08 · Agree
Alex Chen submitted an application07-20 09:30
Project history
Update log
v2.4.0 Latest2026-07-18 · Added dark mode, component search
v2.3.22026-06-30 · Fix 12 known issues
v2.3.02026-06-12 · Team collaboration function launched
Release log
Website Refresh · MilestonesIn development
Kickoff
03-01
Design
04-10
Development
In progress
Launch
TBD