Steps

The steps section displays a process or how-it-works flow with numbered or icon-based steps. It supports three layout variants: horizontal (responsive grid), vertical (stacked with side markers), and cards (boxed horizontal). Optional connector lines visually link steps together.

Configuration

Basic Structure

yaml

sectionType: steps
classes: ''              # Optional: 'has-connectors', 'is-outlined'
text:
  title: 'How It Works'
  subTitle: 'Get started easily'
steps:
  layout: 'horizontal'   # 'horizontal', 'vertical', or 'cards'
  showNumbers: true      # Show numbered circles
  items:
    - title: 'Step One'
      description: 'Description text'
      icon: 'user-plus'  # Optional icon

Configuration Options

Layout Options

Layout	Description
`horizontal`	Responsive grid layout (default)
`vertical`	Stacked with markers on the left
`cards`	Boxed horizontal with borders

Style Modifiers (via classes)

Class	Description
`has-connectors`	Adds visual lines between steps
`is-outlined`	Outlined number circles instead of filled

Step Properties

Property	Type	Required	Description
`title`	string	Yes	Step title
`description`	string	No	Step description
`icon`	string	No	Icon name from the icon library

Icons

The steps section uses the site's icon library fromlib/layouts/icons/. Common icons for steps include:user-plus,settings,rocket,search,pen-tool,code,upload-cloud,check-square,users,layers,link,bar-chart,trending-up.