Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.4.3.1.1 Image-Text Panel with CTA Link Reverses

This layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is formated so the image always stacks above the content when in mobile. 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.Component.Common.ReadMoreArrow - Read More Arrow Sub.Placeholder.Image.600x400 - 600x400 Image Placeholder
Sub Components in Design:

    Example

    Default styling

    Fill me in!

    Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 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)

    FORMAT:

    Headline - Max Characters 80

    Content - Max Characters 200

    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.

    <div label="split-panel" class="bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md ">
    <div class="grid items_center:lg items_start justify_center order_1 order_2:lg">
        <img src="https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42" alt="Fill me in!" class="w_100 aspect_3x2 ">
    </div>
    <div class="font_n1 font_0:lg flex_column flex gap_4 order_1:lg order_2">
      <div zone-label="main-content" class="">
        <h3 class="m-t_0">Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)</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>
      <footer class="flex flex_row m-t_auto c_accent-n2">
        <div class="flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right"><a href="https://www.acc.org/About-ACC/Diversity-and-Inclusion" class="link">Panel's Call to Action</a></div>
        <span class="fa-stack font_6 order_2">
                <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
        </span>    </footer>
    </div>
</div>
    Copy Code