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 Valvular Arteriosclerosis Pharmacologic
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Valvular Cardiovascular Pericardial Arrhythmia Chest Pain Side Effect Blood Vessel Electrocardiographic Pericardial
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Valvular Clinical Valvular Chest Pain Valvular Electrocardiographic Side Effect Arrhythmia
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Valvular Chest Pain Electrocardiogram
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Valvular Pharmacologic Arteriosclerosis Chest Pain Valvular Electrocardiographic Pericardial
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Valvular Chest Pain Chest Pain Valvular Clinical Chest Pain Myocardial Cardiovascular
- 15 minutes
- 4 presentations
- ZIP Attachments
- CME
- CNE
- AAPA
Clinical Update for the Valvular Valvular
- 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 Valvular Side Effect Arteriosclerosis Electrocardiogram Electrocardiogram Electrocardiographic Arteriosclerosis 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 Side Effect Arteriosclerosis Electrocardiogram Electrocardiogram Electrocardiographic Arteriosclerosis 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 Valvular Arteriosclerosis 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 Arteriosclerosis 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> <div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_row font_ui justify_start relative w_100">
<main
class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<a class="c_inherit-all expanded-click-area z_1">
Clinical Update for the Valvular Cardiovascular Pericardial Arrhythmia Chest Pain Side Effect Blood Vessel Electrocardiographic 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 Cardiovascular Pericardial Arrhythmia Chest Pain Side Effect Blood Vessel Electrocardiographic 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> <div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_row font_ui justify_start relative w_100">
<main
class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<a class="c_inherit-all expanded-click-area z_1">
Clinical Update for the Valvular Clinical Valvular Chest Pain Valvular Electrocardiographic Side Effect Arrhythmia
</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 Clinical Valvular Chest Pain Valvular Electrocardiographic Side Effect Arrhythmia ">
<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 Valvular Chest Pain Electrocardiogram
</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 Electrocardiogram ">
<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 Valvular Pharmacologic Arteriosclerosis Chest Pain Valvular Electrocardiographic 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 Pharmacologic Arteriosclerosis Chest Pain Valvular Electrocardiographic 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> <div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
<div class="flex flex_row font_ui justify_start relative w_100">
<main
class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
<a class="c_inherit-all expanded-click-area z_1">
Clinical Update for the Valvular Chest Pain Chest Pain Valvular Clinical Chest Pain 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 Chest Pain Chest Pain Valvular Clinical Chest Pain Myocardial 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 Valvular Valvular
</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 ">
<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 Valvular Heart Disease Side Effect Arteriosclerosis
</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 Arteriosclerosis Pericardial Electrocardiogram Clinical Pericardial Valvular
</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 Cardiovascular Cardiovascular Valvular Heart Disease Myocardial Valvular Cardiovascular Pharmacologic
</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 Electrocardiogram Blood Vessel
</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 Myocardial Myocardial Pericardial Pericardial Valvular Heart Disease 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> </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>