Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

Default styling

content
content
content
<section item-label="section" class="m-x_n4 wrapper-container">
    <div class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
        <div item-label="content" class="wrapper-container">content</div>
        <div item-label="content" class="wrapper-container">content</div>
        <div item-label="content" class="wrapper-container">content</div>
    </div>
</section>
<!-- 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