Back to site

Process Steps

Step-by-step cards for showing onboarding, rollout, or delivery sequences.

Delivery flow

A simple sequence from brief to handoff

Keep the sales story concrete by showing what the engagement actually looks like after the kickoff call.

Step 01

Align on scope

Audit the current site, define priorities, and agree on the first release target.

Step 02

Build reusable sections

Turn repeatable patterns into page sections so future pages are assembled instead of rebuilt.

Step 03

Hand over an editable system

Give editors a page structure they can update in CloudCannon without reopening development work.

View components 
---
import Button from "@core-elements/button/Button.astro";
import ProcessSteps from "@page-sections/info-blocks/process-steps/ProcessSteps.astro";
---

<ProcessSteps
backgroundColor="base" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "View components",
      "hideText": false,
      "link": "/component-docs/",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" eyebrow="Delivery flow" heading="A simple sequence from brief to handoff" paddingVertical="4xl" steps={
  [
    {
      "step": "Step 01",
      "title": "Align on scope",
      "description": "Audit the current site, define priorities, and agree on the first release target.",
      "iconName": "clipboard-document-list",
      "iconColor": "blue"
    },
    {
      "step": "Step 02",
      "title": "Build reusable sections",
      "description": "Turn repeatable patterns into page sections so future pages are assembled instead of rebuilt.",
      "iconName": "cube",
      "iconColor": "purple"
    },
    {
      "step": "Step 03",
      "title": "Hand over an editable system",
      "description": "Give editors a page structure they can update in CloudCannon without reopening development work.",
      "iconName": "rocket-launch",
      "iconColor": "green"
    }
  ]
} subtext="Keep the sales story concrete by showing what the engagement actually looks like after the kickoff call."
/>
---
blocks:
  _component: page-sections/info-blocks/process-steps
  eyebrow: Delivery flow
  heading: A simple sequence from brief to handoff
  subtext: Keep the sales story concrete by showing what the engagement actually looks like after the kickoff call.
  steps:
    - step: Step 01
      title: Align on scope
      description: Audit the current site, define priorities, and agree on the first release target.
      iconName: clipboard-document-list
      iconColor: blue
    - step: Step 02
      title: Build reusable sections
      description: Turn repeatable patterns into page sections so future pages are assembled instead of rebuilt.
      iconName: cube
      iconColor: purple
    - step: Step 03
      title: Hand over an editable system
      description: Give editors a page structure they can update in CloudCannon without reopening development work.
      iconName: rocket-launch
      iconColor: green
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: View components
      hideText: false
      link: /component-docs/
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Overview

Use Process Steps when visitors need to understand what happens next before they commit. It works well for onboarding, service delivery, implementation phases, and any sequence that benefits from a numbered rhythm instead of a generic feature list.

Properties

eyebrow string | default: How it works

Optional eyebrow text shown above the section heading.

heading string | default: Move from kickoff to launch without guesswork

Main heading for the process steps section.

subtext string | default: Break complex workflows into a small number of concrete next steps.

Supporting copy beneath the heading.

steps array | default: array

Cards describing each step in the process.

Item Properties:

step string | default: Step 01

Small overline text used to label the step number or phase.

title string | default: Define the brief

Main heading for the step card.

description string | default: Clarify the problem, timeline, and deliverables for the team.

Supporting copy describing what happens in this step.

iconName enum | default: clipboard-document-list

Icon displayed in the step card.

iconColor enum | default: blue

Accent color applied to the icon.

Accepted values:
  • default
  • blue
  • green
  • yellow
  • orange
  • red
  • purple
  • pink
  • cyan

buttonSections array | default: array

Optional buttons displayed below the steps.

colorScheme enum | default: inherit

Color scheme theme applied to the section wrapper.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: base

Background color used behind the section.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight

paddingVertical enum | default: 4xl

Vertical padding for the section.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
  • 5xl
  • 6xl