Process steps
An ordered how-it-works, as a vertical timeline.
An ordered "how it works" block (ADR 0018): a section heading and lede, then a vertical timeline of numbered steps. The markup is a real<ol>, so assistive tech gets the sequence; the numeral and the connecting spine are the presentation of that order, not the order itself.
Number-only by intent — no media — which is what keeps it distinct from a Showcase item, and it is not a Feature grid, because that renders an unordered row. Tone-agnostic: the homepage places it in agarden band, which is how the preview starts, but it reads only semantic tokens so the surface, spine and markers follow any tone.
In a garden band
Näin vuokraat Julilta, askel askeleelta
Ensimmäisestä klikkauksesta avaimiin – koko matka hoituu verkossa.
Löydä kotisi
Selaa vapaita asuntoja ja valitse omaan elämääsi sopiva.
Hae verkossa
Lähetä hakemus minuuteissa – koko prosessi hoituu verkossa, tyytyväisyystakuulla.
Muuta sisään
Allekirjoita sähköisesti, nouda avaimet ja asetu hiilineutraaliin kotiin.
Props
| Prop | Type | Required |
|---|---|---|
| heading | string | yes |
| body Optional lede under the section heading. | string | — |
| steps | ProcessStep[] | yes |
| headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | — |
| stepHeadingLevel Heading level for each step, defaults one below the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | — |
| Field | Type | Required |
|---|---|---|
| heading | string | yes |
| body | string | yes |