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

Source: dist/css/virtual_boot.css, line 12000

8.4.2 Side Bar Area With Ad

This pattern is often used to push the sidebar bellow the main content area.

Example

Layout Zone: Sidebar
Layout Zone: Main
Layout Zone: Ad Rail
<div class="flex flex_row:lg flex_column gap_4 gap_5:lg">
    <div class="flex_auto flex_100 flex flex_row:md flex_column-reverse gap_4 gap_5:lg">
        <div class="flex_auto flex_100 max-w_20:md">
            <div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Sidebar</div>        </div>
        <div class="flex_auto flex_100">
            <div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Main</div>        </div>
    </div>
    <div class="flex_auto flex_100 max_w-100 max-w_10:lg">
        <div class="h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center">Layout Zone: Ad Rail</div>    </div>
</div>
Copy Code