Source: dist/css/library_boot.css, line 9353
6.1 Pages
Most of the pages in the design don't display correctly. in this styleguide because the the design is calculated off of the whole viewport.
Source: dist/css/library_boot.css, line 9625
6.1.1 Credit Page
Credits Pages
Example
Default styling
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..<a class="link" href="https://acc-style.github.io/PrototypingACCorg/library/credits/">LINK TO PROTOTYPE FOR THIS PAGE</a>Code Sample
Source: dist/css/library_boot.css, line 9812
6.1.2 Home
The sub pages have a common layouts.
Example
Default styling
Featured
Clinical Update for the Chest Pain Clinical Pericardial Valvular Electrocardiogram Clinical Pericardial Blood Vessel
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Chest Pain Clinical Pericardial Valvular Pericardial Pharmacologic Valvular Heart Disease Myocardial Arteriosclerosis
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Chest Pain Clinical Pericardial Valvular Cardiovascular Chest Pain Cardiovascular Blood Vessel Arteriosclerosis
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Chest Pain Clinical Pericardial Valvular Pharmacologic Valvular Blood Vessel
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Chest Pain Clinical Pericardial Valvular Electrocardiographic Side Effect
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Chest Pain Clinical Pericardial Valvular Blood Vessel Pericardial Blood Vessel
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Hot Topics
continue watching
-
Presentation of the findings Clinical Blood Vessel
-
Presentation of the findings Chest Pain Arteriosclerosis Valvular Clinical Clinical Pericardial Side Effect Electrocardiographic
-
Presentation of the findings Arteriosclerosis Pericardial Chest Pain Myocardial Electrocardiogram Clinical Valvular Heart Disease Clinical Pericardial
-
Presentation of the findings Pericardial Clinical Pericardial Valvular Heart Disease
-
Presentation of the findings Side Effect Chest Pain Arrhythmia Clinical Blood Vessel Arrhythmia
watch again
saved
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:md bg_black-4 w_100 p_3:md p_2">
<div class="page-wrapper grid:md 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="p_3 p_0:md grid-area_headerArea">
<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> <section class="grid:md flex flex_column columns_5 gap_4 grid-area_mainArea p-y_3 p-y_0:md font_1:lg font_0 w_100">
<div class="flex flex_column col-start col-end_5:lg col-end_4 font_0 font_1:lg font_ui font_regular w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_2 p_3:md p_4:lg">
<header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">Featured</h2></header> <div class="relative isolation_isolate overflow_hidden m-x_n2 m-x_n3:md m-x_n4:lg">
<div id="slider1" class=" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3 inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light ">
<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 Chest Pain Clinical Pericardial Valvular Electrocardiogram Clinical Pericardial Blood Vessel
</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 Electrocardiogram Clinical Pericardial Blood Vessel ">
<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> <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 Chest Pain Clinical Pericardial Valvular Pericardial Pharmacologic Valvular Heart Disease Myocardial 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 Pericardial Pharmacologic Valvular Heart Disease Myocardial 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> <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 Chest Pain Clinical Pericardial Valvular Cardiovascular Chest Pain Cardiovascular Blood Vessel 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 Cardiovascular Chest Pain Cardiovascular Blood Vessel 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> <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 Chest Pain Clinical Pericardial Valvular Electrocardiographic Blood Vessel Myocardial Chest Pain Chest Pain Side Effect Blood Vessel 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 Electrocardiographic Blood Vessel Myocardial Chest Pain Chest Pain Side Effect Blood Vessel 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> <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 Chest Pain Clinical Pericardial Valvular Pharmacologic Valvular Blood Vessel
</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 Pharmacologic Valvular Blood Vessel ">
<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> <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 Chest Pain Clinical Pericardial Valvular Valvular Heart Disease Side Effect Arteriosclerosis Arrhythmia Pericardial Cardiovascular Clinical 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 Heart Disease Side Effect Arteriosclerosis Arrhythmia Pericardial Cardiovascular Clinical 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> <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 Chest Pain Clinical Pericardial Valvular Electrocardiographic Side Effect
</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 Electrocardiographic 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> </li>
</ul>
</aside>
</div>
</article>
</div> <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 Chest Pain Clinical Pericardial Valvular Blood Vessel Pericardial Blood Vessel
</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 Blood Vessel Pericardial Blood Vessel ">
<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> </div>
<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider1-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="prev bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-left"></i>
</li>
<li class="next bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-right"></i>
</li>
</ul>
</div></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let args ={
items:1,
mouseDrag: true,
slideBy: "page",
swipeAngle: false,
autoplay: false,
controls: true,
nav: false,
edgePadding: 0,
loop:true,
edgePadding:48,
center:false,
gutter:16,
responsive: {
1: {
items: 1
},
768: {
items: 1
},
1200: {
items: 2
},
1400: {
items: 3
}
}};
let slider1 = tns({ container: '#slider1', controlsContainer: "#slider1-customize-controls", ...args });
});
</script> <footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from "Featured" <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer> <header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">Hot Topics</h2></header> <div class="p-y_3 relative m-x_n2 m-x_n3:md m-x_n4:lg">
<div class="tns-outer inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light font_0 font_ui font_regular" >
<div class="tns-ovh">
<div class="tns-inner" >
<div id="slider3" class=" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" >
<div class="tns-item tns-slide-active p-x_5">
<article class="bg_white br_1 br_black-1 br_radius br_solid flex flex_grow shadow_overlap-light w_100">
<div class="flex flex_row justify_start relative w_100">
<main class="flex flex_column flex_auto justify_between flex_auto p-l_4 p-x_4:md p-y_3 p-y_3:lg relative w_100 isolation_isolate reading-typography">
<h2 class="">
You don't have any previously Hot Topics presentations.
</h2>
<p>This collection is based off of your watching history. Come back here when you want to review or re-watch what you have previously viewed.</p>
</main>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider3-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-left opacity_3"></i>
</li>
<li class="disabled next bg_white-8 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-right opacity_3"></i>
</li>
</ul>
</div></div> <footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from "Hot Topics" <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer> </div>
<div class="flex flex_column col-start_5:lg col-end col-start_4 w_100">
<section class="font_0 font_1:lg font_ui font_regular flex_100 flex_auto inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_2 p_3:md p_4:lg">
<header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">continue watching</h2></header> <div class="font_n2 font_n1:lg relative isolation_isolate">
<ul class="flex flex_column justify_stretch gap_0 ul_none 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 p_4:lg">
<li class="flex flex_row font_ui justify_between br-t_1 br-b_1 br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius relative">
<h3 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto">
Presentation of the findings Clinical Blood Vessel
</h3>
<span class="flex_none flex flex_column items_center justify_center ">
<a class="font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light">
<i class="fas fa-play"></i>
</a>
</span>
</li> <li class="flex flex_row font_ui justify_between br-t_1 br-b_1 br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius relative">
<h3 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto">
Presentation of the findings Chest Pain Arteriosclerosis Valvular Clinical Clinical Pericardial Side Effect Electrocardiographic
</h3>
<span class="flex_none flex flex_column items_center justify_center ">
<a class="font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light">
<i class="fas fa-play"></i>
</a>
</span>
</li> <li class="flex flex_row font_ui justify_between br-t_1 br-b_1 br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius relative">
<h3 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto">
Presentation of the findings Arteriosclerosis Pericardial Chest Pain Myocardial Electrocardiogram Clinical Valvular Heart Disease Clinical Pericardial
</h3>
<span class="flex_none flex flex_column items_center justify_center ">
<a class="font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light">
<i class="fas fa-play"></i>
</a>
</span>
</li> <li class="flex flex_row font_ui justify_between br-t_1 br-b_1 br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius relative">
<h3 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto">
Presentation of the findings Pericardial Clinical Pericardial Valvular Heart Disease
</h3>
<span class="flex_none flex flex_column items_center justify_center ">
<a class="font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light">
<i class="fas fa-play"></i>
</a>
</span>
</li> <li class="flex flex_row font_ui justify_between br-t_1 br-b_1 br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius relative">
<h3 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto">
Presentation of the findings Side Effect Chest Pain Arrhythmia Clinical Blood Vessel Arrhythmia
</h3>
<span class="flex_none flex flex_column items_center justify_center ">
<a class="font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light">
<i class="fas fa-play"></i>
</a>
</span>
</li> </ul>
</div>
<footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from "continue watching" <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer> </section>
</div>
<div class="col-start col-end w_100">
<section class='font_0 font_1:lg font_ui font_regular flex_100 flex_auto inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2 p_2 p_3:md p_4:lg'> <header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">watch again</h2></header>
<div class="p-y_3 relative m-x_n2 m-x_n3:md m-x_n4:lg">
<div class="tns-outer inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light font_0 font_ui font_regular" >
<div class="tns-ovh">
<div class="tns-inner" >
<div id="slider3" class=" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" >
<div class="tns-item tns-slide-active p-x_5">
<article class="bg_white br_1 br_black-1 br_radius br_solid flex flex_grow shadow_overlap-light w_100">
<div class="flex flex_row justify_start relative w_100">
<main class="flex flex_column flex_auto justify_between flex_auto p-l_4 p-x_4:md p-y_3 p-y_3:lg relative w_100 isolation_isolate reading-typography">
<h2 class="">
You don't have any previously watch again presentations.
</h2>
<p>This collection is based off of your watching history. Come back here when you want to review or re-watch what you have previously viewed.</p>
</main>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider3-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-left opacity_3"></i>
</li>
<li class="disabled next bg_white-8 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-right opacity_3"></i>
</li>
</ul>
</div></div> <footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from "watch again" <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer> <header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">saved</h2></header> <div class="p-y_3 relative m-x_n2 m-x_n3:md m-x_n4:lg">
<div class="tns-outer inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light font_0 font_ui font_regular" >
<div class="tns-ovh">
<div class="tns-inner" >
<div id="slider3" class=" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" >
<div class="tns-item tns-slide-active p-x_5">
<article class="bg_white br_1 br_black-1 br_radius br_solid flex flex_grow shadow_overlap-light w_100">
<div class="flex flex_row justify_start relative w_100">
<main class="flex flex_column flex_auto justify_between flex_auto p-l_4 p-x_4:md p-y_3 p-y_3:lg relative w_100 isolation_isolate reading-typography">
<h2 class="">
You don't have any previously saved presentations.
</h2>
<p>This collection is based off of your watching history. Come back here when you want to review or re-watch what you have previously viewed.</p>
</main>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider3-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-left opacity_3"></i>
</li>
<li class="disabled next bg_white-8 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-right opacity_3"></i>
</li>
</ul>
</div></div> <footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from "saved" <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer> </section>
</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>Code Sample
Source: dist/css/library_boot.css, line 9365
6.1.3 Sub Page No Filter
The sub pages have a common layouts.
Example
Default styling
Grid Area: Insert
Grid Area: Insert
Grid Area: Insert
Grid Area: Insert
Grid Area: Insert
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 class="grid:md flex flex_column columns_5 gap_4 col-start col-end">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Insert</div> <div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Insert</div> <div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Insert</div> <div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Insert</div> <div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Insert</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>Code Sample
Source: dist/css/library_boot.css, line 9774
6.1.4 EMPTY OUTSIDE APP TEMPLATE
There are some pages that live outside of access to the product. They are used to provide information to the user. This is the template for those pages.
Example
Default styling
No Access
We are sorry you don't seem to have access to this product.
<div class="BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100">
<div class="bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light">
<div class="bg_black-2 br_radius">
<section class="reading-typography inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 ">
<div>
<div class="relative z_0 br_radius overflow_hidden ">
<picture class="w_100 ">
<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>
</div>
<div class="bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center">
<h1 class="c_primary font_regular font_display">No Access</h1>
<p class="font-size_up font_bold"> We are sorry you don't seem to have access to this product.</p>
</div>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative " id="TopAgreement1">
<!-- EMPTY TEMPLATE SPACE FOR AGREEMENTS OR NO ACCESS. These Cards can be duplicated depending on need. -->
</div>
</section>
</div>
</div>
</div>Code Sample
Source: dist/css/library_boot.css, line 9644
6.1.4.1 Legal Roadblock
A roadblock page that forces users to log in to view and agree to the legal terms of the product.
Example
Default styling
Legal Agreements
Please agree to all the legal agreements.
ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement
The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).
By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product.
Click to Read Full Terms of Service.
I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.
GDPR, Cookies and Privacy
Iure ut ratione magnam similique delectus deserunt occaecati.
Alias nulla qui eos fuga eos eligendi aut tempora. Nisi dicta aut non totam illo consequuntur. Aut aut voluptas est aspernatur placeat distinctio similique dolore laboriosam. Iure velit doloremque dolorum maiores praesentium. Animi exercitationem reiciendis incidunt rerum. Quam consequatur maiores officiis sit enim quidem.Libero dolores aspernatur consequatur labore consequatur sint sint atque. Quo commodi quod repellendus laborum natus amet. Enim aliquam sunt. Nesciunt repellat provident mollitia. Quis nemo modi. Unde ut nisi. Laboriosam et natus saepe a enim aut in voluptates quia. Sed libero alias voluptatum soluta accusantium nesciunt commodi. Eaque cumque quos neque cumque maiores.
You can continue when all legal terms are agreed to.
Continue<div class="BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100">
<div class="bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light">
<div class="bg_black-2 br_radius">
<section class="reading-typography inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_5:lg p_4 flex flex_column gap_3">
<div>
<div class="relative z_0 br_radius overflow_hidden ">
<picture class="w_100 ">
<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>
</div>
<div class="bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center">
<h1 class="c_primary font_regular font_display">Legal Agreements</h1>
<p class="font-size_up font_bold"> Please agree to all the legal agreements. </p>
</div>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative " id="TopAgreement1">
<div class="relative isolation_isolate">
<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="c_white 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="#TopAgreement1">
<span><i class="fas fa-arrow-up p-r_2"></i>top</span>
</a>
<a class="c_white 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="#Agreement1">
<span><i class="fas fa-arrow-down p-r_2"></i>scroll down</span>
</a>
<!-- Helper Jump links -->
</div>
</div>
<div class="bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3">
<h2>ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>
</div>
<main class="z_0 isolation_isolate">
<p class="font-size_up">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”). </p><p class="font-size_up">
By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>
<p class="font-size_up"><a href="#" class="c_accent-n2 font_bold font_ui link" target="_blank">Click to Read Full Terms of Service.</a></p>
<p class="">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>
</main>
</div>
<footer id="Agreement1">
<div class="bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>
<a href="#" class="btn btn-success c_white h:undecorated float_right"><i class="fas fa-check"></i> I agree</a>
</footer>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative isolation_isolate" id="TopAgreement2">
<div class="relative">
<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="c_white 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="#TopAgreement2">
<span><i class="fas fa-arrow-up p-r_2"></i>top</span>
</a>
<a class="c_white 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="#Agreement2">
<span><i class="fas fa-arrow-down p-r_2"></i>scroll down</span>
</a>
<!-- Helper Jump links -->
</div>
</div>
<div class="bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3">
<h2>GDPR, Cookies and Privacy</h2>
<p class="font-size_up"> Iure ut ratione magnam similique delectus deserunt occaecati.</p>
</div>
<main class="z_0 isolation_isolate">
<p> Alias nulla qui eos fuga eos eligendi aut tempora. Nisi dicta aut non totam illo consequuntur. Aut aut voluptas est aspernatur placeat distinctio similique dolore laboriosam. Iure velit doloremque dolorum maiores praesentium. Animi exercitationem reiciendis incidunt rerum. Quam consequatur maiores officiis sit enim quidem.Libero dolores aspernatur consequatur labore consequatur sint sint atque. Quo commodi quod repellendus laborum natus amet. Enim aliquam sunt. Nesciunt repellat provident mollitia. Quis nemo modi. Unde ut nisi. Laboriosam et natus saepe a enim aut in voluptates quia. Sed libero alias voluptatum soluta accusantium nesciunt commodi. Eaque cumque quos neque cumque maiores. </p>
</main>
</div>
<footer id="Agreement2">
<div class="bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>
<a href="#" class="btn btn-secondary c_white h:undecorated float_right">I agree</a>
</footer>
</div>
<div class="inset-level_up-1 bg_white br_radius relative p_4 text_center">
<h4 class="font_bold c_primary-n2"> You can continue when all legal terms are agreed to. </h4>
<a href="#" class="btn btn-disabled disabled block">Continue</a>
</div>
</section>
</div>
</div>
</div>Code Sample
Source: dist/css/library_boot.css, line 9739
6.1.4.2 No Access
If a user is logged in but does not have access to the page, they will be redirected to this page.
Example
Default styling
Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]
No Access to [PRODUCT NAME]
[PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.
Registration Steps
-
To purchase, please click the "Register" button below. Once you have completed your purchase, please wait 15 minutes to allow the system to process the information.
- Register
-
If you have just registered and you have waited 15 minutes and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].
- Refresh Access
-
If you believe you have received this message in error, please contact Member Care
- For additional questions, please contact ACC Member Care.
- Email: MemberCare@ACC.org
- Phone: 202-375-6000 ext. 5603
- Toll-Free: 800-253-4636 ext. 5603
Account Information
- User Name: Regina Rutherford
- Member ID: 0152151214
- Email: test@boo.com
Click the 'Member Help' button to send along your member information to help diagnose this issue.
<div class="BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100">
<div class="bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light">
<div class="bg_black-2 br_radius">
<section class=" inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 ">
<div>
<div class="relative z_0 br_radius overflow_hidden reading-typography ">
<picture class="w_100 ">
<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>
</div>
<div class="bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center">
<h1 class="font_display font_6 c_primary m-t_4">Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]</h1>
</div>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
<div class="reading-typography flex flex_column gap_4">
<h2 class="">No Access to [PRODUCT NAME]</h2>
<p>[PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.</p>
<div class="flex flex_row gap_3 justify_center">
<a href="[PRODUCT MARKETING URL]" class="w_100 block max-w_20 btn btn-secondary c_white font_bold font_ui h:c_white shadow_overlap-light " title="Navigate to [PRODUCT NAME] detail page">Learn More</a>
</div>
</div>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
<div class="reading-typography flex flex_column gap_4">
<h2 class="font_bold">Registration Steps</h2>
<ol class="counter_reset m_0 p_0 ul_none flex_column flex gap_4">
<li class="flex flex_row">
<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
<div class="flex_auto">
<p>To purchase, please click the "Register" button below. Once you have completed your purchase, please <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">wait 15 minutes</strong> to allow the system to process the information. </p>
</div>
</li>
<li class="flex flex_row gap_3 justify_center">
<a title="register for the [PRODUCT NAME]" href="https://www.acc.org/Education-and-Meetings/Meetings/Meeting-Items/2022/01/01/01/04/ACC-Anywhere-ACC22-On-Demand" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Register</a>
</li>
<li class="flex flex_row">
<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
<div class="flex_auto">
<p>If you have just registered and you have <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">waited 15 minutes</strong> and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].</p>
</div>
</li>
<li class="flex flex_row gap_3 justify_center">
<a title="reset the access from you account" href="[EVENT AUTHENTICATION URL]" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Refresh Access</a>
</li>
<li class="flex flex_row">
<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
<div class="flex_auto">
<div class="flex flex_row:md flex_column">
<div class="reading-typography flex flex_column gap_4 flex_50 p-r_5:md">
<p class="font_bold">If you believe you have received this message in error, please contact <a href="mailto:MemberCare@ACC.org"><em>Member Care</em></a> </p>
<ul class="ul_none p_3">
<li class="font_bold">For additional questions, please contact ACC Member Care.</li>
<li><strong>Email:</strong> <a href="mailto:MemberCare@ACC.org"><em>MemberCare@ACC.org</em></a></li>
<li><strong>Phone:</strong> 202-375-6000 ext. 5603 </li>
<li><strong>Toll-Free:</strong> 800-253-4636 ext. 5603</li>
</ul>
</div>
<div class=" flex_50"`>
<section class="bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold">
<div class="c_white">
<h2 class="br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center">Account Information</h2>
<ul class="ul_none p_0 m_0">
<li class=""><strong>User Name:</strong> <span data-type="User Full Name">Regina Rutherford</span> </li>
<li class=""><strong>Member ID:</strong> <span data-type="Member ID">0152151214</span> </li><li class=""><strong>Email:</strong> <span data-type="email">test@boo.com</span> </li>
</ul>
</div>
<div class="bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light">
<p class=""><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class="text_center"><a href="mailTO:membercare@acc.org?body='name,email,personify'" class="btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto">Member Care</a></div>
</div>
</section> </div>
</div>
</div>
</li>
</ol>
</div>
</div> </section>
</div>
</div>
</div>Code Sample
Source: dist/css/library_boot.css, line 9543
6.1.5 Presentation Player
The sub pages have a common layouts.
Example
Default styling
Cardiovascular Update for the Clinician III Clinical Clinical Arteriosclerosis Pharmacologic Valvular Heart Disease Valvular Heart Disease
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Chest Pain Valvular Chest Pain Electrocardiographic
VIDEO EMBED
presentation details
session details
Role Type 1
- Marty Little ( New York, NY, USA)
- Eileen Marvin ( New York, NY, USA)
- Chelsea Dach DVM ( New York, NY, USA)
Role Type 2
- Wm Price( New York, NY, USA)
- Mrs. Jeffrey Cartwright ( New York, NY, USA)
- CEmmett Spencer( New York, NY, USA)
presentation playlist
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:md bg_black-4 w_100 p_3:md p_2">
<div class="page-wrapper grid:md 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="flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3">
<div class="col-start col-end_4:lg col-end flex flex_column gap_4 row-start_1">
<section class="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_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 p_3 p_4:lg">
<h1 class="c_black-5 font-size_down-1 font_medium font_ui lh_1 m-b_2 m-t_2 m_0">Cardiovascular Update for the Clinician III Clinical Clinical Arteriosclerosis Pharmacologic Valvular Heart Disease Valvular Heart Disease </h1>
<h2 class="c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0"> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Chest Pain Valvular Chest Pain Electrocardiographic </h2>
</main>
<aside class="flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md">
<ul class="flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3">
<li class="flex_auto">
<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> </li>
</ul>
</aside>
</div>
<div class="player hd full flex_auto w_100 p_4:lg p_3">
<div class="bg_acc aspect_16x9 c_white text_center justify_center flex items_center">VIDEO EMBED</div>
</div>
<nav class="p_4 font_2:lg font_1">
<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> <h3 class="c_black-8">How did you like this presentation?</h3>
<ul class="ul_none flex flex_row lowercase flex flex_row gap_2">
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-up"></i></a>
</li>
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-down"></i></a>
</li>
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3 m-l_auto">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-paperclip"></i> Attachments</a>
</li>
</ul> </nav>
</section>
</div>
<div class="col-end col-start_4:lg col-start flex flex_column flex_row:md flex_column:lg gap_4">
<section class="flex_auto flex_50:md flex_auto:lg flex_none:lg font_0 inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2 p_3 p_4:lg">
<header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">presentation details</h2></header> <aside class="">
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div> <h4 class="font-size_up c_black-6 font_medium capitalize">
<i class="fas fa-file-certificate p-r_3"></i> Credits
</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down-1">
<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>
<h4 class="font-size_up c_black-6 font_medium">
<i class="fas fa-tag p-r_3"></i>
category
</h4>
<div class=" br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul> </div>
<h4 class="font-size_up c_black-6 font_medium">
<i class="fas fa-tags p-r_3"></i> tags
</h4>
<div class=" br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-comma">
<li>Tag Name 1</li>
<li>Daugherty - Larkin</li>
<li>relationships</li>
<li>web-readiness</li>
</ul> </div>
</aside> </section>
<section class="flex_auto flex_50:md flex_auto:lg flex_none:lg font_0 inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2 p_3 p_4:lg">
<header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">session details</h2></header> <div class="p-y_3 br-t_1 br_black-2 br_solid font-size_down">
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div> </div>
<section class="inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_3 p_4:lg">
<div class="flex flex_row items_center">
<span class="c_black-4 font_0 font_1:md font_2:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end"><i class="fa-list-alt fas font-size_up-2"></i></span>
<header class="font_display font_regular c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">presentation playlist</h3></header></div>
<div class="font_n2 font_n1:lg relative isolation_isolate">
<ul class="flex flex_column justify_stretch gap_3 ul_none">
<article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
<div class="flex flex_row font_ui justify_start relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius">
<main class="flex flex_column flex_auto gap_4 justify_between flex_auto relative w_100 isolation_isolate">
<h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
Presentation of the findings Chest Pain Blood Vessel Myocardial Valvular Heart Disease Electrocardiogram Clinical
</a>
</h2>
</main>
<aside class="flex_auto flex flex_column items_center justify_center">
<span class="font-size_down inline-block lh_0 c_black-8 text_center nowrap">
<span class="font-size_up c_accent-n2 block ">
<i class="fal fa-clock"></i>
15
</span>
minutes
</span>
</aside>
</div>
</article> <article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
<div class="flex flex_row font_ui justify_start relative w_100 gap_4 p_4 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<main class="flex_auto">
<h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
Presentation of the findings Valvular Heart Disease Valvular Blood Vessel Valvular Heart Disease Valvular Clinical
</a>
</h2>
</main>
<aside class="flex_none flex flex_column items_center justify_center">
<span class="font-size_up-2 inline-block lh_0 c_accent text_center nowrap">
<i class="fas fa-play"></i>
</span>
</aside>
</div>
</article> <article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
<div class="flex flex_row font_ui justify_start relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius">
<main class="flex flex_column flex_auto gap_4 justify_between flex_auto relative w_100 isolation_isolate">
<h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
Presentation of the findings Pericardial Myocardial Side Effect
</a>
</h2>
</main>
<aside class="flex_auto flex flex_column items_center justify_center">
<span class="font-size_down inline-block lh_0 c_black-8 text_center nowrap">
<span class="font-size_up c_accent-n2 block ">
<i class="fal fa-clock"></i>
15
</span>
minutes
</span>
</aside>
</div>
</article> <article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
<div class="flex flex_row font_ui justify_start relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius">
<main class="flex flex_column flex_auto gap_4 justify_between flex_auto relative w_100 isolation_isolate">
<h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
Presentation of the findings Blood Vessel Arteriosclerosis Pericardial Pericardial Chest Pain Cardiovascular Pharmacologic Electrocardiogram
</a>
</h2>
</main>
<aside class="flex_auto flex flex_column items_center justify_center">
<span class="font-size_down inline-block lh_0 c_black-8 text_center nowrap">
<span class="font-size_up c_accent-n2 block ">
<i class="fal fa-clock"></i>
15
</span>
minutes
</span>
</aside>
</div>
</article> </ul>
</div>
</section>
</section>
</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>Code Sample
Source: dist/css/library_boot.css, line 9403
6.1.6 Search Page
The sub pages have a common layouts.
Navigation.Breadcrumb - Breadcrumb Bar
Sub Components in Design:
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_3996" id="checkfacetfacet_3996" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_3996" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_3996</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_4867" id="checkfacetfacet_4867" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_4867" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_4867</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_5951" id="checkfacet_5951" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5951" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5951ut 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_5064" id="checkfacet_5064" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5064" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5064ut 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_3910" id="checkfacet_3910" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3910" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3910ut 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_2895" id="checkfacet_2895" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2895" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2895ut 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_0761" id="checkfacet_0761" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0761" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0761ut 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_7865" id="checkfacet_7865" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7865" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7865ut 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_2499" id="checkfacet_2499" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2499" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2499ut 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_7156" id="checkfacet_7156" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7156" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7156ut 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_1153" id="checkfacet_1153" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_1153" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_1153ut 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_9786" id="checkfacet_9786" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9786" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9786ut 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 Chest Pain Clinical Pericardial Valvular Pharmacologic
</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 Pharmacologic ">
<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 Chest Pain Clinical Pericardial Valvular Electrocardiographic Electrocardiogram Valvular Blood Vessel Blood Vessel Chest Pain Valvular Clinical Pharmacologic
</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 Electrocardiographic Electrocardiogram Valvular Blood Vessel Blood Vessel Chest Pain Valvular Clinical Pharmacologic ">
<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 Chest Pain Clinical Pericardial Valvular Valvular Heart Disease Valvular Heart Disease Pericardial Valvular Pericardial
</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 Heart Disease Valvular Heart Disease Pericardial Valvular Pericardial ">
<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 Electrocardiographic Clinical Valvular Chest Pain Electrocardiographic ">
<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 Pharmacologic Cardiovascular Cardiovascular Myocardial Arteriosclerosis Arrhythmia Arrhythmia Valvular Heart Disease Valvular Heart Disease Valvular Valvular Heart Disease Cardiovascular Blood Vessel Blood Vessel Electrocardiographic Clinical Valvular Chest Pain Electrocardiographic
</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 Electrocardiographic Clinical Valvular Chest Pain Electrocardiographic ">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 Electrocardiographic Clinical Valvular Chest Pain Electrocardiographic ">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 Cardiovascular Chest Pain Arrhythmia Pericardial Chest Pain ">
<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 Pharmacologic Cardiovascular Cardiovascular Myocardial Arteriosclerosis Arrhythmia Arrhythmia Valvular Heart Disease Valvular Heart Disease Valvular Valvular Heart Disease Cardiovascular Blood Vessel Blood Vessel Cardiovascular Chest Pain Arrhythmia Pericardial Chest Pain
</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 Cardiovascular Chest Pain Arrhythmia Pericardial Chest Pain ">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 Cardiovascular Chest Pain Arrhythmia Pericardial Chest Pain ">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 Chest Pain Valvular Heart Disease Blood Vessel Myocardial Arteriosclerosis Blood Vessel ">
<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 Pharmacologic Cardiovascular Cardiovascular Myocardial Arteriosclerosis Arrhythmia Arrhythmia Valvular Heart Disease Valvular Heart Disease Valvular Valvular Heart Disease Cardiovascular Blood Vessel Blood Vessel Chest Pain Valvular Heart Disease Blood Vessel Myocardial Arteriosclerosis Blood Vessel
</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 Chest Pain Valvular Heart Disease Blood Vessel Myocardial Arteriosclerosis Blood Vessel ">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 Chest Pain Valvular Heart Disease Blood Vessel Myocardial Arteriosclerosis Blood Vessel ">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 Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease Pharmacologic Side Effect Chest Pain ">
<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 Pharmacologic Cardiovascular Cardiovascular Myocardial Arteriosclerosis Arrhythmia Arrhythmia Valvular Heart Disease Valvular Heart Disease Valvular Valvular Heart Disease Cardiovascular Blood Vessel Blood Vessel Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease Pharmacologic Side Effect Chest Pain
</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 Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease Pharmacologic Side Effect Chest Pain ">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 Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease Pharmacologic Side Effect Chest Pain ">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>Code Sample
Source: dist/css/library_boot.css, line 9472
6.1.7 Session Data Page
The sub pages have a common layouts.
Example
Default styling
Cardiovascular Update for the Clinician III Clinical Pericardial Clinical Chest Pain Chest Pain Arrhythmia
session details
presentation playlist
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- 15 minutes
- PDF Attachments
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- 15 minutes
- PDF Attachments
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- 15 minutes
- PDF Attachments
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- 15 minutes
- PDF Attachments
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:md bg_black-4 w_100 p_3:md p_2">
<div class="page-wrapper grid:md 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="flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3">
<div class="col-start col-end_3:lg col-end_4 flex flex_column gap_4 row-start_1">
<section class="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_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 p_3 p_4:lg">
<h1 class="c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0"> Cardiovascular Update for the Clinician III Clinical Pericardial Clinical Chest Pain Chest Pain Arrhythmia </h1>
</main>
<aside class="flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md">
<ul class="flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3">
<li class="flex_auto">
<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> </li>
</ul>
</aside>
</div>
<nav class="p_4 font_2:lg font_1">
<h3 class="c_black-8">How did you like this session?</h3>
<ul class="ul_none flex flex_row lowercase flex flex_row gap_2">
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-up"></i></a>
</li>
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-down"></i></a>
</li>
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3 m-l_auto">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-paperclip"></i> Attachments</a>
</li>
</ul> </nav>
<section class="font_0 m_3 inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_3 p_4:lg">
<header class="font_display font_regular c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">session details</h3></header> <aside class="">
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div> <h4 class="font-size_up c_black-6 font_medium capitalize">
<i class="fas fa-file-certificate p-r_3"></i> Credits
</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down-1">
<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>
<h4 class="font-size_up c_black-6 font_medium">
<i class="fas fa-tag p-r_3"></i>
category
</h4>
<div class=" br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul> </div>
<h4 class="font-size_up c_black-6 font_medium">
<i class="fas fa-tags p-r_3"></i> tags
</h4>
<div class=" br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-comma">
<li>Tag Name 1</li>
<li>Daugherty - Larkin</li>
<li>relationships</li>
<li>web-readiness</li>
</ul> </div>
</aside> </section>
</section>
</div>
<div class="col-end col-start_3:lg col-start_4 row-start_1">
<section class="inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2 p_3 p_4:lg">
<div class="flex flex_row items_center">
<span class="c_black-4 font_1 font_2:md font_3:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end"><i class="fa-list-alt fas font-size_up-2"></i></span>
<header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">presentation playlist</h2></header></div>
<div class="font_0 font_1:lg relative isolation_isolate">
<ul class="flex flex_column justify_stretch gap_4 ul_none">
<div>
<article class="flex flex_grow flex_column w_100 p-x_3:lg br-t_1 br_solid br_black-3">
<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-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1">
Presentation of the findings
</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>
</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> <div>
<article class="flex flex_grow flex_column w_100 p-x_3:lg br-t_1 br_solid br_black-3">
<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-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1">
Presentation of the findings
</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>
</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> <div>
<article class="flex flex_grow flex_column w_100 p-x_3:lg br-t_1 br_solid br_black-3">
<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-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1">
Presentation of the findings
</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>
</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> <div>
<article class="flex flex_grow flex_column w_100 p-x_3:lg br-t_1 br_solid br_black-3">
<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-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0">
<a class="c_inherit-all expanded-click-area z_1">
Presentation of the findings
</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>
</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> </ul>
</div>
</section>
</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>Code Sample
Source: dist/css/library_boot.css, line 9245
6.2 Layouts
This app design is based on levels of inset and overlaps in grid areas.
Source: dist/css/library_boot.css, line 9257
6.2.1 Base Grid Areas
The library base is a grid system that is used for the library page.
Example
Default styling
Grid Area: BreadCrumb
Grid Area: Grid Area 1
Grid Area: Grid Area 2
Grid Area: Grid Area 3
Grid Area: Grid Area 4
Grid Area: Grid Area 5
<div class="BODY_TAG-stand-in grid:md flex flex_column 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 class="grid-area_menuArea"><div class="w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: M</div></div>
<header class="grid-area_headerArea"><div class="w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: BreadCrumb</div></header>
<section class="grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md">
<aside class="grid-area_filterArea col-end_filterArea order_last order_unset:md">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Filter</div> </aside>
<div class="grid-area_contentArea grid:md flex flex_column columns_5 gap_4">
<div class="col-start_1 col-end_1">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 1</div> </div>
<div class="col-start_2 col-end_2 ">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 2</div> </div>
<div class="col-start_3 col-end_3">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 3</div> </div>
<div class="col-start_4 col-end_4">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 4</div> </div>
<div class="col-start_5 col-end_5">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 5</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 class="col-start col-end"><div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Footer</div></div>
</footer>
</div>
</div>
</div>Code Sample
Source: dist/css/library_boot.css, line 6822
6.2.2 Side Bar Area
This pattern is often used to push the sidebar bellow the main content area.
Example
Default styling
Layout Zone: Sidebar
Layout Zone: Main
<div class="flex flex_row:md flex_column-reverse gap_4 gap_5:lg">
<div class="flex_auto flex_100 max-w_20:lg">
<div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Sidebar</div> </div>
<div class="flex_auto flex_100 ">
<div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Main</div> </div>
</div>Code Sample
Source: dist/css/library_boot.css, line 6845
6.2.3 Side Bar Area With Ad
This pattern is often used to push the sidebar bellow the main content area.
Example
Default styling
Layout Zone: Sidebar
Layout Zone: Main
Layout Zone: Ad Rail
<div class="flex flex_row:lg flex_column gap_4 gap_5:lg">
<div class="flex_auto flex_100 flex flex_row:md flex_column-reverse gap_4 gap_5:lg">
<div class="flex_auto flex_100 max-w_20:md">
<div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Sidebar</div> </div>
<div class="flex_auto flex_100">
<div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Main</div> </div>
</div>
<div class="flex_auto flex_100 max_w-100 max-w_10:lg">
<div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Ad Rail</div> </div>
</div>Code Sample
Source: dist/css/library_boot.css, line 6777
6.2.4 Content Filler
This is a styleguide only element to show structure edges.
Example
Default styling
Layout Zone:
<div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: </div>Code Sample
Source: dist/css/library_boot.css, line 6792
6.2.5 Grid Filler
This is a styleguide only element to show structure edges.
Example
Default styling
Grid Area:
<div class="w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: </div>Code Sample
Source: dist/css/library_boot.css, line 6807
6.2.6 Sub Grid Filler
This is a styleguide only element to show structure edges.
Example
Default styling
Grid Area:
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: </div>