Layouts · Content display
Timeline
Also called: Activity timeline, Event timeline, History log, Tracking history
Lines up event nodes along a vertical line in time order. Each node shows when it happened and what happened, to show a process, a history or shipping progress.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstShow the order's shipping progress as a timeline: a vertical line on the left, a dot for each node, and the event description plus the time in small gray text on the right. Sort newest first. Highlight the newest node with a solid dark dot and bold text, and use light gray dots for the rest. When there are more than 5 nodes, show only the latest 5 and put "Show all" at the bottom.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Timeline is what you need.
Use Timeline when
- Several events belong to the same thing and happen in a clear time order
- Users need to know what stages something went through and where it is now
- Showing read-only history like activity logs, approval history or shipment tracking
Pick something else when
Users need to fill things in or take actions step by step
Use insteadWizardUsers need to filter, sort and compare lots of records
Use insteadData Table
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
The order is inconsistent, sometimes oldest first and sometimes newest first, and the latest status isn't in the most visible spot
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Nodes have only a time and no description, or the description is a whole essay
- 03
A list of unrelated news items shown as a timeline, where the line and dots mean nothing
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A vertical line runs all the way down, with dot nodes along it in time order. Each node has the event description and the time next to it.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A timeline uses a vertical line running from top to bottom to string events together. Each event is a dot on the line, with the time and a description next to it, like "2026-09-01 10:20 Order placed" or "2026-09-02 08:00 Shipped". The newest event usually goes at the top and gets a dark dot to stand out.
Its focus is order and time. Users can see at a glance what stages something went through, where it is now and when each step happened. It's common for shipment tracking, approval history, activity logs, project milestones and release history.
The difference from a Feed: in a feed each item is independent content and the time is secondary info; in a timeline each item is one stage of the same thing, and they follow one another. It's also different from a Wizard: a wizard guides users through the steps they still need to do, while a timeline records things that have already happened.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-timeline- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-timeline.el-timeline.arco-timeline.t-timeline.n-timeline.MuiTimeline-root
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026