Timeline
Timeline
Things one under the other, each on a marker, joined by a line: the steps of a procedure, the events of a history, the stages of a run. What each holds is free — a line of text, a table, a form — and the line runs down the whole of it, to the next marker.
Steps in order
Numbered, with the three states the stepper knows: the steps behind are drawn solid, the one being done stands out, those ahead wait.
-
Get the sources
Clone the repository and install its dependencies.
-
Configure
Copy the example environment and fill in the database address.
-
Create the database
Run the migrations; this is the step in progress.
-
Deploy
Build the assets and publish the release.
Anything under a title
Each item holds whatever it needs — properties, a message, buttons. An icon replaces the dot, and a tone colours the marker the way it colours a marker or a block.
-
Order placed
- Reference
- ORD-2026-0142
- Amount
- € 184.00
- Payment
- Card ending 4242
-
Payment received
-
Shipped
-
Delivery
A history
No order to follow, only events: dots, a date under each title, and a category colour where it tells something.
-
Version 2.0 released
-
Reviewed by the team
-
First draft
Steps not decided yet
As on the stepper: a step that depends on an answer not given yet takes no number and moves none of the others.
-
Get the sources
-
Choose a plan
-
Depends on the plan
-
Deploy
Written by hand
The component is only a way of writing the shape from a list. The same classes written in the page give the same timeline, with anything in it.
-
A plain dot
-
An icon in place of the dot
Any markup, written in the page.
In vue
The same timeline in a vue tree. What the twig takes as markup is a scoped slot there, so a component can stand under an item's title.