Progress stepper test 1

This stepper example is to help resolve the AMI Make a payment stepper and uses the Kendo stepper as a starting point.

← Index page

Example 01: Step 1 active

Code

<div class="active" tabindex="0">
  <span aria-hidden="true">Search</span>
  <span aria-current="step" class="sr-only">
    You are currently on step 1 of 3. Search.
  </span>
</div>

<div>
  <span aria-hidden="true">Confirm</span>
  <span class="sr-only">
    Step 2 of 3. Confirm your details. Not completed.
  </span>
</div>

<div>
  <span aria-hidden="true">Pay</span>
  <span class="sr-only">
    Step 3 of 3. Make a payment. Not completed.
  </span>
</div>

Dummy link after

Example 02: Step 2 active

Code

<div>
  <span aria-hidden="true">Search</span>
  <span class="sr-only">
    Step 1 of 3. Search. Completed.
  </span>
</div>

<div class="active" tabindex="0">
  <span aria-hidden="true">Confirm</span>
  <span aria-current="step" class="sr-only">
    You are currently on step 2 of 3. Confirm your details.
  </span>
</div>

<div>
  <span aria-hidden="true">Pay</span>
  <span class="sr-only">
    Step 3 of 3. Make a payment. Not completed.
  </span>
</div>

Dummy link after

Example 03: Step 3 active

Code

<div>
  <div>
    <span aria-hidden="true">Search</span>
    <span class="sr-only">
      Step 1 of 3. Search. Completed.
    </span>
  </div>

  <div>
    <span aria-hidden="true">Confirm</span>
    <span class="sr-only">
      Step 2 of 3. Confirm your details. Completed.
    </span>
  </div>

  <div class="active" tabindex="0">
    <span aria-hidden="true">Pay</span>
    <span aria-current="step" class="sr-only">
      You are currently on step 3 of 3. Make a payment.
    </span>
  </div>
</div>

← Index page