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
<div class="relative">
    <div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
        <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Login <i class="fas fa-sign-in p-l_2"></i></a>
        <a class="btn bg_primary-n1 h:bg_primary-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Register</a>
   </div>
    <picture class="w_100">
        <source class="w_100" srcset="https://via.placeholder.com/1440x200.png?text=Desktop+Large" media="(min-width: 1200px)">
        <source class="w_100" srcset="https://via.placeholder.com/1200x200.png?text=Desktop" media="(min-width: 1024px)">
        <source class="w_100" srcset="https://via.placeholder.com/768x200.png?text=Tablet" media="(min-width: 768px)">
        <source class="w_100" srcset="https://via.placeholder.com/600x250.png?text=Mobile" media="(min-width: 400px)"> <source class="w_100" srcset="https://via.placeholder.com/400x300.png?text=Mobile" media="(min-width: 400px)">
        <img src="https://via.placeholder.com/400x300.png?text=Mobile" class="w_100" alt="">
    </picture>
</div>
Copy Code