Steps Bar Stable

The Steps Bar provides progress overview to the user in interactive multi-stage processes. It motivates the user to complete the process.

Usage Code

Edit Data

Edit patient data

Select Patient

Choose a patient

Choose Exam

Select the exam type before scanning

<div class="steps-bar">
    <div class="steps-bar__item  is-completed ">
      <div class="steps-bar__number">1</div>
      <div class="steps-bar__title">Edit Data</div>
      <div class="steps-bar__text">Edit patient data</div>
    </div>
    <div class="steps-bar__item ">
      <div class="steps-bar__number">2</div>
      <div class="steps-bar__title">Select Patient</div>
      <div class="steps-bar__text">Choose a patient</div>
    </div>
    <div class="steps-bar__item ">
      <div class="steps-bar__number">3</div>
      <div class="steps-bar__title">Choose Exam</div>
      <div class="steps-bar__text">Select the exam type before scanning</div>
    </div>
</div>