Steps Vertical

Fetch pattern JSON: curl https://webspire.de/patterns/steps/vertical.json

vertical.html

<section class="ws-steps bg-[var(--ws-steps-bg)] py-20">
  <div class="mx-auto max-w-2xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl">Getting started</h2>
      <p class="mt-3 text-lg text-[var(--ws-steps-text-soft)]">Follow these steps to set up your account.</p>
    </div>

    <div class="mt-16">
      <div class="relative space-y-10 pl-14">
        <!-- Vertical connector line -->
        <div class="absolute bottom-4 left-[19px] top-0 w-0.5 bg-[var(--ws-steps-line)]" aria-hidden="true"></div>

        <!-- Step 1: Completed -->
        <div class="relative">
          <div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-[var(--ws-steps-accent-text)]">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
          </div>
          <h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Create account</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Sign up in seconds with your email or social account. No credit card required.</p>
        </div>

        <!-- Step 2: Completed -->
        <div class="relative">
          <div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-[var(--ws-steps-accent-text)]">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
          </div>
          <h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Configure project</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Set up your workspace, choose your preferences, and invite team members.</p>
        </div>

        <!-- Step 3: Current -->
        <div class="relative">
          <div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-steps-accent)] bg-[var(--ws-steps-bg)] text-sm font-bold text-[var(--ws-steps-accent)] ring-4 ring-indigo-100">3</div>
          <h3 class="text-base font-semibold text-[var(--ws-steps-accent)]">Import data</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Connect your existing tools or upload data directly from CSV or API.</p>
        </div>

        <!-- Step 4: Future -->
        <div class="relative">
          <div class="absolute -left-14 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-steps-line)] bg-[var(--ws-steps-bg)] text-sm font-bold text-[var(--ws-steps-text-soft)]">4</div>
          <h3 class="text-base font-semibold text-[var(--ws-steps-text-soft)]">Go live</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Launch your project and start tracking results in real time.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Details

Family

steps

Tier

enhanced

Kind

section

Extends

steps/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

stepsverticalprocesssteppertimelineprogress

Slots

Name	Required	Description
heading	No	Section title and optional subtitle.
steps	Yes	Vertical list of step items with circle, title, and description.

Vertical 4-step indicator with a connecting line between numbered circles. Completed steps show a filled circle with a checkmark, the current step has an accent-colored ring, and future steps are muted gray. Each step includes a title and description to the right of the circle. Ideal for onboarding flows, setup wizards, or checkout progress.