PatternLab (0.1.259)

# Progress Wizard

WARNING

TODO: A.B.E.M. Naming Style / update class names

.c-wizard > .c-wizard__step[.-current]

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

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
  • Step 6
hide 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!
hide code 
<ul class="c-wizard">
    <li class="c-wizard__step -has-icon">
        <span class="c-wizard__step__icon far fa-play-circle"></span>
        Signatur erstellen
    </li>
    <li class="c-wizard__step -current -has-icon">
        <span class="c-wizard__step__icon far fa-sms"></span>
        TAN eingeben
    </li>
    <li class="c-wizard__step -has-icon">
        <span class="c-wizard__step__icon far fa-file-download"></span>
        Fertig!
    </li>
</ul>

# Fullwidth

.c-wizard.-fullwidth

  • Step 1
  • Step 2
  • Step 3
  • Step 4
hide 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>

# Arrow Type Progress Wizard

.c-arrow-wizard

Plausibilitätsprüfung
Risikobeurteilung
Prüfanweisung
Herstellungsanweisung
Herstellungsprotokoll
Prüfprotokoll
hide code 
 <div class="c-arrow-wizard">
    <div class="c-arrow-wizard__item -has-arrow">
        <div class="c-icon -small h-block h-bg-color-white"><div class="c-icon__bg labor-select-plausi"></div></div>
        <span class="c-arrow-wizard__text">Plausibilitätsprüfung</span>
    </div>
    <div class="c-arrow-wizard__item -has-arrow">
        <div class="c-icon -small h-block h-bg-color-white"><div class="c-icon__bg labor-select-rb"></div></div>
        <span class="c-arrow-wizard__text">Risikobeurteilung</span>
    </div>
    <div class="c-arrow-wizard__item">
        <div class="c-icon -small h-block h-bg-color-white"><div class="c-icon__bg labor-select-pa"></div></div>
        <span class="c-arrow-wizard__text h-color-white">Prüfanweisung</span>
    </div>
    <div class="c-arrow-wizard__item -has-arrow m-t-xs">
        <div class="c-icon -small h-block h-bg-color-white"><div class="c-icon__bg labor-select-ha"></div></div>
        <span class="c-arrow-wizard__text h-color-white">Herstellungsanweisung</span>
    </div>
    <div class="c-arrow-wizard__item -has-arrow m-t-xs">
        <div class="c-icon -small h-block h-bg-color-white"><div class="c-icon__bg labor-select-hp"></div></div>
        <span class="c-arrow-wizard__text h-color-white">Herstellungsprotokoll</span>
    </div>
    <div class="c-arrow-wizard__item m-t-xs">
        <div class="c-icon -small h-block h-bg-color-white"><div class="c-icon__bg labor-select-pp"></div></div>
        <span class="c-arrow-wizard__text h-color-white">Prüfprotokoll</span>
    </div>
    </div>

← Action Menu →