Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

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

9.2.4.2 Whats Now Item - Horizontal

Whats happening now items are used for listing designs that are not full featured. When there is only one on a full width page you can use this horizontal design.

Sub.Header.VideoThumbnail - Thumbnail of Video Sub.Tags.Category - Category Tag Sub.ActionButtons - Watch Button
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

      Ending @ 12:15 p.m. EDT
      Category:
      • Channel 1
      • Navigating Health Care Economics
      <article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white">
    <div class="br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative relative flex flex_row:md flex_colum">
        <div class="flex_auto w_100 max-w_20 p_4 gap-x_5:lg gap-x_4:md self_center">
        <header class="flex flex_none flex_row justify_center p-x_4 font_n5">
            <div class="aspect_21x9:md aspect_16x9 bg-blend_multiply bg_primary font-size_down bg_cover bg_no-repeat  br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_15 max-w_20:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
                    <i class="absolute c_white-6 fa-play fas flex_auto self_center text_center w_100"></i>
                </div>
        </header>        </div>
        <div class="p_4 flex_auto self_center flex flex_column gap-y_3:md gap-y_2:md">
            <header class="p-t_3">
                <h3 class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
                    <strong class="font_bold  p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
                    <span class="block font_display lh_2 font-size_up-1">
                        Cardiovascular Update for the Clinician III                    </span>
                </h3>
            </header>
            <div class="font_n1 font_ui c_accent-n1">Ending @ 12:15 p.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>
            <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md w_100">
                <a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
            </aside>
        </div>
    </div>
</article>
      Copy Code