Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 9991

5.4.1.1 Half Page Card - Dark

A vertically split card component ideal for highlighting key initiatives or promotional content. Each card features a visual header and a structured text block containing a title, description, and a CTA button. Use these cards in pairs or grids to present multiple pieces of information with equal weight and visual balance.

Sub.ClassList.Grid.Split-50 - Double Card Holder Classlist Sub.Placeholder.Image.21x9 - Image 588w x 252w
Sub Components in Design:

    Example

    Default styling

    Branding for the Annual Report

    Rerum libg dero pariatur (40 Characters)

    Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)

    NOTE:
    Half Cards can have dual actions but the buttons should reflect the primary action as blue and the secondary should be the shade button. 
    <div data-type="card" class="bg_acc br_rounder br-tr_radius br-tl_radius c_white color_inherit flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center">
    <header class="aspect_21x9 overflow_clip br-tr_radius br-tl_radius">
        <img src="https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A" alt="Branding for the Annual Report" width="100%" height="100%">
    </header>
    <div label="content" class="p_4 p_5:lg">
    <h3 class="m-b_0">Rerum libg dero pariatur (40&nbsp;Characters)</h3>
    <p>
        Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    </div>
    <div class="flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-primary wrap">btn-primary wrap</button>        <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </div>
</div>
    Copy Code