Steps Section
A how-it-works block of numbered steps joined by a line that fills in ember as each step appears, with drawn mini UIs and a closing call to action.
Preview
How it works
From scattered requests to a calm week in three steps
Step 1: Bring your work in
Paste a board link or drop a CSV. Owners and dates map themselves.
Step 2: Plan the week together
Drag work into days. Everyone sees the same calm plan.
Step 3: Ship and review
Slips are flagged the day they happen. Friday’s review writes itself.
Set up in about 15 minutes
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id, title, description?, visual? }[] | — | Three or four steps; visual is a drawn mini UI (decorative). |
| eyebrow | ReactNode | — | Small label with an ember dot. |
| title | ReactNode | — | Heading; names the section (otherwise "How it works"). |
| description | ReactNode | — | Line under the heading. |
| cta | ReactNode | — | Closing call to action under the steps. |
| headingLevel | 2 | 3 | 2 | Heading level of the title; step titles are one level below. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.