Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.4.3.2 Small Image-Text Panel with CTA Link

This is the alternate layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.

Sub.Placeholder.Image.375x250 - Image 375w x 250w HTML.Inputs.Button.SM - Small Shade Button
Sub Components in Design:

    Example

    Default styling

    Voluptas dolorem unde

    Sed ut perspiciatis unde omnis iste natus er (60 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:

    Headline - Max Characters 60

    Content - Max Characters 150

    NOTE:

    Do use when it is a single directing action for the user, and when content would be too much for a card.

    Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.

    ! Strict Content Constraints ! this design is very structured and requires strict adhearnce.

    <div label="CTA-Callout" class="bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography" style=" --col-1:min(100%, 375px); --col-2:1fr; -row-1:250px;">
    <!-- Image Section -->
    <div grid-label="image" class="col-end_2:lg col_all">
        <img src="https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42" alt="Voluptas dolorem unde" class="w_100 ">
    </div>
    <!-- Content Section -->
    <div grid-label="content-container" class="col-start_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md" style="--col-1: 1fr;">
        <div grid-label="content" class="m_auto max-w_40 p-x_4">
            <h4 class="c_black font_accent lh_1 m-b_4 wrap_balance">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</h4>
            <p class="lh_2 wrap_pretty">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>
            <button class="btn capitalize wrap wrap_balanced btn-shade float_right">btn-shade float_right</button>        </div>
    </div>
</div>
    Copy Code