Skip to content

Heroes & Sections

How It Works — Steps

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

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add how-it-works-steps
Props & docs

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

AstroReactTailwind CSSNew

How It Works — Steps

How It Works — Steps

Live preview of the How It Works — Steps component

Process

From brief to live in four steps

The same pipeline every Velocity X fork follows.

  1. 1

    Discovery call

    We learn the brand, the audience, and what the old site got wrong.

  2. 2

    Fork + brand.json

    Stock template forks, brand identity and copy pages wired from JSON.

  3. 3

    Custom home build

    Home page composed from the component catalog for that industry.

  4. 4

    Ship + iterate

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

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the How It Works — Steps component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Browse all →