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.
You can say this to an AI Agent
Turn the ticket audit trail into a timeline ordered consistently newest-first or oldest-first. Show actor, time, action, and outcome at every node. Do not present it as pending steps, and test failed transfer and reopened events.
When to use it
- Shipping progressDelivered · Today, 14:32In transit · Yesterday, 09:15Order placed · 2 days ago, 20:02
- Approval historyans-studio approved the requestAlex Chen submitted the requestCreated the approval request
- Release notesv2.4 added dark modev2.3 fixed 12 issuesv2.2 launched collaboration
- A record of events over timeDeployment successfulBuilding…Tests failed
When NOT to use it
- Use a timeline for items with no meaningful order1Enter information2Confirm order3Complete payment
- Switch time direction halfway throughWeekly meeting todayLunch together at noonThere’s no time sequence here; a regular list works
- Rely on dot color without status textFeature AFeature BFeature CThe items have no sequence, so a timeline doesn’t fit
- Pack long, unrelated documents into each eventRelease announcementThe 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 · AgreeAlex 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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check