Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

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

9.3.3 No Results

When the results are empty the user is presented with a message.

Example

Default styling

OH NO! We couldn't find any results for your search.

Search Help

It is easy to search for a session, but its also easy to have a typo. Check your spelling and try again.


Click the `Clear Search` button to return to all sessions.

<article class="c_black font_0 br-t_3 br_solid br_radius isolation_isolate shadow_overlap-light bg_white br_black-4 bg_warning-n1 m-y_5 m-x_3">
    <div class="br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative">
        <div class="br-b_1 br_solid br_black-4" >
            <div class="p_4 p-b_2 flex flex_column flex_row:lg gap-x_4 gap-x_5:lg">
                <header class="c_white">
                    <h2 class="font_2  c_white font_display font_bold lh_1">
                       <span class="font-size_up-2 block uppercase"><i class="fas fa-exclamation-triangle"></i> OH NO!</span>
                       <span class="font-size_down inline-block lh_0 m-t_2">We couldn't find any results for your search.</span>
                    </h2>
                    <h3 class="font_0 font_bold font_copy lh_0 m-b_2 m-t_4 uppercase">Search Help</h3>
                    <p class="font_copy m-b_4 lh_2 font_0">
                    It is easy to search for a session, but its also easy to have a typo. Check your spelling and try again.
                    <hr>
                    Click the `Clear Search` button to return to all sessions.
                    </p>
                </header>
                <div class="flex_grow m-x_auto m-l_auto:lg m-r_0:lg w_100 max-w_10:md flex flex_column items_center justify_center">
                    <aside class="flex flex_none flex_column gap-y_3 m-l_auto:md  max-w_30:md p-b_4 p-b_4:md w_100">
                          <nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
                            <a href="#" aria-label="navigate to" class="br_1 br_solid br_white-3 btn btn-secondary flex_auto shadow_overlap-light">Clear Search <i class="fas fa-times p-l_3"></i></a>
                          </nav>
                    </aside>                </div>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n3 justify_start p_3 br-br_radius br-bl_radius bg_warning-n3 br_solid br_1 br-t_0 br_black-3">
    </div>
</article>
Copy Code