Timeline
时间线
A single line of events in chronological order, newest at the top.
Live Demo
Actually clickableCleaned up 128 duplicate photos
14:20
Exported the 2024 archive
10:05
Turned on iCloud sync
09:12
Imported 342 new photos
21:40
Created album "2024 Travels"
16:22
What you just saw:A WeChat Moments feed, the tracking trail of an order, GitHub commit history, a system changelog.
What it actually is
A timeline is a list that carries time. It adds two things over a plain List: explicit timestamps and visual continuity (one vertical line running through everything). What it expresses is "a series of things that happened".
Anatomy · What it's made of
Time Group时间分组
"Today", "Yesterday"
Item条目
Avatar + content
Rail时间轴
The vertical line on the left, running through everything
Dot节点
The small node sitting on the rail
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Events have a meaningful chronological order | Yes |
| You need to convey process and progress (logistics, state changes) | Yes |
| The content is about what happened rather than the current state | Yes |
| You need to show future plans (countdowns) | Depends |
| The content has no temporal dimension | No |
At high volume the vertical line makes the page feel fragmented — consider a plain List with timestamps.
Merge events that share a timestamp; never render two identical time points.
Similar Patterns
Don't mix these upTimelineCurrent
时间线
A single line of events in chronological order, newest at the top.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
In one line:A single line of events in chronological order, newest at the top.
How to tell AI
Three levels of promptAdd the component name and specifics
Build a timeline: grouped by "Today / Yesterday / Earlier", with a vertical line and nodes on the left, each entry showing an avatar, content, and a timestamp, and new entries inserted at the top.
Don't just say this to AI
Bad → BetterDon't say this to AI
Display the records in chronological order.
Say this instead
Build a Timeline: group by "Today / Yesterday / Earlier", a vertical rail with node dots on the left, sticky date group headings, a highlight-and-fade animation for newly inserted entries, and semantic <time datetime> elements.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.