Timeline
A timeline is a vertical rail of events in the order they happened, where each row names an actor, an action and a time, and the rail carries the continuity between them. Orvain's Timeline family is five blocks split by what a row has to hold: a day's checklist hung off time chips, a mention with the text it quoted, an upload and a scheduled call, an assignment and a reaction beside a notice the system wrote itself, and attachment rows carrying the document they produced.
Most of the design work in a timeline goes into a single sentence. An avatar sits inside it, a filename is inked differently from the words around it, a chip in the middle of the line is a link, and the whole thing still has to read as one sentence when a display name runs to forty characters. The second rule is temporal honesty. Readers treat a rail as append-only, so a row edited or quietly removed costs more trust than it saves: corrections get their own row.
Day checklist
Best for
A day of work: what happened when, and what is still open
Anatomy
Dashed time chips hanging on the rail · a note entry · four task rows with a dark 2 Days pill and a 1 / 4 ring · dashed row rules · a four-paragraph entry
Date and mention
Best for
Thread history: the day it happened and who was pulled in
Anatomy
Date chip on a muted node · avatar with a verified badge and a presence dot · a run that alternates primary and secondary · a raised chip · the quoted block under a brand bar
File and call
Best for
Audit trails: the upload and the booking, each with its actor
Anatomy
Violet and yellow event nodes · a red PDF file mark inline · the filename in primary, the rest in secondary · an avatar mid-sentence · a trailing middle dot and time
Task and reaction
Best for
Team activity: assignments, reactions and the system's own notices
Anatomy
Two avatars in one sentence · raised chips with a leading glyph and a trailing arrow · an emoji kept as text · a green node for the automated row
Attachment events
Best for
File history: an event plus the document it produced
Anatomy
Heading over a soft attachment card · a green check that comes off · the PDF mark · a second variant whose sub-label line opens with the mark because its own check is hidden
Delivery tracker
Best for
Orders, shipments and any process with done, current and upcoming steps
Anatomy
Order header and status · done step with a check · current step with a halo · upcoming step dashed · time and place on each · delivery notes
- Picked upToday, 08:10Depot 4, Rotterdam
- In transitArrives in about 2 hA15 towards Utrecht
- DeliverTomorrow, 09:00 to 12:00Oudegracht 112, Utrecht
- Signature needed
- Leave with a neighbour if no one is in
Using Timeline
Reach for it when
- An audit trail, where the question is who did what and when.
- A discussion whose replies only make sense beside the text they quote.
- A day view of work, mixing what has been done with what is still open.
- Feeds where automated events sit among human ones and the difference has to be visible.
Reach for something else when
- A list of things still to do. Those sort by priority and owner rather than by time, which makes them a task list.
- Machine logs at volume. A virtualised table with columns and filters beats a rail you have to scroll.
- Work with durations and overlap. A rail shows order only; a calendar or a Gantt chart shows length and collision.
Where it shows up
Record history
Every change to one customer or one order, gathered in one place. The rail answers the support question directly: it was changed on Tuesday, by this person, from this value to that one.
Ticket activity
The life of an issue under its description: assignments, status changes, comments and the file somebody attached. Automated rows are marked differently, so nobody gets credited for what a webhook did.
Approval trail
A contract or an expense moving through its reviewers, each step stamped with who signed and when. It is usually read long after the fact, so no row may depend on state elsewhere on the page.
Daily work view
What one person got through today, with time chips showing when each thing landed and the still-open items sitting in the same column instead of in a separate list below.
Questions
What is the difference between a timeline and an activity feed?
A timeline is anchored to one object and tells its story in order: this document, this order, this ticket, from first event to latest. An activity feed is anchored to a person and gathers events across many objects, usually newest first and filtered to what that person is involved in. One event can legitimately appear in both.
Should a timeline put the newest event first or last?
Put the newest at the bottom when the rail tells the story of one object, because the reader is already scrolling downward and new rows should arrive where the eye already is. Put it at the top for monitoring, where the last hour matters more than the first day. Whichever you choose, do not flip the order when a filter is applied.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPTimeline
A timeline is a vertical rail of events in the order they happened, where each row names an actor, an action and a time, and the rail carries the continuity between them. Orvain's Timeline family is five blocks split by what a row has to hold: a day's checklist hung off time chips, a mention with the text it quoted, an upload and a scheduled call, an assignment and a reaction beside a notice the system wrote itself, and attachment rows carrying the document they produced.
Most of the design work in a timeline goes into a single sentence. An avatar sits inside it, a filename is inked differently from the words around it, a chip in the middle of the line is a link, and the whole thing still has to read as one sentence when a display name runs to forty characters. The second rule is temporal honesty. Readers treat a rail as append-only, so a row edited or quietly removed costs more trust than it saves: corrections get their own row.
Day checklist
Best for
A day of work: what happened when, and what is still open
Anatomy
Dashed time chips hanging on the rail · a note entry · four task rows with a dark 2 Days pill and a 1 / 4 ring · dashed row rules · a four-paragraph entry
Date and mention
Best for
Thread history: the day it happened and who was pulled in
Anatomy
Date chip on a muted node · avatar with a verified badge and a presence dot · a run that alternates primary and secondary · a raised chip · the quoted block under a brand bar
File and call
Best for
Audit trails: the upload and the booking, each with its actor
Anatomy
Violet and yellow event nodes · a red PDF file mark inline · the filename in primary, the rest in secondary · an avatar mid-sentence · a trailing middle dot and time
Task and reaction
Best for
Team activity: assignments, reactions and the system's own notices
Anatomy
Two avatars in one sentence · raised chips with a leading glyph and a trailing arrow · an emoji kept as text · a green node for the automated row
Attachment events
Best for
File history: an event plus the document it produced
Anatomy
Heading over a soft attachment card · a green check that comes off · the PDF mark · a second variant whose sub-label line opens with the mark because its own check is hidden
Delivery tracker
Best for
Orders, shipments and any process with done, current and upcoming steps
Anatomy
Order header and status · done step with a check · current step with a halo · upcoming step dashed · time and place on each · delivery notes
- Picked upToday, 08:10Depot 4, Rotterdam
- In transitArrives in about 2 hA15 towards Utrecht
- DeliverTomorrow, 09:00 to 12:00Oudegracht 112, Utrecht
- Signature needed
- Leave with a neighbour if no one is in
Using Timeline
Reach for it when
- An audit trail, where the question is who did what and when.
- A discussion whose replies only make sense beside the text they quote.
- A day view of work, mixing what has been done with what is still open.
- Feeds where automated events sit among human ones and the difference has to be visible.
Reach for something else when
- A list of things still to do. Those sort by priority and owner rather than by time, which makes them a task list.
- Machine logs at volume. A virtualised table with columns and filters beats a rail you have to scroll.
- Work with durations and overlap. A rail shows order only; a calendar or a Gantt chart shows length and collision.
Where it shows up
Record history
Every change to one customer or one order, gathered in one place. The rail answers the support question directly: it was changed on Tuesday, by this person, from this value to that one.
Ticket activity
The life of an issue under its description: assignments, status changes, comments and the file somebody attached. Automated rows are marked differently, so nobody gets credited for what a webhook did.
Approval trail
A contract or an expense moving through its reviewers, each step stamped with who signed and when. It is usually read long after the fact, so no row may depend on state elsewhere on the page.
Daily work view
What one person got through today, with time chips showing when each thing landed and the still-open items sitting in the same column instead of in a separate list below.
Questions
What is the difference between a timeline and an activity feed?
A timeline is anchored to one object and tells its story in order: this document, this order, this ticket, from first event to latest. An activity feed is anchored to a person and gathers events across many objects, usually newest first and filtered to what that person is involved in. One event can legitimately appear in both.
Should a timeline put the newest event first or last?
Put the newest at the bottom when the rail tells the story of one object, because the reader is already scrolling downward and new rows should arrive where the eye already is. Put it at the top for monitoring, where the last hour matters more than the first day. Whichever you choose, do not flip the order when a filter is applied.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
