Section reference › Content

Process steps `"type": "process"`

A row of numbered steps (01, 02, 03...) or icons, each with a short title and text. Use it to explain how you work, how to get started or what happens after someone books.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "process",
  "tone": "alt",
  "eyebrow": "How it works",
  "title": "From first call to launch in four steps",
  "steps": [
    {
      "icon": "chat-dots",
      "title": "Discovery call",
      "text": "We learn about your goals, audience and timeline in a free 30-minute call."
    },
    {
      "icon": "pencil-square",
      "title": "Plan & design",
      "text": "You get a clear proposal, then designs to review and refine together."
    },
    {
      "icon": "code-slash",
      "title": "Build",
      "text": "We build, test and fine-tune everything on a private preview link."
    },
    {
      "icon": "rocket-takeoff",
      "title": "Launch & support",
      "text": "We go live, train your team and stay on hand for the first 90 days."
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`steps`	array	—	The steps, in order. See the "steps" fields.
`columns`	number	`number of steps, max 4`	Steps per row on large screens. Values: `1 \| 2 \| 3 \| 4 \| 6`

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `steps`#

Option	Type	Default	Description
`title`	string	—	Step name.
`text`	string	—	One or two sentences explaining the step.
`icon`	string	—	Bootstrap Icons name shown instead of the step number (optional).

Tips#

Leave out "icon" on all steps to show numbers 01, 02, 03... instead.
3 or 4 steps look best. With 5 steps set "columns": 3 (5 is not a supported column count and falls back to 3 anyway).

Editing it in the HTML files#

Each step is a .step with the number or icon in .step-marker, the title in h3.step-title and the text in the p.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/services.html (source src/demos/creative-agency/pages/services.json)
Real Estate: template/real-estate/home-2.html (source src/demos/real-estate/pages/home-2.json)
Corporate: template/corporate/careers.html (source src/demos/corporate/pages/careers.json)
Finance: template/finance/book-a-call.html (source src/demos/finance/pages/book-a-call.json)
Law Firm: template/law-firm/consultation.html (source src/demos/law-firm/pages/consultation.json)
SaaS Product: template/saas/home-2.html (source src/demos/saas/pages/home-2.json)
Mobile App: template/mobile-app/download.html (source src/demos/mobile-app/pages/download.json)
Tech Conference: template/conference/workshops.html (source src/demos/conference/pages/workshops.json)
Online Academy: template/education/admissions.html (source src/demos/education/pages/admissions.json)
Restaurant: template/restaurant/private-dining.html (source src/demos/restaurant/pages/private-dining.json)
Coffee Shop: template/cafe/coffee.html (source src/demos/cafe/pages/coffee.json)
Hotel & Resort: template/hotel/experiences.html (source src/demos/hotel/pages/experiences.json)
Wedding: template/wedding/index.html (source src/demos/wedding/pages/index.json)
Gym & Fitness: template/gym/classes.html (source src/demos/gym/pages/classes.json)
Yoga Studio: template/yoga/beginners.html (source src/demos/yoga/pages/beginners.json)
Day Spa & Salon: template/spa/booking.html (source src/demos/spa/pages/booking.json)
Medical Clinic: template/medical/index.html (source src/demos/medical/pages/index.json)
Dental Clinic: template/dental/index.html (source src/demos/dental/pages/index.json)
Pet Care: template/pet-care/home-2.html (source src/demos/pet-care/pages/home-2.json)
Construction: template/construction/index.html (source src/demos/construction/pages/index.json)
Car Dealer: template/car-dealer/home-2.html (source src/demos/car-dealer/pages/home-2.json)
Travel Agency: template/travel/booking.html (source src/demos/travel/pages/booking.json)
Photographer: template/photography/booking.html (source src/demos/photography/pages/booking.json)
Architecture Studio: template/architecture/services.html (source src/demos/architecture/pages/services.json)
Interior Design: template/interior-design/booking.html (source src/demos/interior-design/pages/booking.json)
Portfolio: template/portfolio/home-2.html (source src/demos/portfolio/pages/home-2.json)
Fashion Store: template/fashion-store/size-guide.html (source src/demos/fashion-store/pages/size-guide.json)
Charity: template/charity/index.html (source src/demos/charity/pages/index.json)
Logistics: template/logistics/index.html (source src/demos/logistics/pages/index.json)

Process steps "type": "process"