Heroes & Sections

How It Works — Steps

Numbered step sequence with a connecting line on desktop, stacked on mobile.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add how-it-works-steps

Built for astro.

Full docs for How It Works — Steps →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.0

How It Works — Steps

Process

From brief to live in four steps

The same pipeline every Velocity X fork follows.

1
Discovery call

We learn the brand, the audience, and what the old site got wrong.
2
Fork + brand.json

Stock template forks, brand identity and copy pages wired from JSON.
3
Custom home build

Home page composed from the component catalog for that industry.
4
Ship + iterate

Live on Netlify, then we tune based on real traffic.

Props

Name	Type	Required	Default
eyebrow	string	No
title	string	No
sub	string	No
headingLevel	1 \| 2 \| 3 \| 4 \| 5 \| 6	Yes
steps	Step[]	Yes
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/how-it-works-steps/HowItWorksSteps.astro

Using the How It Works — Steps component

Install it with velocityx add how-it-works-steps. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

How It Works — Steps

From brief to live in four steps

Discovery call

Fork + brand.json

Custom home build

Ship + iterate

Props

File this creates

Using the How It Works — Steps component

Related components