steps process how-it-works workflow landing-page steps process workflow how-it-works numbered how it works steps section process flow with numbered steps
Steps Base
Fetch pattern JSON:
curl https://webspire.de/patterns/steps/base.json base.html
<section class="ws-steps bg-[var(--ws-steps-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-accent)]">How it works</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl">Three steps to launch</h2>
<p class="mt-4 text-pretty text-base text-[var(--ws-steps-text-soft)]">Get started in minutes — no configuration, no dependencies, no build step required.</p>
</div>
<div class="relative mt-14">
<!-- Connecting line (visible on lg) -->
<div class="absolute left-0 right-0 top-8 hidden h-px bg-[var(--ws-steps-line)] lg:block" aria-hidden="true"></div>
<div class="grid gap-10 lg:grid-cols-3">
<div class="relative text-center">
<div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-[var(--ws-steps-accent)] bg-[var(--ws-steps-bg)] text-xl font-bold text-[var(--ws-steps-accent)]">1</div>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-steps-text)]">Browse patterns</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-steps-text-soft)]">Explore the registry by family, category, or search intent. Every entry has a live preview and responsive demo.</p>
</div>
<div class="relative text-center">
<div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-[var(--ws-steps-accent)] bg-[var(--ws-steps-bg)] text-xl font-bold text-[var(--ws-steps-accent)]">2</div>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-steps-text)]">Copy the code</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-steps-text-soft)]">One click copies production-ready HTML with Tailwind utilities. Astro and Web Component variants are auto-generated.</p>
</div>
<div class="relative text-center">
<div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-[var(--ws-steps-accent)] bg-[var(--ws-steps-bg)] text-xl font-bold text-[var(--ws-steps-accent)]">3</div>
<h3 class="mt-5 text-lg font-semibold text-[var(--ws-steps-text)]">Ship it</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-steps-text-soft)]">Paste into your project and customize. Accessible, responsive, and dark-mode-ready from the start — zero runtime overhead.</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
stepsprocesshow-it-worksworkflowlanding-page
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| steps | Yes | Array of numbered step items. |
Horizontal three-step process section with numbered circles connected by a line. Stacks vertically on mobile. Use for onboarding flows, product explanations, or setup instructions.