Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.4.1.1.1 Half Page Card - Light

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.Placeholder.Image.21x9 - Image 588w x 252w
Sub Components in Design:
    Sub.ClassList.Grid.Split-50 - Double Card Holder Classlist
    Data Elements:

      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_white br-tr_radius br-tl_radius br_rounder 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">btn-primary</button>        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>
      Copy Code