Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.4.1.2.1 Card with Inset Image

A simple card component with an inset image. Because of the image the headers and text should be more consise then the Simple Card.

Sub.Placeholder.Image.16x9 - Image 360w x 162h
Sub Components in Design:
    Sub.ClassList.Grid.Card.Split-Triple - Triple Card Holder Classlist
    Data Elements:

      Example

      Default styling

      Rerum libg dero pariatur (40 Characters)

      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

      FORMAT:

      Header - Max Characters of 40

      Content - Max Characters of 150

      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:md p-x_5:lg p-t_3 p-t_4:md p-t_5:lg">
        <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" class="br_radius" />
    </div>
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Rerum libg dero pariatur (40&nbsp;Characters)
        </h3>
        <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&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