Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.4.1.2 Simple Card

A simple card component ideal for summarizing key content with a clear call to action, it maintains vertical rhythm and visual hierarchy.

Sub.ClassList.Grid.Card.Split-Triple - Triple Card Holder Classlist
Data Elements:

    Example

    Default styling

    Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

    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. (200 Characters)

    NOTE:
    Only 1 Action per card. This is to help with context of the action and focus. 
    <div  data-type="card" class="br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container">
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Commodi dolores (30&nbsp;Characters)
            <small class="block font-size_down-2 font_medium m-t_3"> Rerum libg dero pariatur (40&nbsp;Characters)</small>
        </h3>
        <p>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. (200&nbsp;Characters)</p>
    </div>
    <div class="flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>
    Copy Code