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>