Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Structures

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

8.1.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 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 &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

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

<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>
Copy Code

Example

Default styling

Slider CSS

https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css

Slider 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>
Copy Code