Timeline

learning · static (no JavaScript) · no children. All components: component playground.

Description for the model

Ordered sequence of events or stages (history, a process over time, a project plan). Use for anything where the order or the dates matter; use Steps for a short how-to on a landing page.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "Timeline",
  "props": {
    "title": "How coffee reached Europe",
    "intro": "Five moments that put coffee on the continent.",
    "items": [
      {
        "label": "c. 1450",
        "title": "Sufi monasteries in Yemen roast and brew coffee",
        "text": "Brewing starts as a way to stay awake for night prayers.",
        "status": "done"
      },
      {
        "label": "1555",
        "title": "The first coffeehouses open in Istanbul",
        "status": "done"
      },
      {
        "label": "1650",
        "title": "Oxford opens the first English coffeehouse",
        "text": "Customers pay a penny for a cup, which gives the shops the nickname penny universities.",
        "status": "current"
      },
      {
        "label": "1720",
        "title": "Venice's Caffè Florian opens",
        "status": "upcoming"
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "timeline"
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
items	array of objects	yes	Entries in order, earliest first. min 2 items, max 20 items
items[].label	string	yes	When: a date, period or stage name. max length 40
items[].title	string	yes	What happened or happens. max length 100
items[].text	string		One or two sentences of detail. max length 400
items[].status	"done" | "current" | "upcoming"		Where the learner is on the line; omit for a purely historical timeline

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

How coffee reached Europe
c. 1450: Sufi monasteries in Yemen roast and brew coffee
1555: The first coffeehouses open in Istanbul
1650: Oxford opens the first English coffeehouse
1720: Venice's Caffè Florian opens

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "items": "first, then second"
}

Issues:

• /items expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 14 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.