Steps

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

Description for the model

A numbered process in 3–5 steps with a connector line (how something works).

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": "Steps",
  "props": {
    "id": "how",
    "title": "Brew in three steps",
    "items": [
      {
        "icon": "check",
        "title": "Weigh the coffee",
        "text": "15 g for a 250 ml cup."
      },
      {
        "icon": "sync",
        "title": "Bloom for 30 seconds",
        "text": "Pour twice the weight of the coffee and wait."
      },
      {
        "icon": "check",
        "title": "Pour in circles",
        "text": "Finish at 3:00 total."
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
status	"available" | "coming"		Whether the whole process ships today. default "available"
items	array of objects	yes	Steps. min 2 items, max 5 items
items[].icon	"check" | "arrow" | "play" | "clock" | "calendar" | "pin" | "users" | "mail" | "shield" | "star" | "moon" | "planet" | "telescope" | "rocket" | "medal" | "book" | "terminal" | "compass" | "sigma" | "pager" | "chart" | "print" | "lock" | "sync" | "quote" | "layers" | "server" | "puzzle" | "cart" | "code" | "sparkle" | "eye" | "chat"		Icon from the catalogue’s icon set
items[].title	string	yes	Step. max length 80
items[].text	string		Sentence. max length 260
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

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

Brew in three steps
Weigh the coffee
Bloom for 30 seconds
Pour in circles

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": [
    {
      "title": "Only one step"
    }
  ]
}

Issues:

• /items fewer than 2 items

Rendered as:

Only one step

Accessibility

axe-core: 20 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.