Steps

vel-src: steps.css

A progress indicator that guides users through a multi-step process, with horizontal and vertical layout options.

Class	Properties
vel-steps	Container for the step sequence (horizontal by default)
vel-step	Individual step wrapper element
vel-step-indicator	Circular badge showing step number or completion icon
vel-step-label	Step title text displayed below or beside the indicator
vel-step-description	Secondary descriptive text beneath the step label
vel-step-complete	Modifier on vel-step indicating a finished step
vel-step-active	Modifier on vel-step indicating the current in-progress step
vel-steps-vertical	Modifier on vel-steps to render steps in a vertical column
vel-step-content	Content area that appears below a step in vertical mode

Examples

Horizontal stepper

✓

Account

✓

Profile

Billing

Review

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <div class="vel-steps">
    <div class="vel-step vel-step-complete">
      <div class="vel-step-indicator">&#10003;</div>
      <div class="vel-step-label">Account</div>
    </div>
    <div class="vel-step vel-step-complete">
      <div class="vel-step-indicator">&#10003;</div>
      <div class="vel-step-label">Profile</div>
    </div>
    <div class="vel-step vel-step-active">
      <div class="vel-step-indicator">3</div>
      <div class="vel-step-label">Billing</div>
    </div>
    <div class="vel-step">
      <div class="vel-step-indicator">4</div>
      <div class="vel-step-label">Review</div>
    </div>
  </div>
</div>

Vertical stepper

✓

Create account

Provide your email and password.

Verify email

Check your inbox for a confirmation link.

Set up profile

Add your name, avatar, and preferences.

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <div class="vel-steps vel-steps-vertical">
    <div class="vel-step vel-step-complete">
      <div class="vel-step-indicator">&#10003;</div>
      <div class="vel-step-label">Create account</div>
      <div class="vel-step-description">Provide your email and password.</div>
      <div class="vel-step-content"></div>
    </div>
    <div class="vel-step vel-step-active">
      <div class="vel-step-indicator">2</div>
      <div class="vel-step-label">Verify email</div>
      <div class="vel-step-description">Check your inbox for a confirmation link.</div>
      <div class="vel-step-content"></div>
    </div>
    <div class="vel-step">
      <div class="vel-step-indicator">3</div>
      <div class="vel-step-label">Set up profile</div>
      <div class="vel-step-description">Add your name, avatar, and preferences.</div>
      <div class="vel-step-content"></div>
    </div>
  </div>
</div>