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

Family

steps

Tier

base

Kind

section

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.