8.1 Structures.Home
Source: dist/css/library_boot.css, line 11252
8.1.1 Carousel
Horizontal Carousels to have discoverable areas on the home pages.
ClassList: Sub.ClassList.Inset.margin.down-1 - Margin down 1 Sub.ClassList.Inset.down-1 - Inset down 1
Sub Components in Design:
Example
Default styling
Clinical Update for the Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Electrocardiographic Valvular Heart Disease Valvular Clinical Arrhythmia Chest Pain Blood Vessel
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Arrhythmia Cardiovascular Arrhythmia Pericardial Chest Pain Valvular Side Effect Chest Pain Valvular Heart Disease
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
NOTE:
This design requires javascript. (tiny slider js)<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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial 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 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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Electrocardiographic Valvular Heart Disease Valvular Clinical Arrhythmia Chest Pain 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 Electrocardiographic Valvular Heart Disease Valvular Clinical Arrhythmia Chest Pain 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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Cardiovascular Cardiovascular Blood Vessel Valvular Electrocardiographic
</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 Cardiovascular Blood Vessel Valvular 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> </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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Chest Pain Chest Pain
</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 Chest Pain 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> </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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Pericardial Side Effect Valvular Heart Disease
</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 Side Effect Valvular Heart Disease ">
<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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Electrocardiographic Arrhythmia Electrocardiogram Arrhythmia Chest Pain
</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 Arrhythmia Electrocardiogram Arrhythmia 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> </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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Arrhythmia Cardiovascular Arrhythmia Pericardial Chest Pain Valvular Side Effect Chest Pain Valvular Heart Disease
</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 Arrhythmia Cardiovascular Arrhythmia Pericardial Chest Pain Valvular Side Effect Chest Pain Valvular Heart Disease ">
<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 Myocardial Valvular Heart Disease Side Effect Side Effect Arteriosclerosis Valvular Heart Disease Pharmacologic Electrocardiographic Myocardial Pharmacologic Pharmacologic Blood Vessel Clinical Clinical
</a>
</h2>
<ul
class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li> <li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block">4</span>
presentations
</li> <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
Attachments
</a>
</li> </ul>
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul>
</main>
<aside class="flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1">
<ul
class="b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
<li class="flex_auto p-b_3 m-b_auto">
<a class="inline-block m-x_n3 m-t_n1 Pharmacologic Pharmacologic Blood Vessel Clinical Clinical ">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a> </li>
</ul>
</aside>
</div>
</article>
</div> </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>
Code Sample
Source: dist/css/library_boot.css, line 11341
8.1.1.1 Carousel Empty State
The empty state of the carousel
ClassList: Sub.ClassList.Inset.margin.down-1 - Margin down 1 Sub.ClassList.Inset.down-1 - Inset Down 1
Sub Components in Design:
Example
Default styling
<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 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>
Code Sample
Source: dist/css/library_boot.css, line 11418
8.1.2 Continue Watching
Shows a short list of presentations
default -
Example
Default styling
continue watching
caution:
This item is not finalized and might be subject to changeNOTE:
container: '#SliderContinueWatching', controlsContainer: "#slider-customize-controls-vertical" need to be unique to the slider. <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="relative isolation_isolate overflow_hidden inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light ">
<div id="SliderContinueWatching" class="flex flex_column gap_3 justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3 inset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1 ">
<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 Side Effect Pharmacologic Pericardial
</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 Arrhythmia Cardiovascular Pharmacologic Chest Pain Valvular Heart Disease Myocardial Arteriosclerosis Blood Vessel Pericardial
</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 Chest Pain Pharmacologic Pharmacologic Arrhythmia Valvular Valvular Heart Disease
</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 Valvular Heart Disease Pharmacologic Electrocardiographic
</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 Valvular Blood Vessel Side Effect Valvular Chest Pain Side Effect Side Effect Pharmacologic Pericardial
</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> </div>
<div class="customize-tools relative">
<ul class="absolute b_4 r_0 l_0 controls ul_none font-size_up-2 c_black-6 flex flex_row gap-x_4" id="slider-customize-controls-vertical" aria-label="Carousel Navigation" tabindex="0">
<li class="prev bg_white-8 block br-br_radius br-l_0 br-tr_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-up"></i>
</li>
<li class="next bg_white-8 block br-bl_radius br-r_0 br-tl_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-down"></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 "" <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let args2 ={
items: 1,
mouseDrag: true,
axis: "vertical",
slideBy: "page",
swipeAngle: false,
autoplay: false,
controls: true,
items:3,
nav: false,
edgePadding: 0,
loop:true,
edgePadding:0,
center:true,
gutter:16
};
let slider2 = tns({ container: '#SliderContinueWatching', controlsContainer: "#slider-customize-controls-vertical", ...args2 });
});</script>
Code Sample
Source: dist/css/library_boot.css, line 11158
8.1.3 Header
Home page branding splash with ka site search.
SubComponent: Sub.Section.HeaderPanel - Search Bar
Example
Default styling
<header class="p_3 p_0:md ">
<section class="br_radius overflow_hidden relative z_1">
<picture class="w_100">
<source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1440x250.jpg" media="(min-width: 1200px)">
<source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1200x250.jpg" media="(min-width: 1024px)">
<source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_768x200.jpg" media="(min-width: 768px)">
<source class="w_100" srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg" media="(min-width: 400px)">
<img src="https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg" class="w_100" alt="">
</picture>
</section>
<div class="m_auto m-t_n4 t_n4 t_n5:lg m-t_n5:lg max-w_60:lg max-w_40:md p-x_3 p-x_5:md z_2 relative">
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 p_5:lg">
<div class="input-holder flex flex_row self_end relative w_100 p_2 p_3:md">
<input id="input_uniqueTextAndButton" name="input_uniqueTextAndButton" type="text" placeholder="Search" class="br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 br-tl_square br-br_square br-r_0 font_2"/>
<button class="disabled b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto" >
<i class="fas fa-search"></i>
<span class="inline-block:md display_none">Search</span>
</button>
</div> <nav class="utility-nav p-t_3 p-t_4:lg font_n3 font_0:md font_1:lg ">
<ul class="flex flex_row ul_none justify_center">
<li class="text_center p-x_2 block p-x_4:md lh_1">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-star block inline:md"></i><span class="display_none inline:md"> featured</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-sitemap block inline:md"></i><span class="display_none inline:md"> hot topics</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 text_center br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-heart block inline:md"></i><span class="display_none inline:md"> saved</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-play block inline:md"></i><span class="display_none inline:md"> continue watching</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-sync block inline:md"></i><span class="display_none inline:md"> watch again </span></a
>
</li>
</ul>
</nav></div> </div>
</header>
Code Sample
Source: dist/css/library_boot.css, line 11321
8.1.4 TinySlider.js
Script tags for tinySlider
Example
Default styling
Slider CSS
https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.cssSlider JS
https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js<h2> Slider CSS </h2>
<span class="user-select_all">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css</span>
<h2> Slider JS </h2>
<span class="user-select_all">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js</span>