Stepper

<div class="tng-stepper">
  <div class="tng-stepper-step">1</div>
  <div class="tng-stepper-divider"></div>
  <div class="tng-stepper-step">2</div>
</div>

1

2

Elements

Step

States

<button class="tng-stepper-step is-completed">
  <span class="sr-only">1</span>
  <i class="tng-icon icon-check" aria-label="Completed"></i>
</button>
<button class="tng-stepper-step is-active">2</button>
<button class="tng-stepper-step">3</button>

1 2 3

Label

<button class="tng-stepper-step is-active">
  <span>1</span>
  <p class="tng-stepper-step-label">Step Title</p>
</button>

1

Step Title

Divider

States

<div class="tng-stepper-divider"></div>
<div class="tng-stepper-divider is-completed"></div>

Module

<div class="tng-stepper">
  <button class="tng-stepper-step is-completed">
    <span class="sr-only">1</span>
    <i class="tng-icon icon-check" aria-label="Completed"></i>
    <p class="tng-stepper-step-label">
      <span class="tng-overflow-multiline-ellipsis">
        Step Title 1
      </span>
    </p>
  </button>
  <div class="tng-stepper-divider"></div>
  <button class="tng-stepper-step is-active">
    <span>2</span>
    <p class="tng-stepper-step-label">
      <span class="tng-overflow-multiline-ellipsis">
        Dealer, Time & Date
      </span>
    </p>
  </button>
  <div class="tng-stepper-divider"></div>
  <button class="tng-stepper-step">
    <span>3</span>
    <p class="tng-stepper-step-label">
      <span class="tng-overflow-multiline-ellipsis">
        Step Title 3
      </span>
    </p>
  </button>
  <div class="tng-stepper-divider"></div>
  <button class="tng-stepper-step">
    <span>4</span>
    <p class="tng-stepper-step-label">
      <span class="tng-overflow-multiline-ellipsis">
        Step Title 4
      </span>
    </p>
  </button>
</div>

1

Step Title 1

2

Dealer, Time & Date

3

Step Title 3

4

Step Title 4