Skip to content

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

  1. In the HubSpot page editor, click Add and search for Steps.
  2. Drag it into your page.
  3. Open Click to update content › Steps and set each step's Choose icon, Title, and Description.
  4. To number the steps, turn on Showing numbers for process.
  5. To add a per-step link, turn on Show CTA link and set the CTA link + text.
  6. 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 › Showing numbers for process 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 › Showing numbers for process 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 › Showing numbers for process
Outlined number watermark Number › Style of number = stroke
Icon beside the text Icon › Icon position = left or right
Add a per-step link Step › Show CTA link + CTA link/text
Icon from a custom SVG Step › Choose icon = 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
Choose icon 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
Show CTA link / CTA link / CTA link text boolean / link / text off / Learn more
Add icon to CTA / CTA icon boolean / icon off / Arrow Right

Showing numbers for process (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 accept custom, 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
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 Showing numbers for process 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 Padding around icon. Combine it with round-100 for a circular badge.

  • 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.