Timeline
时间线
Aliases:按时间排的记录活动时间轴事件进展记录activity timeline
What is it
A display that orders events by time, using timestamps, markers and content to explain sequence. It works for activity logs, project journals or order history. Unlike a stepper, which emphasizes task stages to complete, a timeline tells an event story. Keep titles and times visible when details expand.
Interactive playground
Try it. Make an informed choice.Expand an event, reverse the order and check that the detail remains attached to the same event.
Loading lab…
What to look for
- 01Reordering preserves the event-detail relationship.
- 02Time and title remain visible when collapsed; expansion is keyboard accessible.
✓ When to use
- Project events, order history and activity logs.
- Stories where temporal sequence matters.
✕ When not to use
- Use a badge for a single current state.
- Use a table or chart for quantitative comparisons.
Variants
Connected
连线时间轴
Markers and a connecting line emphasize sequence.
Event cards
事件卡片
Separate cards accommodate longer event descriptions.
Implementation
border-inline-startposition: relativedisplay: gridUse an ordered list and time with datetime for real timestamps. Expand with buttons and aria-expanded. Preserve the stable event ID when ordering changes. Treat markers and connecting lines as decoration, not substitutes for text.
Related concepts
A vertical list of collapsible sections: clicking a header expands its content and clicking again collapses it, either exclusively (one open at a time) or independently. Packs grouped content into limited space for on-demand expansion.
ComponentsSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsSimilarA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsSimilar