Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/library_boot.css, line 9877

9.2.3 Header

Home page branding splash with ka site search.

SubComponent: Sub.Section.HeaderPanel - Search Bar

<header class="p_3 p_0:md ">
    <section class="br_radius overflow_hidden relative z_1">
        <picture class="w_100">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1440x250.jpg" media="(min-width: 1200px)">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1200x250.jpg" media="(min-width: 1024px)">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_768x200.jpg" media="(min-width: 768px)">
            <source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg" media="(min-width: 400px)">
            <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg" class="w_100" alt="">
        </picture>
    </section>
    <div class="m_auto m-t_n4 t_n4 t_n5:lg m-t_n5:lg max-w_60:lg max-w_40:md p-x_3 p-x_5:md z_2 relative">
        <div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2  p_4 p_5:lg">
            <div class="input-holder flex flex_row self_end relative w_100 p_2 p_3:md">
                <input id="input_uniqueTextAndButton" name="input_uniqueTextAndButton" type="text" placeholder="Search" class="br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 br-tl_square br-br_square br-r_0 font_2"/>
                <button  class="disabled b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto" >
                <i class="fas fa-search"></i>
                <span class="inline-block:md display_none">Search</span>
                </button>
            </div>    <nav class="utility-nav p-t_3 p-t_4:lg font_n3 font_0:md font_1:lg ">
                <ul class="flex flex_row ul_none justify_center">
                    <li class="text_center p-x_2 block p-x_4:md lh_1">
                        <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                            ><i class="fal fa-star  block inline:md"></i><span class="display_none inline:md"> featured</span></a
                        >
                    </li>
                    <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
                        <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                            ><i class="fal fa-sitemap  block inline:md"></i><span class="display_none inline:md"> hot topics</span></a
                        >
                    </li>
                    <li class="text_center p-x_2 block p-x_4:md lh_1 text_center  br-l_1 br_solid br_black-4">
                        <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                        ><i class="fal fa-heart block inline:md"></i><span class="display_none inline:md"> saved</span></a
                    >
                    </li>
                    <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
                        <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                        ><i class="fal fa-play  block inline:md"></i><span class="display_none inline:md"> continue watching</span></a
                    >
                    </li>
                    <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
                        <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                        ><i class="fal fa-sync  block inline:md"></i><span class="display_none inline:md"> watch again </span></a
                    >
                    </li>
                </ul>
            </nav></div>    </div>
</header>
Copy Code