Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Example s

    <article class="c_black">
    <div class="relative">
        <div class="block:lg p-x_5:md">
            <div class="m_auto m_auto:md self_center text_center max-w_20">
                <a class="aspect_4x3:lg  block aspect_21x9 aspect_16x9:md bg_top bg_cover bg_no-repeat bg_black generic_video br_1 br_radius br_solid br_black-3 flex_shrink relative shadow_3 text_center c_white-6 h:c_white [modifier]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100">
                        <i class="absolute c_white-9 fa-play-circle text-shadow_black-1 fas flex_auto font_5 font_10:md self_center text_center w_100"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="c_primary-n4 flex_auto font_1 font_display font_medium">
            <div class="lh_2 m-t_2 p_3 p-y_2">
                <a href="#" class="">
                    <span class="block lh_1"><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</span>
                </a>
            </div>
        </div>
    </div>
    <div class="br-t_1 br_dotted br_black-3 c_black flex flex_wrap flex_column gap-y_3 flex_row:md font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:undecorated uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_auto m-l_auto:md self_center">
             <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