Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.5.1.3 Card Photo - Slim

This compact card pattern combines a slim, cropped image with a headline, supporting text, and a required call-to-action button. Commonly used in a 3-up layout or a 2-up layout when a sidebar is present, this style introduces subtle branding or sub-brand visual flair without dominating the page. These cards are designed to support the primary goals of the page, guiding users toward key actions or destinations. Each card must maintain a singular focus to ensure clarity and effectiveness.

HTML.Inputs.Button - Button
Sub Components in Design:
    Sub.Placeholder.Image.500x100 - Image 500w x 100w Sub.Placeholder.Text.40ch - Header Sub.Placeholder.Text.60ch - Sub Header (Optional) Sub.Placeholder.Text.200ch - Card Text
    Data Elements:

      Example

      Default styling

      New science and guidelines

      Rerum libg dero pariatur (40 Characters) Sed ut perspiciatis unde omnis iste natus er (60 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:

      Use when reinforcing sub-branding or when the imagery is purely decorative or thematic. Avoid when the image provides essential context for the task or is unique to the content, as the slim crop may obscure important details. In those cases, use a card pattern that allows for a larger, more informative image. Do Not combine multiple actions or messages in a single card.

      <div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
    <header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
        <img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
    </header>
    <main class="m_auto">
        <h3 class="">
            Rerum libg dero pariatur (40&nbsp;Characters)            <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60&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>
    </main>
    <footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
        <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </footer>
</div>
      Copy Code