Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Example

Default styling

ACC.20/WCC Virtual

ACC.20/WCC Virtual brings cutting-edge science and practice-changing updates directly to you. Watch videos and industry presentations, hear from experts, browse posters, download slides, and explore virtual exhibits — all On Demand and all for FREE.

live
March 28 - 30, 2020
on demand
Until June 30, 2020
available credits
  •   cme
  •   cne
<div id="acc20" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_black">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area"href="/ACC20"><span class="display_none">ACC.20/WCC Virtual</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">ACC.20/WCC Virtual brings cutting-edge science and practice-changing updates directly to you. Watch videos and industry presentations, hear from experts, browse posters, download slides, and explore virtual exhibits — all On Demand and all for FREE.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class="">
            <div class="br-b_1 br_solid:md br_black-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">March 28 - 30, 2020</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_black-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until June 30, 2020</strong>
        </div>
        <div class="m-l_auto:md m-t_3 m-t_0:md">
            <div class="br-b_1 br_solid br_black-5 font_n2 m-b_2 text_right:md text_left uppercase">available credits</div>
            <div class="flex_grow uppercase text_right:md font_bold">
                <ul class="m-t_n2 ul_none">
                    <li class="inline-block lh_0 p-l_3:md">
                        <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                    <li class="inline-block lh_0 p-l_3">
                        <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<style>
#acc20 {
    padding-top: 38%;
    background-color: #f4c74c;
    background-image: url(../img/virtual/lobby/ACC20/logo.sm.png), url(../img/virtual/lobby/ACC20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#acc20 {
    padding-top: calc(150px + 1.5rem);
        background-image: url(../img/virtual/lobby/ACC20/logo.lg.png), url(../img/virtual/lobby/ACC20/secondaryLogo.lg.png), url(../img/virtual/lobby/ACC20/img.lg.png), url(../img/virtual/lobby/ACC20/background.lg.png);
    background-position: 4px 16px, calc(100% - 1rem) 13px, top right, top center;
    };
}
</style>
Copy Code