How Steps
Explains a short flow as two to four numbered steps.
When to Use
Use when:
A marketing or onboarding page needs to show that something is simple — quiz flows, product explainers, getting-started sections. The numbering is the point: it promises the whole thing is this short.
Don't use when:
The steps track real completion — that needs Progress or Task Checklist. For parallel capabilities with no order, use Feature Card.
Variants
Three columns (default)
Three is the sweet spot — enough to show a process, few enough to still read as easy.
01
quiz
Take the quiz
Answer 15 quick questions about how you facilitate.
02
insights
Get your DNA
Discover your archetype and what makes it work.
03
emoji_events
Level up
Apply tailored tips in your next workshop.
<?= ws_how_steps([
['title' => 'Take the quiz', 'description' => 'Answer 15 questions…', 'icon' => 'quiz'],
['title' => 'Get your DNA', 'description' => 'Discover your archetype…', 'icon' => 'insights'],
['title' => 'Level up', 'description' => 'Apply tailored tips…', 'icon' => 'emoji_events'],
], ['color' => 'learn', 'columns' => 3]) ?>Two columns with custom badges
Steps auto-number as 01, 02… unless you pass a badge. Override it when the sequence isn't really numeric — phases, or before/during/after.
A
Before the session
Prep your agenda and share the join link.
B
During the session
Run the timer and capture decisions live.
<?= ws_how_steps([
['title' => 'Before the session', 'description' => '…', 'badge' => 'A'],
['title' => 'During the session', 'description' => '…', 'badge' => 'B'],
], ['color' => 'plan', 'columns' => 2]) ?>Four columns
The maximum. Beyond four the grid stops reading as a simple flow — if you need more, the process probably needs its own page.
01
school
Learn
Browse the library.
02
edit_note
Plan
Build the agenda.
03
groups
Facilitate
Run the room.
04
hub
Reflect
Turn notes into a readout.
<?= ws_how_steps($steps, ['columns' => 4]) ?>
States
| State | Behavior |
|---|---|
| Default | The only state. Steps are static and non-interactive — no hover, focus, current, or completed treatment. |
| No completion tracking | Every step looks identical regardless of the user's progress. If a step should read as done, this isn't the component. |
| Missing icon | The badge number still renders; only the icon is omitted. Use icons on all steps or none. |
| Auto-numbering | Zero-padded from the item's index — the first step is 01. Reordering the array renumbers automatically. |
Real-World Usage
The Facilitator DNA landing page, between the hero and the CTA. Three steps, icons throughout, each description one sentence — matched lengths keep the cards the same height.
01
quiz
Answer honestly
Fifteen questions about how you actually run a room.
02
fingerprint
Meet your archetype
See the strengths you lean on and the ones you skip.
03
rocket_launch
Put it to work
Get exercises picked for the way you facilitate.
<?= ws_section_header('How it works', ['align' => 'center']) ?>
<?= ws_how_steps($dnaSteps, ['columns' => 3]) ?>
<?= ws_cta_section('Discover your Facilitator DNA', [
'primaryBtn' => ['text' => 'Take the quiz', 'href' => '/dna/'],
]) ?>Options
Group options
| Option | Type | Default | Purpose |
|---|---|---|---|
$steps | array | [] | Positional. The step definitions, in order. |
color | string | 'learn' | learn | plan | facilitate | reflect | neutral. The four phase keys render identically since Red Unification. |
columns | int | 3 | 2 | 3 | 4 |
class | string | '' | Additional CSS classes on the container |
attrs | array | [] | Extra HTML attributes on the container |
Step options
| Option | Type | Default | Purpose |
|---|---|---|---|
title | string | '' | Step title. A verb phrase reads best: "Take the quiz". |
description | string | '' | One sentence. Keep lengths even across the row. |
icon | string | null | Material icon name |
badge | string | sprintf('%02d', $index + 1) | Overrides the auto-number |
Accessibility
| Concern | Behavior |
|---|---|
| Headings | Each step title is a real <h3>, so steps appear in the document outline and can be navigated by heading. Check that h3 is the right level where you place the component — it isn't configurable. |
| Keyboard | Nothing is focusable, which is correct — the steps are explanatory, not interactive. |
| Sequence | Minor gap: steps are <div>s in a grid rather than an <ol>, so the sequence isn't conveyed structurally — no "1 of 3" announcement. The visible badge is read as text, which mitigates it, but an ordered list would be more robust. |
| Badges | Rendered as text, so "01" is announced. Custom badges should be readable out loud — a bare glyph or symbol won't be. |
| Icons | Decorative. Titles carry the meaning. |
| Reading order | DOM order matches visual order left to right, so the announced sequence matches the numbering. |
Tokens
| Token | Used for |
|---|---|
--phase-learn / --phase-plan / --phase-facilitate / --phase-reflect (and -light pairs) | Badge and icon accent per colour key |
--gray-100 / --gray-200 | Neutral key accent and card borders |
--color-ink-muted | Description text |
--space-4 / --space-6 / --space-8 | Grid gap and internal step spacing |
CSS Classes
| Class | Purpose |
|---|---|
.ws-how-steps | Grid container |
.ws-how-steps--cols-2 / --cols-3 / --cols-4 | Column count |
.ws-how-steps--learn / --plan / --facilitate / --reflect / --neutral | Colour keys |
.ws-how-step | An individual step |
.ws-how-step__header | Badge and icon row |
.ws-how-step__body | Title and description block |
.ws-how-step__title | The <h3> |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_how_steps() helper function |
includes/components/how-steps.php | Template — grid, auto-numbering, and step markup |
includes/components/components.css | Styles (.ws-how-steps and .ws-how-step rules) |