timeline

Steps in order with a line joining them: itineraries, how-to guides, order tracking, project history. Give steps a status only to show progress, like where an order is or which step the person has reached.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

gap

Props

gapnumberSpace between children in pixels (default 20).20

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: step

For your model

The exact guide entry a model gets for timeline, generated from the same definition.

  timeline  — Steps in order with a line joining them: itineraries, how-to guides, order tracking, project history. Give steps a status only to show progress, like where an order is or which step the person has reached.
    gap=<number>  Space between children in pixels (default 20).
    children: step
    example:
      timeline
        step "Day 1: Sedona" detail="Cathedral Rock at sunrise"
        step "Day 2: Flagstaff" detail="Lowell Observatory at night"
        step "Day 3: Grand Canyon" detail="South Rim, Mather Point"
      # Showing progress: a status on every step
      timeline
        step "Ordered" time="Oct 18" status=done
        step "Out for delivery" detail="Arrives by 8 PM" status=current
        step "Delivered" status=upcoming

  step "<text>"  — One step of a timeline: a title, an optional detail line and time, and whether it's done, current or upcoming.
    "<text>" (required)  The step's title, e.g. Shipped.
    status=<done|current|upcoming>  Only to show progress: done for finished steps, current for where the person is now, upcoming for what's left (muted). Leave it out on every step for a plan, itinerary or how-to that hasn't started.
    detail=<string>  A quieter line under the title, like a place or a note.
    time=<string>  A short date or time on the right, e.g. Oct 18 or 9:12 AM.
    icon=<string>  An icon in the step's marker instead of the check or dot, by name from icon's list, e.g. icon=truck.
    only inside: timeline
    example:
      step "Shipped" detail="Left the Phoenix warehouse" time="Oct 19" status=done icon=truck

More layout

column row overlap grid card list list-item accordion divider spacer each step carousel scroll

All layout elements on one page →