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

Example

Featured Presentations

  • Navigating Health Care Economics
  • Category Tag

3652-15612 Cardiovascular Update for the Clinician III

New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty

  • Session Role Type 1:
  • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
  • Session Role Type 2:
  • Dianna Denesik III ( New York, NY, USA)
  • Miguel Romaguera ( New York, NY, USA)
  • Jeanette Franecki ( New York, NY, USA)
  • 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)
  • CME
  • CNE
  • COP
  • MOCII
  • Navigating Health Care Economics
  • Category Tag

3652-15612 Cardiovascular Update for the Clinician III

New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Arrhythmia Cardiovascular Valvular Heart Disease Side Effect Arteriosclerosis

  • Session Role Type 1:
  • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
  • Session Role Type 2:
  • Dianna Denesik III ( New York, NY, USA)
  • Miguel Romaguera ( New York, NY, USA)
  • Jeanette Franecki ( New York, NY, USA)
  • 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)
  • CME
  • CNE
  • COP
  • MOCII
  • Navigating Health Care Economics
  • Category Tag

3652-15612 Cardiovascular Update for the Clinician III

New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Chest Pain Arteriosclerosis Arteriosclerosis Valvular Heart Disease Chest Pain Pericardial Arteriosclerosis

  • Session Role Type 1:
  • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
  • Session Role Type 2:
  • Dianna Denesik III ( New York, NY, USA)
  • Miguel Romaguera ( New York, NY, USA)
  • Jeanette Franecki ( New York, NY, USA)
  • 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)
  • CME
  • CNE
  • COP
  • MOCII
NOTE:
A grid-item at its smallest is 300px wide the grid column size needs to be set depending on the width the parent container. 
<section class="">
<h2 class="font_bold font_display c_primary-n1"><div class="flex_row:md flex flex_column">
    <div class="flex_auto grid">
        <span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
    </div>
    <div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
        Featured Presentations
    </div>
    <div class="flex_auto grid">
        <span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
    </div>
</div></h2>
<div  class="p_4:lg p_3 grid-col_3:lg grid-col_2:md grid-col_1 grid gap-x_5 gap-y_5 ">
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light">
    <div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
    <div class="font_n3 p_2 uppercase bg_primary-2 p-x_4 m-x_4 inline-block br-br_radius br-bl_radius c_white font_bold self_start ">
      <ul class="ul_inline-pipe">
        <li>Navigating Health Care Economics</li>
        <li>Category Tag</li>
      </ul>
    </div>    <div class="flex flex_auto flex_column gap-y_4 p-b_2 p_4">
        <header>
            <h2 class="uppercase c_black-7 font-size_down">
                <strong class="font_bold p-r_2 block">3652-15612</strong> Cardiovascular Update for the Clinician III
            </h2>
            <h3 class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-2 lh_1">
                New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty 
            </h3>
        </header>
        <div class="font_n1">
            <ul class="ul_inline-semicolon font_regular font_copy">
              <li class="no-after font_medium c_primary-n1 ">Session 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  ">Session 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>
                <li class="no-after font_medium c_primary-n1 ">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  ">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>
        <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md w_100 m-t_auto">
              <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="navigate to" class="btn btn-primary flex_auto">Watch</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="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black  m-b_n1 m-x_n1 p_3 relative self_stretch">
        <div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
        <div class=" uppercase flex flex_wrap font_n3 justify_start"><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><!-- DUPLICATE -->
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light">
    <div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
    <div class="font_n3 p_2 uppercase bg_primary-2 p-x_4 m-x_4 inline-block br-br_radius br-bl_radius c_white font_bold self_start Arrhythmia Cardiovascular Valvular Heart Disease Side Effect Arteriosclerosis ">
      <ul class="ul_inline-pipe">
        <li>Navigating Health Care Economics</li>
        <li>Category Tag</li>
      </ul>
    </div>    <div class="flex flex_auto flex_column gap-y_4 p-b_2 p_4">
        <header>
            <h2 class="uppercase c_black-7 font-size_down">
                <strong class="font_bold p-r_2 block">3652-15612</strong> Cardiovascular Update for the Clinician III
            </h2>
            <h3 class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-2 lh_1">
                New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Arrhythmia Cardiovascular Valvular Heart Disease Side Effect Arteriosclerosis 
            </h3>
        </header>
        <div class="font_n1">
            <ul class="ul_inline-semicolon font_regular font_copy">
              <li class="no-after font_medium c_primary-n1 Arrhythmia Cardiovascular Valvular Heart Disease Side Effect Arteriosclerosis ">Session 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  Arrhythmia Cardiovascular Valvular Heart Disease Side Effect Arteriosclerosis ">Session 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>
                <li class="no-after font_medium c_primary-n1 Arrhythmia Cardiovascular Valvular Heart Disease Side Effect Arteriosclerosis ">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  Arrhythmia Cardiovascular Valvular Heart Disease Side Effect Arteriosclerosis ">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>
        <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md w_100 m-t_auto">
              <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="navigate to" class="btn btn-primary flex_auto">Watch</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="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black  m-b_n1 m-x_n1 p_3 relative self_stretch">
        <div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
        <div class=" uppercase flex flex_wrap font_n3 justify_start"><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><article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light">
    <div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
    <div class="font_n3 p_2 uppercase bg_primary-2 p-x_4 m-x_4 inline-block br-br_radius br-bl_radius c_white font_bold self_start Chest Pain Arteriosclerosis Arteriosclerosis Valvular Heart Disease Chest Pain Pericardial Arteriosclerosis ">
      <ul class="ul_inline-pipe">
        <li>Navigating Health Care Economics</li>
        <li>Category Tag</li>
      </ul>
    </div>    <div class="flex flex_auto flex_column gap-y_4 p-b_2 p_4">
        <header>
            <h2 class="uppercase c_black-7 font-size_down">
                <strong class="font_bold p-r_2 block">3652-15612</strong> Cardiovascular Update for the Clinician III
            </h2>
            <h3 class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-2 lh_1">
                New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Chest Pain Arteriosclerosis Arteriosclerosis Valvular Heart Disease Chest Pain Pericardial Arteriosclerosis 
            </h3>
        </header>
        <div class="font_n1">
            <ul class="ul_inline-semicolon font_regular font_copy">
              <li class="no-after font_medium c_primary-n1 Chest Pain Arteriosclerosis Arteriosclerosis Valvular Heart Disease Chest Pain Pericardial Arteriosclerosis ">Session 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  Chest Pain Arteriosclerosis Arteriosclerosis Valvular Heart Disease Chest Pain Pericardial Arteriosclerosis ">Session 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>
                <li class="no-after font_medium c_primary-n1 Chest Pain Arteriosclerosis Arteriosclerosis Valvular Heart Disease Chest Pain Pericardial Arteriosclerosis ">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  Chest Pain Arteriosclerosis Arteriosclerosis Valvular Heart Disease Chest Pain Pericardial Arteriosclerosis ">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>
        <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md w_100 m-t_auto">
              <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="navigate to" class="btn btn-primary flex_auto">Watch</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="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black  m-b_n1 m-x_n1 p_3 relative self_stretch">
        <div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
        <div class=" uppercase flex flex_wrap font_n3 justify_start"><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><!-- End DUPLICATE -->
</div>
</section>
Copy Code