Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

Default styling

Main Content
Aside
<div  id="introduction" item-label="section" class="columns_2 columns_4:md columns_5:lg gap_4 gap_5:lg grid isolation_isolate p-b_4 p-b_5:lg p-t_4 p-t_5:lg p-x_3 p-x_4:md p-x_5:lg relative">
    <div item-label="content" class="col-end_3:md col-end_4:lg col-end_end col-start_start">
        Main Content
    </div>
    <div item-label="sidebar-primary"  class="relative col-start_n3:md col-start_start col-end_end font_n1 font_0:lg">
        Aside
    </div>
</div>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->
Copy Code