Source: dist/css/bespoke_all.css, line 122
Example
Default styling
This component represents a variation of the wizard navigation with chevrons that includes an active step and completed steps. It is commonly used to indicate the progress and current status within a multi-step process or wizard.
- Login
- Eligibility Check
- Progress Check
- CMP Status
This component represents a variation of the wizard navigation with chevrons that includes an active step and completed steps. It is commonly used to indicate the progress and current status within a multi-step process or wizard.
<ol class="bg_white br_1 br_black-4 br_solid c_black flex flex_row font-size_down-1 font_bold font_display items_center lh_0 p_0 shadow_overlap-light ul_none user-select_none w_auto wizard-nav_w-chevrons">
<li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle completed">
<i class="fas fa-check inline"></i>
<span class="Login">Login</span>
</li>
<li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle active">
<i class="fas fa-lock inline"></i>
<span class="Login">Eligibility Check</span>
</li>
<li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
<i class="fas fa-lock inline"></i>
<span class="Login">Progress Check</span>
</li>
<li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
<i class="fas fa-lock inline"></i>
<span class="Login m-r_3">CMP Status</span>
</li>
</ol>