Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/virtual_boot.css, line 13412

14.1 Umbrella Navigation

This is the banner that uses as the umbrella brand of the conferneces.

Example

Default styling

VIRTUAL EDUCATION
Welcome Josh G.
Change Conferences
<div class="c_white flex flex_wrap p_4 p_3:md umbrella_nav">
    <div class="flex_auto float_right font_1 font_display font_xbold  inline-block lh_2 p-l_3:md p-y_2"> VIRTUAL EDUCATION <div class="font_light font_n1 lh_0">Welcome Josh G.</div>
    </div>
    <div class="flex flex_auto m-l_auto m-t_3 m-t_0:md w_100 w_auto:md">
        <div class="flex_grow p-x_3:md">
            <div class="font_bold font_n2 h_2lh m-b_2 text_right:md uppercase vertical-align_middle">Change Conferences</div>
            <div class="">
                <select name="" id="" class="bg_primary br_radius br_white-5 flex_auto w_100">
                    <option value="">Athletic Heart</option>
                    <option value="">ACC 20</option>
                    <option value="">Covid</option>
                </select>
            </div>
        </div>
        <button class="absolute bg_highlight br_radius btn btn-primary c_black flex_shrink font_bold h:bg_highlight-n3 h:c_white lh_2 m-l_0 r_0:md r_4 relative:md t_0:md t_4"> <span class="display_none inline:md">Login</span><i class="fa-sign-out-alt fas p-l_2"></i> </button>
    </div>
</div>
Copy Code