Timeline
Vertical or horizontal sequence of dated events or steps, with status-aware markers.
Vertical — order tracking
Default orientation. Each node carries a status color, a timestamp once reached, and optional detail text below the label.
-
Order placed
Payment confirmed via Visa •••• 4471
-
PackedPacked at Surabaya fulfillment center
-
ShippedOut with courier · JNE Express
-
Out for deliveryEstimated Jun 15
-
Delivered
Vertical alternating — company history
Year on one side, milestone on the other. Reads naturally as a chronology — only worth alternating sides when the content truly is a sequence, like this one.
-
2019
Founded
Started as a two-person team building storefronts for local sellers.
-
2021Series A
Raised funding to expand beyond Java.
-
2023Platform rewrite
Migrated the builder to its current component-based architecture.
-
202510,000 stores
Crossed ten thousand active storefronts on the platform.
Horizontal — compact stepper
Same data, sideways. Works for short labels and a handful of steps; beyond that, prefer the vertical layout above so the page scrolls instead of the timeline overflowing.
-
Jun 12, 09:14Order placed
-
Jun 12, 14:30Packed
-
Jun 13, 08:02Shipped
-
—Out for delivery
-
—Delivered
Error state
A failed step needs to read as distinct from both "done" and "pending" — same node shape, error color, and a detail line explaining what happened.
-
Order placed
-
PaymentCard declined — customer notified by email
-
Packed
-
Shipped
Empty state
No events yet — explicit placeholder instead of an empty <ul>, so the layout doesn't silently collapse.
No activity yet. Updates will appear here once this order starts processing.