Steps

Progress tracker for multi-step processes.

Markup

<div class="af-steps">
  <div class="af-step af-is-complete">
    <div class="af-step-number">
      1
    </div>
    <div class="af-step-label">
      Step 1
    </div>
  </div>
  <div class="af-step-connector">
  </div>
  <div class="af-step af-is-complete">
    <div class="af-step-number">
      2
    </div>
    <div class="af-step-label">
      Step 2
    </div>
  </div>
  <div class="af-step-connector">
  </div>
  <div class="af-step af-is-active">
    <div class="af-step-number">
      3
    </div>
    <div class="af-step-label">
      Step 3
    </div>
  </div>
  <div class="af-step-connector">
  </div>
  <div class="af-step">
    <div class="af-step-number">
      4
    </div>
    <div class="af-step-label">
      Step 4
    </div>
  </div>
</div>

States

• af-is-complete - Completed step
• af-is-active - Current/active step
• (no modifier) - Upcoming step

Live example

1

Step 1

2

Step 2

3

Step 3

4

Step 4