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 10630

8.2.4 On Demand

Description:

Sub.Award.FlagLegend - Award Flags Sub.Attachments.BigButton - Attachments Sub.FacultyList - Faculty List Sub.Player.AuxData - Aux Data
Sub Components in Design:
    Data.Session.ID - Session ID Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
    Data Elements:

      Example

      3652 Cardiovascular Update for the Clinician III New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty

      Attachments
      VIDEO EMBED
      • Role Type 1:
      • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
      • Role Type 2:
      • Dianna Denesik III ( New York, NY, USA)
      • Miguel Romaguera ( New York, NY, USA)
      • Jeanette Franecki ( New York, NY, USA)
      <div class="flex_column flex">
    <header class="flex flex_row font_0 font_1:md font_3:lg p-y_3">
        <h3 class="c_primary-n2 flex_auto font-size_up-1 font_display lh_1 lh_2 m-b_3 m_0 p-l_3:lg w_100">
        <span class="block font-size_down-2 c_black-6">
        <strong class="font_bold p-r_3">3652</strong> Cardiovascular Update for the Clinician III
        </span>
        <span class="block">
                    New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty                </span>
            </h3>
            <div class="self_start">
            <a title="download attachments" class="btn btn-secondary btn-lg  p-x_4 p_3 c_white" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
              <i class="far fa-paperclip"></i>
              <span class="display_none inline-block:md"> Attachments</span>
            </a>            </div>
    </header>
    <section class="page-main fullscreen-player flex flex_row:md flex_column gap-x_4 gap-y_3 ">
        <div class="player hd full flex_auto w_100">
            <div class="bg_acc aspect_16x9 c_white text_center  justify_center flex items_center">VIDEO EMBED</div>
        </div>
    </section>
    <section class="flex flex_row:md flex_column gap-x_4 gap-y_3 m-t_4">
        <div class="flex_auto w_100 font_n1 p-x_3">
            <ul class="ul_inline-semicolon font_regular font_copy">
              <li class="no-after font_medium c_primary-n1 block w_100 block w_100">Role Type 1:</li>
              <li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
              <li class="no-after font_medium c_primary-n1 block w_100  block w_100">Role Type 2:</li>
              <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
              <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
              <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
            </ul>        </div>
        <div class="flex_auto max-w_25:lg max-w_20:md w_100 flex flex_column gap-y_3 justify_start">
            <aside class="flex_none max-w_20:md max-w_25:lg w_100 p_4 bg_black-1 br_radius self_start shadow_emboss-light font_n1">
                <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
                <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
                <ul class="ul_inline-semicolon font_regular font_copy">
                  <li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                  <li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                  <li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                </ul>
                </div>
                <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
                <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
                <ul class="ul_inline-semicolon font_regular font_copy">
                  <li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                  <li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                  <li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                </ul>
                </div>    <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-file-certificate p-r_3"></i> Credits</h4>
                <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down-1">
                  <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>
                <h4 class="font-size_up  c_black-6 font_medium"><i class="fas fa-tag p-r_3"></i>category</h4>
                <div class="br-t_1  br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
                    <ul class="ul_inline-comma">
                      <li>Channel 1</li>
                      <li>Navigating Health Care Economics</li>
                    </ul>    </div>
                <h4 class="font-size_up  c_black-6 font_medium"><i class="fas fa-tags p-r_3"></i>tags</h4>
                <div class="br-t_1  br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
                  <ul class="ul_inline-comma">
                    <li>Tag Name 1</li>
                    <li>Daugherty - Larkin</li>
                    <li>relationships</li>
                    <li>web-readiness</li>
                  </ul>    </div>
            </aside>        </div>
    </section>
</div>
      Copy Code