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: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

<div class="flex flex_column flex_row:md gap-x_4 max-w_70">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
    <span class="fa-stack m-x_2 m-y_3">
        <i class="fa-notes-medical far fa-stack-2x text-shadow_black-1"></i>
    </span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">Patient Case Quizzes</div>
    <p class="lh_2 font_1 p-b_3">Test your knowledge and sharpen your diagnostic skills to bring appropriate treatment to your patients sooner.</p>
    <section class="br_1 br_solid br_primary br-r_0 br-l_0 font_0">
        <div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
            <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
            <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
        </div>        <div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
            <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
            <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
        </div>    </section>
</main>
</div>
Copy Code