Source: dist/css/library_boot.css, line 10684
5.1.6 Search Page
The sub pages have a common layouts.
Component.Navigation.Breadcrumb - Breadcrumb Bar
Example
Default styling
-
Type Ahead FilterFiltering Bycollapse
-
-
Primary Categorycollapse
-
-
Drugs Genericcollapse
-
NOTE:
This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..<div class="BODY_TAG-stand-in grid bg_black-4 w_100 p_3:md p_2">
<div class="page-wrapper grid p_2 p_3:md isolation_isolate br_radius bg_white-7">
<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
<div style="height: calc(100vh - 1.5rem);" class="display_none flex:md sticky t_3 grid-area_menuArea z_4">
<nav style="height: calc(100vh - 1.5rem); width: 35rem;" id="navigation" class="absolute h_100vh shadow_emboss-light filter_blur overflow_hidden br_radius bg_black-7 flex:md flex_column:md justify_between p-t_0 p-b_3 p-l_3 p-r_3 p-b_4:md p-t_4:md p-r_0:md font_4:lg font_3:md font_2 transition_3 font_display nav-mined">
<ul class="flex flex_column:md flex_row ul_none justify_around justify_start:md gap_3 w_100 w_auto:md">
<li id="mainDesktopNavTouchToggle" class="display_none flex:touch flex_row justify_end p-x_3 m-l_n3 ">
<span class="aspect_1x1 bg_accent br_round c_inherit-all c_white-8 grid h:c_white justify_center p_3 self_center text_center w_auto shadow_n3"><i class="block fa-chevron-circle-right fa-fw fas icon [rotate_180] self_center text-shadow_black-1 transition_2"></i></span>
</li>
<li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active">
<a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../home"><i class="icon fas fa-fw fa-home-heart p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 active font_n2 font_3:md font_4:lg display_none:md opacity_0">Home</span></a>
</li>
<li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
<a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md " href="../search"><i class="icon fas fa-fw fa-search p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Search</span></a>
</li>
<li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
<a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../saved"><i class="icon fas fa-fw fa-heart p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Saved</span></a>
</li>
<li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
<a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../credits"><i class="icon fas fa-fw fa-award p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Credits</span></a>
</li>
<li class="nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled cursor_not-allowed opacity_3 ">
<a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md" href="../watching"><i class="icon fas fa-fw fa-play p-x_2:md p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Watching</span></a>
</li>
</ul>
<ul class="flex_column:md flex_row ul_none justify_center gap_3 flex">
<li class="nav-item flex_auto br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light">
<a class="p_3 c_inherit-all h:undecorated flex flex_column flex_row:md"><i class="icon fas fa-fw fa-sign-out-alt p-x_2 p-y_3 p-y_0:md self_center"></i><span class="label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0">Log Out</span></a>
</li>
</ul>
</nav>
</div>
<nav id="navigation_mobile" class="block display_none:md shadow_emboss-light filter_blur br_radius bg_black-6 p_2 sticky t_3 z_4">
<ul class="flex flex_row ul_none justify_between">
<li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active">
<a class="c_inherit-all flex flex_column h:undecorated p_3" href="../home"><i class="icon fas fa-fw fa-home-heart p-y_2 self_center"></i><span class="label self_center lowercase lh_0 active font_n2 h_1h">Home</span></a>
</li>
<li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
<a class="c_inherit-all flex flex_column h:undecorated p_3" href="../search"><i class="icon fas fa-fw fa-search p-y_2 self_center"></i><span class="label self_center lowercase lh_0 font_n2 h_1h ">Search</span></a>
</li>
<li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
<a class="c_inherit-all flex flex_column h:undecorated p_3" href="../saved"><i class="icon fas fa-fw fa-heart p-y_2 self_center"></i><span class="label self_center lowercase lh_0 font_n2 h_1h nowrap ">Saved</span></a>
</li>
<li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light ">
<a class="c_inherit-all flex flex_column h:undecorated p_3" href="../saved"><i class="icon fas fa-fw fa-award p-y_2 self_center"></i><span class="label self_center lowercase lh_0 font_n2 h_1h ">Credits</span></a>
</li>
<li class="nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled opacity_3 cursor_not-allowed ">
<a class="c_inherit-all flex flex_column h:undecorated p_3" href="../watching"><i class="icon fas fa-fw fa-play p-y_2 self_center"></i><span class="label self_center lowercase lh_0 font_n2 h_1h ">Watching</span></a>
</li>
<li class="nav-item flex_auto br_radius c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light">
<a class="c_inherit-all flex flex_column h:undecorated p_3"><i class="icon fas fa-fw fa-sign-out-alt p-y_2 self_center"></i><span class="label self_center lowercase lh_0 font_n2 nowrap h_1h">Log Out</span></a>
</li>
</ul>
</nav>
<script src="../js/library/library.main-nav.js"></script>
<!-- These Styles are just for the styleguide and are not to be included with the pattern. --> <header class="grid-area_headerArea flex flex_row items_center justify_start flex_none z_1 inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2 p_2 p_3:md p_4:lg">
<nav class="overflow_hidden lh_0 font_ui font_2 font_regular c_black-7 " aria-label="Breadcrumb">
<ol class="flex flex_no-wrap flex_row items_center overflow_hidden ul_none w_100 max-w_100">
<li class="flex flex_row flex_none h:c_primary lh_2 m-b_1 relative">
<i class="fal fa-home fa-fw flex_none self_center c_primary font-size_up "></i>
<a href="../home" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap" title="navigate to home page">
<span class="display_none flex_auto inline:md self_center m-l_3">Home</span>
</a>
</li> <li class="flex flex_row flex_auto flex_50 h:c_primary lh_2 m-b_1 overflow_hidden relative">
<i class="fal fa-chevron-left fa-fw m-x_3 flex_none self_center c_primary font-size_down"></i>
<a href="../watching" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap" title="navigate to X Page">
<span class=" flex_auto self_center">Page Type Label</span>
<span class=" flex_auto self_center display_inline:md display_none">Session Shorten Name</span>
</a>
</li> <li class="flex flex_row flex_auto flex_50 lh_2 m-b_1 overflow_hidden relative c_black-7">
<i class="fal fa-chevron-left c_primary-n2 m-x_3 self_center font-size_down"></i>
<div class="flex flex_row flex_nowrap overflow_ellipsis nowrap">
<span class=" flex_auto self_center">Page Type Label</span>
<span class=" flex_auto self_center display_inline:md display_none font_medium">Presentation Shorten Name</span>
</div>
</li> </ol>
</nav>
</header> <section class="grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md font_1:lg font_0">
<div id="filterZone" class="{aspect_1_1:md} {nav-mined} nav-maxed self_start bg_black-3 br_1 br_black-2 br_radius br_solid flex_auto p_2 p_3:md shadow_emboss-light transition_3 flex flex_column grid-area_filterArea order_last order_unset:md">
<nav id="FilterNavContainer" class="flex_auto overflow_hidden self_stretch font_4:lg font_3:md font_2 font_display font_display">
<ul class="flex flex_column:md flex_row gap_3 justify_start:md ul_none w_100 w_auto:md">
<li class="a:bg_primary a:c_white a:shadow_overlap-light {aspect_1_1:md} br_radius c_white-8 flex_none grid h:bg_black-7 h:c_white h:shadow_overlap-light nav-item p_0:md p_3">
<a class="c_inherit-all h:undecorated p_3 lh_1 m-x_n1">
<i class="far fa-filter p-x_2:md p-y_3 p-y_0:md"></i>
<span class="font-size_down label lh_0 lowercase self_center font_medium {display_none:md}">Filter</span>
</a>
</li>
</ul>
</nav>
<ul id="filterFacets" class="ul_none font_n1 {display_none} opacity_none transition_3 min-h_30:md">
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter1">
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_0 lh_1 font-size_up font_medium">Type Ahead Filter</div>
</header>
<main class="p_1 collapse show">
<div class="p_3 flex flex_row">
<input class="br-tr_square br-br_square" type="text" name="" id="" placeholder="Filter Name">
<button class="btn btn-secondary br-tl_square br-bl_square"><i class="fas fa-users"></i></button>
</div>
</main>
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8">Filtering By</div>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#collapseTypeAhead" role="button" aria-expanded="true" aria-controls="#collapseTypeAhead">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </header>
<main id="collapseTypeAhead" class="p_1 collapse show" style="">
<ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_0922" id="checkfacetfacet_0922" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_0922" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_0922</span></label></div>
<div class="">
<button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
</div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_1777" id="checkfacetfacet_1777" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_1777" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_1777</span></label></div>
<div class="">
<button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
</div>
<!---->
</div>
</li> </ul>
<footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
</main>
</li> <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter2" >
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_0 lh_1 font-size_up font_medium">Primary Category </div>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseFacetGroupPrimaryID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupPrimaryID">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </header>
<main id="CollapseFacetGroupPrimaryID" class="p_1 collapse show" style="">
<ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_2777" id="checkfacet_2777" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2777" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2777ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_7799" id="checkfacet_7799" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7799" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7799ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_3859" id="checkfacet_3859" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3859" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3859ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_5116" id="checkfacet_5116" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5116" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5116ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_0779" id="checkfacet_0779" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0779" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0779ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> </ul>
<footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
</main>
</li> <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter3" >
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_0 lh_1 font-size_up font_medium">Drugs Generic </div>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseFacetGroupID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupID">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </header>
<main id="CollapseFacetGroupID" class="p_1 collapse show" style="">
<ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_5091" id="checkfacet_5091" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5091" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5091ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_2516" id="checkfacet_2516" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2516" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2516ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8342" id="checkfacet_8342" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8342" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8342ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8813" id="checkfacet_8813" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8813" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8813ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_9372" id="checkfacet_9372" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9372" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9372ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> </ul>
<footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
</main>
</li> </ul>
<script>
let filterZone = document.getElementById("filterZone");
let filterZoneNav = filterZone.querySelector("nav");
let filterFacets = filterZone.querySelector("#filterFacets");
let filterZoneExpanded = true;
filterZoneNav.addEventListener("click", function () {
if (filterZoneExpanded) {
filterFacets.classList.toggle("opacity_0");
filterFacets.classList.toggle("opacity_none");
setTimeout(function () {
filterFacets.classList.toggle("{display_none}");
filterFacets.classList.toggle("display_none");
filterFacets.classList.toggle("min-h_0:md");
filterFacets.classList.toggle("min-h_30:md");
filterZone.classList.remove("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
filterZone.classList.add("aspect_1_1:md", "nav-mined", "{nav-maxed}");
filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
filterZoneExpanded = false;
}, 300);
return;
} else {
filterZone.classList.add("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
filterZone.classList.remove("aspect_1_1:md", "nav-mined", "{nav-maxed}");
filterFacets.classList.toggle("min-h_0:md");
filterFacets.classList.toggle("min-h_30:md");
filterFacets.classList.toggle("{display_none}");
filterFacets.classList.toggle("display_none");
setTimeout(function () {
filterFacets.classList.toggle("opacity_0");
filterFacets.classList.toggle("opacity_none");
filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
filterZoneExpanded = true;
}, 300);
return;
}
});
</script>
</div> <div class="grid-area_contentArea row-start_1" id="SearchBarTop">
<div class=" sticky jump-buttons_top 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><i class="m-l_2 fas fa-search"></i></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 class="flex_row flex gap-x_3">
<div class="input-holder flex_auto flex flex_row self_end relative w_100">
<input id="input_uniqueTextAnda" name="input_uniqueTextAnda" 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 font_2:lg font_1:md font_0">
<button class="absolute b_0 br-bl_square br-tl_square btn btn-primary flex_none grid items_center justify_center r_0 t_0" onClick="Search()">
<i class="fas fa-search"></i>
</button>
</div>
<button class="disabled flex_none grid items_center justify_center btn btn-alert">
<i class="fas fa-times"></i>
</button>
</div>
</div> <div class="p-y_2 p-y_3:md p-y_4:lg">
<div class="c_secondary-n1 font_medium font-size_down-2 font_ui p_2 ">
<ul class="ul_inline-pipe">
<li>
<ul class="ul_inline-comma">
<li class="font_bold no-after uppercase">Results:</li>
<li class="c_accent-n1">230</li>
</ul>
</li>
<li>
<ul class="ul_inline-comma">
<li class="font_bold no-after uppercase">Filters:</li>
<li><a class="h:underline c_primary-n1 c_primary-n2">Category A <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
<li><a class="h:underline c_primary-n1 c_primary-n2">Tag B <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
<li><a class="h:underline c_primary-n1 c_primary-n2">Tag C <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
</ul>
</li>
</ul>
</div> </div>
<div class="inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md ">
<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
<ul class="flex_column flex_row:md nav">
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink" role="tab" aria-controls="ActiveLink" aria-selected="true"
class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
href="#">Active</a>
</li> <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink" role="tab" aria-controls="BasicLink" aria-selected="true"
class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li> </li>
</ul>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
<ul class="ul_none flex flex_column gap_3 gap_4:lg p-y_2 p-y_3:md p-y_4:lg">
<li class=""><div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_row font_ui justify_start relative w_100">
<main
class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<a class="c_inherit-all expanded-click-area z_1">
Clinical Update for the Valvular Arteriosclerosis Electrocardiographic Arrhythmia Electrocardiographic Electrocardiogram Electrocardiogram Side Effect Arrhythmia Clinical
</a>
</h2>
<ul
class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block">4</span>
presentations
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul>
</main>
<aside class="flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1">
<ul
class="b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
<li class="flex_auto p-b_3 m-b_auto">
<a class="inline-block m-x_n3 m-t_n1 Arteriosclerosis Electrocardiographic Arrhythmia Electrocardiographic Electrocardiogram Electrocardiogram Side Effect Arrhythmia Clinical ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </li>
</ul>
</aside>
</div>
</article>
</div></li>
<li class=""><div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_row font_ui justify_start relative w_100">
<main
class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<a class="c_inherit-all expanded-click-area z_1">
Clinical Update for the Valvular Myocardial Valvular Arrhythmia Arteriosclerosis
</a>
</h2>
<ul
class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block">4</span>
presentations
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul>
</main>
<aside class="flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1">
<ul
class="b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
<li class="flex_auto p-b_3 m-b_auto">
<a class="inline-block m-x_n3 m-t_n1 Myocardial Valvular Arrhythmia Arteriosclerosis ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </li>
</ul>
</aside>
</div>
</article>
</div></li>
<li class=""><div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_row font_ui justify_start relative w_100">
<main
class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<a class="c_inherit-all expanded-click-area z_1">
Clinical Update for the Valvular Valvular Cardiovascular
</a>
</h2>
<ul
class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block">4</span>
presentations
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul>
</main>
<aside class="flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1">
<ul
class="b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
<li class="flex_auto p-b_3 m-b_auto">
<a class="inline-block m-x_n3 m-t_n1 Valvular Cardiovascular ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </li>
</ul>
</aside>
</div>
</article>
</div></li>
</ul>
<div class=""><button class="block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5">Load More</button></div>
</div>
<div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
<ul class="ul_none flex flex_column gap_3 gap_4:lg p-y_2 p-y_3:md p-y_4:lg">
<li class=""> <div>
<article class="flex flex_grow flex_column w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate p_4 ">
<div class="font_display m-b_3 lh_2 ">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
<span class="absolute t_n2 z_3 p-x_3 r_0">
<a class="inline-block m-x_n3 m-t_n1 ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </span>
</span>
<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> Cardiovascular Update for the Clinician III</strong>
<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Arrhythmia Electrocardiographic Electrocardiogram Side Effect Chest Pain Valvular Myocardial Chest Pain Cardiovascular Myocardial Arteriosclerosis Pericardial Arteriosclerosis Clinical
</a>
</h2>
</div>
<div class="c_black-8 font_copy font-size_down-1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul> </div>
<div class="p_2 p_3:md">
<aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
<strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
<ul class="ul_inline-pipe">
<li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 0:53</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 2:30</a></li>
</ul>
</aside> </div>
</article>
</div></li>
<li class=""> <div>
<article class="flex flex_grow flex_column w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate p_4 ">
<div class="font_display m-b_3 lh_2 ">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
<span class="absolute t_n2 z_3 p-x_3 r_0">
<a class="inline-block m-x_n3 m-t_n1 Side Effect Valvular Heart Disease Arteriosclerosis Valvular ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </span>
</span>
<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> Cardiovascular Update for the Clinician III</strong>
<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Arrhythmia Electrocardiographic Electrocardiogram Side Effect Chest Pain Valvular Myocardial Chest Pain Cardiovascular Myocardial Arteriosclerosis Pericardial Arteriosclerosis Clinical Side Effect Valvular Heart Disease Arteriosclerosis Valvular
</a>
</h2>
</div>
<div class="c_black-8 font_copy font-size_down-1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 Side Effect Valvular Heart Disease Arteriosclerosis Valvular ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 Side Effect Valvular Heart Disease Arteriosclerosis Valvular ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul> </div>
<div class="p_2 p_3:md">
<aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
<strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
<ul class="ul_inline-pipe">
<li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 0:53</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 2:30</a></li>
</ul>
</aside> </div>
</article>
</div></li>
<li class=""> <div>
<article class="flex flex_grow flex_column w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate p_4 ">
<div class="font_display m-b_3 lh_2 ">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
<span class="absolute t_n2 z_3 p-x_3 r_0">
<a class="inline-block m-x_n3 m-t_n1 Myocardial ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </span>
</span>
<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> Cardiovascular Update for the Clinician III</strong>
<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Arrhythmia Electrocardiographic Electrocardiogram Side Effect Chest Pain Valvular Myocardial Chest Pain Cardiovascular Myocardial Arteriosclerosis Pericardial Arteriosclerosis Clinical Myocardial
</a>
</h2>
</div>
<div class="c_black-8 font_copy font-size_down-1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 Myocardial ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 Myocardial ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul> </div>
<div class="p_2 p_3:md">
<aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
<strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
<ul class="ul_inline-pipe">
<li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 0:53</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 2:30</a></li>
</ul>
</aside> </div>
</article>
</div></li>
<li class=""> <div>
<article class="flex flex_grow flex_column w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate p_4 ">
<div class="font_display m-b_3 lh_2 ">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
<span class="absolute t_n2 z_3 p-x_3 r_0">
<a class="inline-block m-x_n3 m-t_n1 Myocardial Clinical Blood Vessel Side Effect ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </span>
</span>
<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> Cardiovascular Update for the Clinician III</strong>
<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Arrhythmia Electrocardiographic Electrocardiogram Side Effect Chest Pain Valvular Myocardial Chest Pain Cardiovascular Myocardial Arteriosclerosis Pericardial Arteriosclerosis Clinical Myocardial Clinical Blood Vessel Side Effect
</a>
</h2>
</div>
<div class="c_black-8 font_copy font-size_down-1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 Myocardial Clinical Blood Vessel Side Effect ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 Myocardial Clinical Blood Vessel Side Effect ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul> </div>
<div class="p_2 p_3:md">
<aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
<strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
<ul class="ul_inline-pipe">
<li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 0:53</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 2:30</a></li>
</ul>
</aside> </div>
</article>
</div></li>
</ul>
<div class=""><button class="block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5">Load More</button></div>
</div>
</div>
</div>
</div>
</section>
<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
<div id="subfooter" class="bg_primary-1 flex_auto font_n1 z_1 br_radius texture_dust shadow_emboss-light p_2 p_3:md p_4:lg col-start col-end_4">
<ul class="m_auto footer-bottom-links ul_none max-w_80">
<li class="inline p_2"><a href="//www.acc.org/footer-pages/media-center" class="c_white-6 h:c_white">Media Center</a></li>
<li class="inline p_2"><a href="//www.acc.org/footer-pages/quick-start-guide" class="c_white-6 h:c_white">ACC.org Quick Start Guide</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/advertising-and-sponsorship-policy">Advertising & Sponsorship Policy</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/clinical-content-disclaimer">Clinical Content Disclaimer</a> </li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/editorial-board">Editorial Board</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/privacy-policy">Privacy Policy</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/registered-user-agreement">Registered User Agreement</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/cookie-policy">Cookie Policy</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/member-hub-terms-of-use">Member Hub Terms of Use</a></li>
<li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/sitemap-acc.xml">Site Map</a> </li>
</ul> <!-- /footer-bottom-links -->
</div><!-- /subfooter --> <div id="logo" class="bg_white br_1 br_black-1 br_round br-br_radius br-tl_radius br_solid flex flex_none flex_row items_center justify_center shadow_bevel-light p_2 p_3:md p_4:lg col-start_4 col-end ">
<h2 class="logo_condensed w_100 max-w_20">American College of Cardiology</h2>
</div> </footer>
</div>
</div>
</div>