Components Kiosk
Kiosk

A kiosk is used to display a user flow as a simple step-by-step task.

Steps count in circle
  1. Create Account
  2. Login
  3. Payment
  4. Confirm
  5. Finish 
                        
                        
<div class="ds-kiosk">
    <ol class="ds-kiosk-steps">
        <li class="ds-kiosk-step is-complete" data-step="1">
            <span class="ds-kiosk-text">Create Account</span>
        </li>
        <li class="ds-kiosk-step is-complete" data-step="2">
        <span class="ds-kiosk-text">Login</span>
        </li>
        <li class="ds-kiosk-step is-active" data-step="3">
        <span class="ds-kiosk-text">Payment</span>
        </li>
        <li class="ds-kiosk-step " data-step="4">
        <span class="ds-kiosk-text">Confirm</span>
        </li>
        <li class="ds-kiosk-step " data-step="5">
        <span class="ds-kiosk-text">Finish</span>
        </li>

    </ol>
</div>
No count in circle
  1. Create Account
  2. Login
  3. Payment
  4. Confirm
  5. Finish 
                    
                    
<div class="ds-kiosk">
    <ol class="ds-kiosk-steps ds-kiosk-style-no-count">
        <li class="ds-kiosk-step is-complete" data-step="1">
            <span class="ds-kiosk-text">Create Account</span>
        </li>
        <li class="ds-kiosk-step is-complete" data-step="2">
        <span class="ds-kiosk-text">Logint</span>
        </li>
        <li class="ds-kiosk-step is-active" data-step="3">
        <span class="ds-kiosk-text">Payment</span>
        </li>
        <li class="ds-kiosk-step " data-step="4">
        <span class="ds-kiosk-text">Confirm</span>
        </li>
        <li class="ds-kiosk-step " data-step="5">
        <span class="ds-kiosk-text">Finish</span>
        </li>

    </ol>
</div>
Bar stepper for cards
  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4
  5. Step 5 
                        
                        
<div class="ds-kiosk">
    <ol class="ds-kiosk-steps ds-kiosk-style-bar-stepper">
        <li class="ds-kiosk-step is-complete" data-step="1">
            <span class="ds-kiosk-text">Create Account</span>
        </li>
        <li class="ds-kiosk-step is-complete" data-step="2">
        <span class="ds-kiosk-text">Logint</span>
        </li>
        <li class="ds-kiosk-step is-active" data-step="3">
        <span class="ds-kiosk-text">Payment</span>
        </li>
        <li class="ds-kiosk-step " data-step="4">
        <span class="ds-kiosk-text">Confirm</span>
        </li>
        <li class="ds-kiosk-step " data-step="5">
        <span class="ds-kiosk-text">Finish</span>
        </li>

    </ol>
</div>

Guidelines

  • Always show the active, completed, and incomplete steps in the process.
  • Step labels must be short, simple, and precise.