Components
Timeline
A timeline is a component that visualizes a series of events in a clear, sequential order. It uses a vertical line with nodes or markers to represent specific points in time.
When to use
Chronological storytelling
Communicate a sequence of events (project milestones, product history, user journey) in a clear, time-ordered flow.
Chronological storytelling
Communicate a sequence of events (project milestones, product history, user journey) in a clear, time-ordered flow.
Chronological storytelling
Communicate a sequence of events (project milestones, product history, user journey) in a clear, time-ordered flow.
Milestone tracking
Show progress across defined checkpoints with statuses (upcoming, current, completed) at a glance.
Milestone tracking
Show progress across defined checkpoints with statuses (upcoming, current, completed) at a glance.
Milestone tracking
Show progress across defined checkpoints with statuses (upcoming, current, completed) at a glance.
Process education
Explain how something unfolds step-by-step (onboarding, compliance steps, research phases).
Process education
Explain how something unfolds step-by-step (onboarding, compliance steps, research phases).
Process education
Explain how something unfolds step-by-step (onboarding, compliance steps, research phases).
Release notes & changelogs
Present dated updates where the date/order matters more than dense detail.
Release notes & changelogs
Present dated updates where the date/order matters more than dense detail.
Release notes & changelogs
Present dated updates where the date/order matters more than dense detail.
Incident or case timeline
Document what happened and when (alerts, actions taken, resolution) for transparency and review.
Incident or case timeline
Document what happened and when (alerts, actions taken, resolution) for transparency and review.
Incident or case timeline
Document what happened and when (alerts, actions taken, resolution) for transparency and review.
Comparative streams
Lay out parallel tracks (e.g., left/right columns) to compare two related timelines side-by-side.
Comparative streams
Lay out parallel tracks (e.g., left/right columns) to compare two related timelines side-by-side.
Comparative streams
Lay out parallel tracks (e.g., left/right columns) to compare two related timelines side-by-side.
When to avoid
Unordered or categorical lists
If order doesn’t matter, use a list, cards, or grid instead of implying chronology.
Unordered or categorical lists
If order doesn’t matter, use a list, cards, or grid instead of implying chronology.
Unordered or categorical lists
If order doesn’t matter, use a list, cards, or grid instead of implying chronology.
High-frequency feeds
Real-time, rapidly updating content (chat, logs) overwhelms the timeline; use an activity feed/table.
High-frequency feeds
Real-time, rapidly updating content (chat, logs) overwhelms the timeline; use an activity feed/table.
High-frequency feeds
Real-time, rapidly updating content (chat, logs) overwhelms the timeline; use an activity feed/table.
Deep, complex content
If each item needs long text, media, or interactions, prefer expandable lists, accordions, or pages.
Deep, complex content
If each item needs long text, media, or interactions, prefer expandable lists, accordions, or pages.
Deep, complex content
If each item needs long text, media, or interactions, prefer expandable lists, accordions, or pages.
Too many items
Very long histories become hard to scan. Switch to pagination, grouping (by month/quarter), or summaries.
Too many items
Very long histories become hard to scan. Switch to pagination, grouping (by month/quarter), or summaries.
Too many items
Very long histories become hard to scan. Switch to pagination, grouping (by month/quarter), or summaries.
Ambiguous dates
When exact ordering is unknown or approximate, a grouped list or board may communicate better.
Ambiguous dates
When exact ordering is unknown or approximate, a grouped list or board may communicate better.
Ambiguous dates
When exact ordering is unknown or approximate, a grouped list or board may communicate better.
Decision flows
For branching logic or dependencies, use a flowchart/graph rather than a linear timeline.
Decision flows
For branching logic or dependencies, use a flowchart/graph rather than a linear timeline.
Decision flows
For branching logic or dependencies, use a flowchart/graph rather than a linear timeline.
Specifications
Alignment
Left
The timeline access and notes are on the left, with all content appearing to the right.
Right
The timeline access and notes are on the right, with all content appearing to the left.
Left
The timeline access and notes are on the left, with all content appearing to the right.
Right
The timeline access and notes are on the right, with all content appearing to the left.
Left
The timeline access and notes are on the left, with all content appearing to the right.
Right
The timeline access and notes are on the right, with all content appearing to the left.
Left
The timeline access and notes are on the left, with all content appearing to the right.
Right
The timeline access and notes are on the right, with all content appearing to the left.
Variants
Default
The standard style, using a simple dot for the marker.
Avatar
Replace the marker with an avatar component. Use this for activity feeds to show who performed an action.
Icon
Replace the marker with an icon. Use this to represent the type of event (e.g., a comment icon, a file icon).
Theme icon
Replaces the marker with a high-emphasis icon that has a solid background color.
Default
The standard style, using a simple dot for the marker.
Avatar
Replace the marker with an avatar component. Use this for activity feeds to show who performed an action.
Icon
Replace the marker with an icon. Use this to represent the type of event (e.g., a comment icon, a file icon).
Theme icon
Replaces the marker with a high-emphasis icon that has a solid background color.
Default
The standard style, using a simple dot for the marker.
Avatar
Replace the marker with an avatar component. Use this for activity feeds to show who performed an action.
Icon
Replace the marker with an icon. Use this to represent the type of event (e.g., a comment icon, a file icon).
Theme icon
Replaces the marker with a high-emphasis icon that has a solid background color.
Default
The standard style, using a simple dot for the marker.
Avatar
Replace the marker with an avatar component. Use this for activity feeds to show who performed an action.
Icon
Replace the marker with an icon. Use this to represent the type of event (e.g., a comment icon, a file icon).
Theme icon
Replaces the marker with a high-emphasis icon that has a solid background color.
Anatomy
1
Node / Marker
A visual indicator of the event's status. It is customizable with variants for a default point, an avatar, a standard icon, or a theme icon to represent the type of event or its status visually.
2
Connecting line
Visually links sequential events to establish the chronological flow of the timeline. The highlighted state indicates the flow between completed events, while the default state connects to pending or future events.
3
Title
The head of the event.
4
Value
The descriptive body text of the event.
5
Timestamp
Text displaying the time of the event.
Value
Timeline
Timeline