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 7804

10.14.7 Program Bar

Some events don't need a search bar the program bar remains because it is need to hide the jump links.

Example

Default styling

top

Program 

<div class=" sticky t_0 r_0 z_1">
<div class="absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3">
<!--  Helper Jump links -->
  <a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#SearchBarTop">
  <span><i class="fas fa-arrow-up"></i> top</span>
  </a>
  <a href="#FilterNavContainer" class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3">
  <span><i class="fas fa-arrow-down"></i><i class="m-l_2 fas fa-filter"></i></span>
  </a>
<!--  Helper Jump links -->
</div>
</div>
<div class="bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative" >
    <h1 class="c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between"><span>Program</span>
      <a href="#FilterNavContainer" class="absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0">
      <span><i class="fas fa-arrow-down"></i><i class="fas fa-filter"></i></span>
      </a>
    </h1>
</div>
Copy Code