Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/virtual_boot.css, line 11529

9.2.3.3 Whats Happening Next - Non Accredited

During the day there will be gaps that will not have a video or session playing so we want to broadcast the information of what will be playing soon.

Sub.Header.VideoThumbnail - Thumbnail of Video Sub.Tags.Category - Category Tag Sub.ActionButtons - Watch Button Sub.Credits.NonAccredited - Non Accredited Tag
Sub Components in Design:
    Data.Session.ID - Session ID Data.Session.Title - Session Title Data.Agenda.EndTime - Session End Time
    Data Elements:

      Example

      Default styling

      3652 Cardiovascular Update for the Clinician III

      Starting @ 11:15 a.m. EDT
      Category:
      • Channel 1
      • Navigating Health Care Economics
      Industry Session | Nonaccredited
      NOTE:
      the Date in the Starting message is conditional. If the session starts on a day that isn't today then the date will be displayed. 
      <article class="relative isolation_isolate flex flex_column">
    <div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
    <header>
        <h3 class="font_display lh_2 c_secondary-n2 font_0 m_0">
            <strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
            <span class="font_display lh_2 c_secondary-n2 m_0 font-size_up-2">
                Cardiovascular Update for the Clinician III 
            </span>
        </h3>
    </header>
    <div class="font_n1 font_ui c_accent-n1">Starting  @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
    <div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
  <li>Channel 1</li>
  <li>Navigating Health Care Economics</li>
</ul></div>
    <div class="c_secondary-n1 m-t_auto font-size_down-2"> <strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong></div>
    </div>
</article>
      Copy Code