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

Abstract on Cardiovascular Update for the Clinician Success H2

  • Role Type 1:
  • Pepper H. Soda III, MD, FACC
  • Role Type 2:
  • Dianna Denesik III
  • Miguel Romaguera
  • Jeanette Franecki
  • CME
  • CNE
  • COP
  • MOCII

Abstract on Cardiovascular Update for the Clinician Success H2 Electrocardiogram Valvular Valvular Heart Disease Clinical Electrocardiogram Electrocardiographic Pericardial

  • Role Type 1:
  • Pepper H. Soda III, MD, FACC
  • Role Type 2:
  • Dianna Denesik III
  • Miguel Romaguera
  • Jeanette Franecki
  • CME
  • CNE
  • COP
  • MOCII

Abstract on Cardiovascular Update for the Clinician Success H2 Cardiovascular Valvular Electrocardiographic Chest Pain Electrocardiographic Electrocardiographic Arrhythmia Electrocardiogram Blood Vessel

  • Role Type 1:
  • Pepper H. Soda III, MD, FACC
  • Role Type 2:
  • Dianna Denesik III
  • Miguel Romaguera
  • Jeanette Franecki
  • 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="grid grid-col_3:lg grid-col_2:md grid-col_1 grid gap_4 gap_5:lg">
    <article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column  isolation_isolate shadow_overlap-light relative">
        <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="absolute r_3 r_4:md r_5:lg t_n2 font_5:md font_3 m-t_n2 z_2">
            <div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
                <i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
                <span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6  fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
            </div>    </div>
        <header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
            <div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat bg_acc br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
                    <i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
                </div>
        </header>    <div class="p_4 p-b_2 flex flex_column gap-y_4 flex_auto">
            <header>
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font_1:lg font_0 p-r_4:lg">
                    <span class="block font-size_up-1 font_display lh_1"> Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub> </span>
                </h3>
            </header>
            <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md m-t_auto 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="navigate to" class="btn btn-primary flex_auto w_70">View</a>
                </nav>
            </aside>
            <div class="p-b_4:lg p-b_3 font_n1"><ul class="ul_inline-semicolon font_regular font_copy">
      <li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 1:</li>
      <li>Pepper H. Soda III, MD, FACC</li>
      <li class="no-after font_medium c_primary-n1  block w_100 font-size_down">Role Type 2:</li>
      <li>Dianna Denesik III</li>
      <li>Miguel Romaguera</li>
      <li>Jeanette Franecki</li>
    </ul></div>
        </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 flex_none">
            <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 relative">
        <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="absolute r_3 r_4:md r_5:lg t_n2 font_5:md font_3 m-t_n2 z_2">
            <div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
                <i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
                <span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6  fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
            </div>    </div>
        <header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
            <div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat bg_acc br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
                    <i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
                </div>
        </header>    <div class="p_4 p-b_2 flex flex_column gap-y_4 flex_auto">
            <header>
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font_1:lg font_0 p-r_4:lg">
                    <span class="block font-size_up-1 font_display lh_1"> Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub> Electrocardiogram Valvular Valvular Heart Disease Clinical Electrocardiogram Electrocardiographic Pericardial </span>
                </h3>
            </header>
            <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md m-t_auto 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="navigate to" class="btn btn-primary flex_auto w_70">View</a>
                </nav>
            </aside>
            <div class="p-b_4:lg p-b_3 font_n1"><ul class="ul_inline-semicolon font_regular font_copy">
      <li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 1:</li>
      <li>Pepper H. Soda III, MD, FACC</li>
      <li class="no-after font_medium c_primary-n1  block w_100 font-size_down">Role Type 2:</li>
      <li>Dianna Denesik III</li>
      <li>Miguel Romaguera</li>
      <li>Jeanette Franecki</li>
    </ul></div>
        </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 flex_none">
            <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 relative">
        <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="absolute r_3 r_4:md r_5:lg t_n2 font_5:md font_3 m-t_n2 z_2">
            <div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
                <i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
                <span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6  fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
            </div>    </div>
        <header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
            <div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat bg_acc br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
                    <i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
                </div>
        </header>    <div class="p_4 p-b_2 flex flex_column gap-y_4 flex_auto">
            <header>
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font_1:lg font_0 p-r_4:lg">
                    <span class="block font-size_up-1 font_display lh_1"> Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub> Cardiovascular Valvular Electrocardiographic Chest Pain Electrocardiographic Electrocardiographic Arrhythmia Electrocardiogram Blood Vessel </span>
                </h3>
            </header>
            <aside class="flex flex_none flex_column gap-y_3 m-x_auto:md  max-w_30:md m-t_auto 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="navigate to" class="btn btn-primary flex_auto w_70">View</a>
                </nav>
            </aside>
            <div class="p-b_4:lg p-b_3 font_n1"><ul class="ul_inline-semicolon font_regular font_copy">
      <li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 1:</li>
      <li>Pepper H. Soda III, MD, FACC</li>
      <li class="no-after font_medium c_primary-n1  block w_100 font-size_down">Role Type 2:</li>
      <li>Dianna Denesik III</li>
      <li>Miguel Romaguera</li>
      <li>Jeanette Franecki</li>
    </ul></div>
        </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 flex_none">
            <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></section>
Copy Code