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

Playing Now

 

3652 Cardiovascular Update for the Clinician III Pharmacologic Valvular Cardiovascular Myocardial Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease

Ending @ 12:15 p.m. EDT
Category:
  • Channel 1
  • Navigating Health Care Economics
 

3652 Cardiovascular Update for the Clinician III Clinical Arrhythmia Electrocardiogram Arteriosclerosis Blood Vessel Electrocardiographic Clinical Blood Vessel

Ending @ 12:15 p.m. EDT
Category:
  • Channel 1
  • Navigating Health Care Economics
 

3652 Cardiovascular Update for the Clinician III Chest Pain Myocardial Side Effect Valvular Chest Pain Pharmacologic Valvular Heart Disease Side Effect

Ending @ 12:15 p.m. EDT
Category:
  • Channel 1
  • Navigating Health Care Economics
<section class="">
    <h2 class="font_bold font_display c_primary-n1 m-b_4"><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">
        Playing Now
    </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="gap_5 grid grid-col_3:lg grid-col_2:md grid-col_1">
        <article class="relative isolation_isolate flex flex_column">
            <div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
            <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 Pharmacologic Valvular Cardiovascular Myocardial Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease  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="br-t_3 br_primary-2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
            <div class="p_2">&nbsp;</div>
            <header class="p-t_3">
                <h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
                    <strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
                    <span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
                        Cardiovascular Update for the Clinician III Pharmacologic Valvular Cardiovascular Myocardial Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease 
                    </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 m-t_auto">
                <a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
            </aside>
            </div>
        </article>        <article class="relative isolation_isolate flex flex_column">
            <div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
            <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 Clinical Arrhythmia Electrocardiogram Arteriosclerosis Blood Vessel Electrocardiographic Clinical Blood Vessel  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="br-t_3 br_primary-2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
            <div class="p_2">&nbsp;</div>
            <header class="p-t_3">
                <h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
                    <strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
                    <span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
                        Cardiovascular Update for the Clinician III Clinical Arrhythmia Electrocardiogram Arteriosclerosis Blood Vessel Electrocardiographic Clinical Blood Vessel 
                    </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 m-t_auto">
                <a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
            </aside>
            </div>
        </article>        <article class="relative isolation_isolate flex flex_column">
            <div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
            <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 Chest Pain Myocardial Side Effect Valvular Chest Pain Pharmacologic Valvular Heart Disease Side Effect  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="br-t_3 br_primary-2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
            <div class="p_2">&nbsp;</div>
            <header class="p-t_3">
                <h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
                    <strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
                    <span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
                        Cardiovascular Update for the Clinician III Chest Pain Myocardial Side Effect Valvular Chest Pain Pharmacologic Valvular Heart Disease Side Effect 
                    </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 m-t_auto">
                <a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
            </aside>
            </div>
        </article>    </div>
</section>
Copy Code