Progress Wizard

The Progress Wizard is a component that shows the progress of a process in a visual way. It is used to guide the user through a process step by step.

WARNING

Use the a-tag only for the clickable steps in the wizard (-is-checked). The current/following steps should not be clickable.
TODO: Fix pharma4u Themed Wizard

Progress Wizard Bar

.c-wizard-bar[.-is-checked, .-is-active, .-is-disabled]

Plausicheck Herstellungsanweisung

Herstellungsprotokoll

Plausicheck Risikobeurteilung Prüfanweisung Herstellungs­anweisung Herstellungs­protokoll

Plausicheck

Risiko­beurteilung

Prüfanweisung

Herstellungs­anweisung

Herstellungs­protokoll

Show Code

<div class="c-wizard-bar m-t-xl">
    <a href="#" class="c-wizard-bar__item -has-arrow -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-1" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Plausicheck
        </span>
    </a>
    <a href="#" class="c-wizard-bar__item -has-arrow -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-2" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Herstellungsanweisung
        </span>
    </a>
    <div class="c-wizard-bar__item -is-active">
        <i class="c-wizard-bar__icon fas fa-circle-3" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Herstellungsprotokoll
        </span>
    </div>
</div>
<div class="c-wizard-bar m-t-xl">
    <a href="#" class="c-wizard-bar__item -has-arrow -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-1" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Plausicheck
        </span>
    </a>
    <a href="#" class="c-wizard-bar__item -has-arrow -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-2" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Risikobeurteilung
        </span>
    </a>
    <a href="#" class="c-wizard-bar__item -has-arrow -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-3" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Prüfanweisung
        </span>
    </a>
    <a href="#" class="c-wizard-bar__item -has-arrow -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-4" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Herstellungs&shy;anweisung
        </span>
    </a>
    <a href="#" class="c-wizard-bar__item -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-5" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Herstellungs&shy;protokoll
        </span>
    </a>
</div>
<div class="c-wizard-bar m-y-xl">
    <a href="#" class="c-wizard-bar__item -has-arrow -is-checked">
        <i class="c-wizard-bar__icon fas fa-circle-1" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Plausicheck
        </span>
    </a>
    <div class="c-wizard-bar__item -has-arrow -is-active">
        <i class="c-wizard-bar__icon fas fa-circle-2" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Risiko&shy;beurteilung
        </span>
    </div>
    <div class="c-wizard-bar__item -has-arrow -is-disabled">
        <i class="c-wizard-bar__icon fas fa-circle-3" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Prüfanweisung
        </span>
    </div>
    <div class="c-wizard-bar__item -has-arrow -is-disabled">
        <i class="c-wizard-bar__icon fas fa-circle-4" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Herstellungs&shy;anweisung
        </span>
    </div>
    <div class="c-wizard-bar__item -is-disabled">
        <i class="c-wizard-bar__icon fas fa-circle-5" aria-hidden="true"></i>
        <span class="c-wizard-bar__text">
          Herstellungs&shy;protokoll
        </span>
    </div>
</div>

Version: Related Pages

Ausgangsstoffprüfung

Fertigarzneimittelprüfung Medizinproduktprüfung Packmittelprüfung

Show Code

<div class="c-wizard-bar -related-pages">
    <div class="c-wizard-bar__item -has-arrow -is-active">
    <span class="c-wizard-bar__text">
      Ausgangsstoffprüfung
    </span>
    </div>
    <a href="#" class="c-wizard-bar__item -is-related">
    <span class="c-wizard-bar__text">
      Fertigarzneimittelprüfung
    </span>
    </a>
    <a href="#" class="c-wizard-bar__item -is-related">
    <span class="c-wizard-bar__text">
      Medizinproduktprüfung
    </span>
    </a>
    <a href="#" class="c-wizard-bar__item -is-related">
    <span class="c-wizard-bar__text">
      Packmittelprüfung
    </span>
    </a>
</div>

Default Progress Wizard

.c-wizard > .c-wizard__step[.-current] deprecated: .c-wizard > li[.cur]

• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6

Show Code

<ul class="c-wizard">
  <li class="c-wizard__step">Step 1</li>
  <li class="c-wizard__step -current">Step 2</li>
  <li class="c-wizard__step">Step 3</li>
  <li class="c-wizard__step">Step 4</li>
  <li class="c-wizard__step">Step 5</li>
  <li class="c-wizard__step">Step 6</li>
</ul>

Progress Bar Modifiers

with Icons

.c-wizard > .c-wizard__step[.-has-icon]

• Signatur erstellen
• TAN eingeben
• Fertig!

Show Code

<ul class="c-wizard">
  <li class="c-wizard__step -has-icon">
    <span class="c-wizard__step__icon far fa-play-circle" aria-hidden="true"></span>
    Signatur erstellen
  </li>
  <li class="c-wizard__step -current -has-icon">
    <span class="c-wizard__step__icon far fa-sms" aria-hidden="true"></span>
    TAN eingeben
  </li>
  <li class="c-wizard__step -has-icon">
    <span class="c-wizard__step__icon far fa-file-download" aria-hidden="true"></span>
    Fertig!
  </li>
</ul>

Fullwidth

.c-wizard.-fullwidth

.::: include-html <<< ./examples/sample-fw.html

Show Code

<ul class="c-wizard -fullwidth">
  <li class="c-wizard__step">Step 1</li>
  <li class="c-wizard__step -current">Step 2</li>
  <li class="c-wizard__step">Step 3</li>
  <li class="c-wizard__step">Step 4</li>
</ul>