Arches: Arches

Arches:Arches

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/bespoke_all.css, line 90

1.3 Wizard Progress with Chevrons

This component represents a wizard Progress with chevrons. It is commonly used in multi-step processes or wizards to guide users through sequential steps. By utilizing this wizard Progress component, you can guide users through different steps or stages of a process while providing visual cues using icons and step labels.

Example

Default styling

<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 active">
        <i class="fas fa-sign-in-alt 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">
        <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>
Copy Code