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

Summer COVID-19 Education Series

Weekly episodes of targeted and easy-to-consume education to address current and evolving knowledge and practice gaps to help you manage your patients with COVID-19 and heart disease.

live
June 6, 2020
updates
Every Thursday 12:00 p.m. – 1 p.m. ET June – August
on demand
Until December 31, 2020 
<div id="cvcovid" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_white">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area" href="/CVCOVID"><span class="display_none">Summer COVID-19 Education Series</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">Weekly episodes of targeted and easy-to-consume education to address current and evolving knowledge and practice gaps to help you manage your patients with COVID-19 and heart disease.</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_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">June 6, 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_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">updates</div> <strong class="p-l_2:md">Every Thursday 12:00 p.m. – 1 p.m. ET June – August</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_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until December 31, 2020</strong>
        </div>
    </div>
</div>
<style>
#cvcovid {
    padding-top: 25%;
    background-color: #722569;
     background-image: url(../img/virtual/lobby/COVID20/logo.sm.png), url(../img/virtual/lobby/COVID20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#cvcovid {
    padding-top: calc(70px + 1.5rem);
    background-image: url(../img/virtual/lobby/COVID20/logo.lg.png), url(../img/virtual/lobby/COVID20/secondaryLogo.lg.png), url(../img/virtual/lobby/COVID20/img.lg.png), url(../img/virtual/lobby/COVID20/background.lg.png);
    background-position: 21px 21px, calc(100% - 1rem) 1rem, top right, top center;
    };
}
</style>
Copy Code