This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

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

14.6.6 Video Block Presentation

deprecated

Description: These video blocks are used in combination with grid templates and dividers.

Deprecated: Old Designs

Example

Cardiovascular Update for the Clinician III

  • Pepper H. Soda III, MD, FACC
  • Pepper H. Soda III, MD, FACC
  • CME
  • CNE
  • COP
  • MOCII
FORMAT:
this element uses data that has strict data formatting requirements. See the data tab for more information. 
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Cardiovascular Update for the Clinician III</h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Pepper H. Soda III, MD, FACC</li><li> Pepper H. Soda III, MD, FACC</li> </ul>
        </main>
       <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md p-b_4 p-b_4:md w_100">
             <nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
               <a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 flex_none  grid items_center text_center [active]" ><i class="fas fa-heart"></i></a>        <a href="#" aria-label="download calendar reminder"  class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
               <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto"></a>
             </nav>
             <a href="#" aria-label="download attachments"  class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
       </aside>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <ul class=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
          <li class="inline-flex items_center lh_0">
              <span class="bg_CME br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CME
          </li>  <li class="inline-flex items_center lh_0">
              <span class="bg_CNE br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CNE
          </li>  <li class="inline-flex items_center lh_0">
              <span class="bg_COP br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> COP
          </li>  <li class="inline-flex items_center lh_0">
              <span class="bg_MOCII br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
          </li></ul>        </div>
    </div>
</article>
Copy Code