Steps¶
A responsive grid of process steps, each with an icon, optional number, title, description, and CTA link. Best for: "how it works", onboarding flows, process sections, numbered feature lists.
📷 Hero image
Target file: assets/img/steps/hero.webp
A three-column grid of process steps on a Light background, each column showing an icon stacked above a bold title and a short description. Include a large two-digit number (01, 02, 03) as a subtle watermark behind or beside each step, drawn in the Primary color. The icons sit in circular Primary background badges. Captured at desktop width.
At a glance¶
Process Numbered Grid
- What it does: renders a column grid (set per breakpoint) of step items. Each step can show an icon, an optional auto-incrementing two-digit number (01, 02, 03...), a title, a rich-text description, and an optional CTA link. The icon can sit on top of the text or beside it.
- Best used for: explaining a sequence - sign up, set up, launch - where each step needs a short blurb and maybe a link.
- Not the right fit if: your milestones are tied to dates on a connected line (use Timeline), or you just need a plain benefits grid (use Features).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Steps.
- Drag it into your page.
- Open Click to update content › Steps and set each step's Icon type, Title, and Description.
- To number the steps, turn on Show number.
- To add a per-step link, fill in CTA link text and, optionally, Add icon to CTA with a CTA icon.
- On the Style tab, set Columns per breakpoint, icon placement, and (optionally) card wrappers.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Icon stacked above the title and description.
📷 Result
Target file: recipe-icon-on-top-grid-default.webp
A three-up grid of steps with the icon centered above each title and description, no numbers and no card chrome, on a plain background.
| Field | Set to |
|---|---|
| Preset Settings › Icon › Icon position | top |
| Layout settings › Columns | 3 / 2 / 1 |
| Content › Show number | off |
Icon beside the text, unlocking the icon-to-content gap.
📷 Result
Target file: recipe-side-icon-row.webp
Each step laid out with a circular Primary icon badge to the left and the title and description to its right, generous gap between the icon and the text.
| Field | Set to |
|---|---|
| Icon › Icon position | left |
| Icon › Gap between icon and content [desktop] | gap-2xl |
| Icon › Icon background | bg-primary |
| Icon › Roundness of background | round-100 |
Large outlined 01/02/03 numbers as a watermark.
📷 Result
Target file: recipe-numbered-process-outlined.webp
Large outlined 01, 02, 03 numerals stroked in the Primary color at reduced opacity sitting as a watermark behind each step's icon and text.
| Field | Set to |
|---|---|
| Content › Show number | on |
| Number › Style of number | stroke |
| Number › Stroke color | stroke-primary |
| Number › Opacity of element | 50 |
Bordered, shadowed, padded cards.
📷 Result
Target file: recipe-card-style.webp
Each step wrapped in a bordered, softly shadowed, rounded and padded card, arranged three across on desktop.
| Field | Set to |
|---|---|
| Card › Make a card | on |
| Card › Border › Show border | on |
| Card › Shadow › Card shadow | light-shadow |
| Card › Round corner › Card round corner | round-m |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Show step numbers | Content › Show number |
| Outlined number watermark | Number › Style of number = stroke |
| Icon beside the text | Icon › Icon position = left or right |
| Add a per-step link | Step › CTA link text (+ Add icon to CTA) |
| Icon from a custom SVG | Step › Icon type = add svg code |
| Wrap steps in cards | Card › Make a card |
| Glass-effect cards | Card › Background › Add blur in background |
| Circle icon background | Icon › Roundness of background = round-100 (with a background set) |
| 4-up / 2-up / 1-up | Layout › Columns = 4 / 2 / 1 |
| Underlined CTA links | CTA link › Add underline |
Field reference¶
The editor is split into a Content tab and a Style tab. Groups below match the HubSpot editor. (180 fields total - expand each group as needed.)
Content tab¶
Click to update content - Steps (repeater)
| Field | Type | Default |
|---|---|---|
| Icon type | choice (none / library / upload / svg) | no_icon |
| Library icon / Upload icon / Svg code | icon / image / text | Bahai (SOLID) |
| Show title / Title | boolean / text | on / Step |
| Show description / Description | boolean / richtext | on |
| CTA link text | text | Learn more |
| Add icon to CTA / CTA icon | boolean / icon | off / Arrow Right |
Show number (module-level) toggles the auto 01/02/03 numbers and reveals the Number styling group.
Section background settings / Drag to section name / Developer use only
Standard section background Type, an anchor Section name, and a per-module Add custom css here field.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings (Style)
Color (bg-* tokens), gradient, image/video overlay + position, blur, parallax, and dual radial glow (color / position / size / opacity).
Section divider + spacing settings
- Divider type:
none/shape(25 shapes) /border/shadow. - Spacing: Top (
top-xl), Bottom (bottom-xl), Left (left-m), Right (right-m). Top and Bottom also acceptcustom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Columns: per breakpoint (default 3 / 2 / 1).
- Gap between column: per breakpoint (default 24).
- Section wrapper container + Inner content container: independent width + alignment.
Card
| Field | Type | Default |
|---|---|---|
| Content alignment | choice (left / right / center) | left |
| Make a card | boolean | off |
| Background (+ glass blur) | color / gradient / custom | none |
| Border | toggle + width + color | off |
| Card padding | spacing (desktop/tablet/mobile) | 24px all |
| Card shadow | choice | shadow-none |
| Card round corner | choice (round-0 to round-xxl) | round-s |
Preset Settings - Icon
| Field | Type | Default |
|---|---|---|
| Icon position | choice (top / left / right) | top |
| Gap between icon and content (desktop/mobile) | choice (gap-*) | gap-2xl / gap-l |
| Icon size (desktop/mobile) | number | 34 / 28 |
| Icon color | choice (none / text tokens) | none |
| Padding around icon (desktop/mobile) | number | 0 |
| Icon background (+ glass blur) | choice (bg-* / gradient / custom) | none |
| Roundness of background | choice | round-100 |
Preset Settings - Number
| Field | Type | Default |
|---|---|---|
| Font style | choice (font-primary / font-secondary) | font-secondary |
| Style of number | choice (stroke / fill) | fill |
| Stroke width / Stroke color | choice | stroke-1 / stroke-primary |
| Color | choice (text tokens / default) | default |
| Opacity of element | number | 50 |
| Font size (desktop/tablet/mobile) | number | 80 / 60 / 48 |
| Font weight / Line height / Letter spacing | choice / number | 700 / 1.1 / 0 |
| Make font bold | boolean | on |
Preset Settings - Title, Description, CTA link
- Title: heading tag (h1 to h6, default h5), transform, color, spacing, letter spacing.
- Description: typo preset, color (incl. custom), spacing.
- CTA link: color, font family, icon size, icon-link gap, underline + offset, bold.
Tips & gotchas¶
Numbers are automatic
Turn on Show number and the module numbers steps as 01, 02, 03... in order. You do not type them per step.
Side icons unlock gap fields
The icon-to-content gap fields only apply when Icon position is left or right. With top they have no effect.
Icon background needs padding
The icon's background shape only shows once you add Spacing around icon. Combine it with round-100 for a circular badge.
Frequently asked questions¶
Do I have to type 01, 02, 03 into each step myself?
No. Turn on module-level Show number and the module numbers every step automatically in order, so adding, removing, or reordering steps keeps the numbering correct without retyping anything.
Why isn't the gap between my icon and text changing?
Gap between icon and content only applies when Icon › Icon position is left or right. With the default top position the icon sits above the text instead, so that gap field has no effect there.
Why doesn't my icon show a circular background?
Set an Icon background color and give it some Spacing around icon first, the background shape only becomes visible once there's padding for it to fill, then set Roundness of background to round-100 for a full circle.
Can I connect my steps with a line, like a timeline?
No, Steps renders a plain grid with no connecting line. For milestones tied to a visual timeline use Timeline instead.
How many columns can I show per row?
Up to 6 on desktop, tablet, and mobile independently (default 3 / 2 / 1). Set each in Layout settings › Columns.
How do I get large outlined numbers sitting behind each step?
Turn on Show number, set Number › Style of number to stroke, pick a Stroke color, and lower Opacity of element (50 is a good starting point) so the numeral reads as a watermark rather than solid text.
Related modules¶
- Timeline: a dated vertical line when milestones are tied to time.
- Features: a plain benefits/feature grid.
- Tab: switchable panels for grouped content.
- Section Title: a heading + intro to sit above your steps.