Stepper

A CSS-only progress indicator for multistep flows. Built on a semantic <ol> list, each step carries a circular marker, a connector line, a title, and an optional description. Steps are styled with state classes — is-complete , is-active , and is-disabled — directly in the HTML. Fully themeable with CSS custom properties; no JavaScript required.

Quick Start

Build an <ol class="wf-stepper"> with one li.wf-stepper-item per step. Each item holds a .wf-stepper-track (marker + connector line) and a .wf-stepper-content (title + description). Apply is-complete , is-active , or is-disabled to the li to reflect step state. The connector line on the last item is hidden automatically.

Account Create your account
Profile Fill in your details
3

Billing Payment information
4

Confirm Review & submit

<ol class="wf-stepper">

  <!-- Complete -->
  <li class="wf-stepper-item is-complete">
    <div class="wf-stepper-track">
      <span class="wf-stepper-marker"><i class="icon check"></i></span>
      <div class="wf-stepper-line"></div>
    </div>
    <div class="wf-stepper-content">
      <strong class="wf-stepper-title">Account</strong>
      <span class="wf-stepper-description">Create your account</span>
    </div>
  </li>

  <!-- Active -->
  <li class="wf-stepper-item is-active">
    <div class="wf-stepper-track">
      <span class="wf-stepper-marker">2</span>
      <div class="wf-stepper-line"></div>
    </div>
    <div class="wf-stepper-content">
      <strong class="wf-stepper-title">Billing</strong>
      <span class="wf-stepper-description">Payment information</span>
    </div>
  </li>

  <!-- Incomplete (default) -->
  <li class="wf-stepper-item">
    <div class="wf-stepper-track">
      <span class="wf-stepper-marker">3</span>
      <div class="wf-stepper-line"></div>
    </div>
    <div class="wf-stepper-content">
      <strong class="wf-stepper-title">Confirm</strong>
    </div>
  </li>

  <!-- Disabled -->
  <li class="wf-stepper-item is-disabled">...</li>

</ol>

Vertical

Add wf-stepper-vertical to the <ol> to stack steps top to bottom. The connector line becomes a vertical bar. Use wf-step-size-* (1–6) on each li to control the minimum height of the connector line so it accommodates the content beside it. Horizontal steppers also collapse to this vertical layout automatically on narrow screens (< 672 px).

Choose a plan Select the subscription that fits your team.
2

Payment details Enter your billing address and card information.
3

Confirm order Review and submit your order.

<ol class="wf-stepper wf-stepper-vertical">
  <li class="wf-stepper-item is-complete wf-step-size-3">
    <div class="wf-stepper-track">
      <span class="wf-stepper-marker"><i class="icon check"></i></span>
      <div class="wf-stepper-line"></div>
    </div>
    <div class="wf-stepper-content">
      <strong class="wf-stepper-title">Choose a plan</strong>
      <span class="wf-stepper-description">Select the subscription that fits your team.</span>
    </div>
  </li>
  <li class="wf-stepper-item is-active wf-step-size-4">
    <div class="wf-stepper-track">
      <span class="wf-stepper-marker">2</span>
      <div class="wf-stepper-line"></div>
    </div>
    <div class="wf-stepper-content">
      <strong class="wf-stepper-title">Payment details</strong>
      <span class="wf-stepper-description">Enter your billing address and card information.</span>
    </div>
  </li>
  <li class="wf-stepper-item is-disabled">
    <div class="wf-stepper-track">
      <span class="wf-stepper-marker">3</span>
      <div class="wf-stepper-line"></div>
    </div>
    <div class="wf-stepper-content">
      <strong class="wf-stepper-title">Confirm order</strong>
    </div>
  </li>
</ol>

Sizes

Add wf-stepper-sm or wf-stepper-lg to the <ol> to adjust the marker diameter and text size. The default is medium. You can also set the --wf-step-size CSS variable directly for arbitrary sizes.

Small (wf-stepper-sm)

Account
2

Profile
3

Confirm

Medium (default)

Account
2

Profile
3

Confirm

Large (wf-stepper-lg)

Account
2

Profile
3

Confirm

<ol class="wf-stepper wf-stepper-sm">…</ol>
<ol class="wf-stepper">…</ol>
<ol class="wf-stepper wf-stepper-lg">…</ol>

Compact

Add wf-stepper-compact to hide the .wf-stepper-description elements and show only step titles. Useful for navigation bars and smaller spaces. Combine with wf-stepper-left to left-align the content block.

Cart Hidden in compact mode
Shipping Hidden in compact mode
3

Payment Hidden in compact mode
4

Review Hidden in compact mode

<!-- Compact: hides .wf-stepper-description -->
<ol class="wf-stepper wf-stepper-compact">
  <li class="wf-stepper-item is-complete">…</li>
  <li class="wf-stepper-item is-active">…</li>
  <li class="wf-stepper-item is-disabled">…</li>
</ol>

<!-- Left-aligned content -->
<ol class="wf-stepper wf-stepper-vertical wf-stepper-left">
  …
</ol>

Class Reference

Step state classes

Apply to li.wf-stepper-item .

Class	Description
`is-complete`	Step is done. Marker fills green; the connector line turns green.
`is-active`	Current step. Marker fills the primary color with a focus ring; the connector turns semi-primary.
`is-disabled`	Step is not yet reachable. Item renders at 60% opacity.

Modifier classes

Apply to ol.wf-stepper unless noted.

Class	Description
`wf-stepper-vertical`	Stack steps vertically. The connector line becomes a vertical bar.
`wf-stepper-compact`	Hide all `.wf-stepper-description` elements.
`wf-stepper-left`	Left-align the content block. Useful with vertical or wide layouts.
`wf-stepper-sm`	Smaller marker (1.65rem) and title text.
`wf-stepper-lg`	Larger marker (2.5rem) and text sizes.
`wf-step-size-n`	Set on `li.wf-stepper-item`. Controls the minimum connector line height in vertical mode. n = 1–6 maps to 1rem–6rem.

CSS Custom Properties

Override on .wf-stepper or any ancestor to theme the whole stepper or individual steps.

Property	Default	Description
`--wf-step-size`	`2rem`	Marker circle diameter.
`--wf-step-height`	`4rem`	Minimum connector line height in vertical mode (used by `wf-step-size-*`).
`--wf-step-gap`	`0.5rem`	Gap between step items.
`--wf-step-line`	border color	Default connector line and marker border color.
`--wf-step-line-active`	primary 55%	Connector line color for the active step.
`--wf-step-line-complete`	green 65%	Connector line color after a completed step.
`--wf-step-complete-bg`	`#16a34a`	Completed step marker fill color.
`--wf-step-active-bg`	primary color	Active step marker fill color.
`--wf-step-active-ring`	primary 28%	Focus ring around the active step marker.
`--wf-step-bg`	surface color	Default (incomplete) marker background.