Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/library_boot.css, line 6845

6.2.3 Side Bar Area With Ad

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

Example

Default styling

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