Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/library_boot.css, line 10137

9.2.2 Continue Watching

experimental

Shows a short list of presentations

default -

Example

Default styling

continue watching

caution:
This item is not finalized and might be subject to change
NOTE:
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 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 Arrhythmia Blood Vessel Electrocardiographic Chest Pain Pharmacologic Valvular Heart Disease 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 Side Effect Myocardial Cardiovascular Blood Vessel Valvular Heart Disease Electrocardiographic 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 Valvular Heart Disease Electrocardiogram Valvular Heart Disease Arrhythmia Arteriosclerosis Valvular Heart Disease Cardiovascular 
                        </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 Arteriosclerosis Chest Pain Electrocardiogram Valvular Heart Disease Pharmacologic Blood Vessel Side Effect Myocardial 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>        </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 &quot;&quot; <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>
Copy Code