Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.4.4.2 Product CTA

This call-to-action component highlights a specific product or educational resource, pairing branded imagery with concise promotional content and a prominent button. Use it to drive conversions for key offerings, such as board prep tools or certifications. Place in sidebars, landing pages, or learning resource hubs for maximum visibility.

MarkupClasses:

HTML.Inputs.Button.CTA - CTA Button Sub.Placeholder.Image.320x300 - Image 320x300 Sub.Placeholder.Image.16x9 - Image 455x195
Sub Components in Design:
    DATA:
    Data Elements:

      Example

      Default styling

      Hero Image

      ProductNameSAP
      Product Description

      Ready to Take the Next Step?

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

      NOTE:
      The color in the product name uses the pathway color codes 
      <div label="split-panel" class="bg_primary-5 br_radius columns_1 columns_2:md gap_4 gap_5:md grid m-t_4 m-x_n4 p_4 p_5:md relative">
  <div class="col-end_2:md col_all columns_1 grid isolation_isolate overflow_hidden relative rows_1">
    <picture class="col_all row_all bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" alt="Hero Image" loading="lazy" class="bg_cover flex_100">
    </picture>
    <div class="b_3 col_all font-size_up-2 grid inset_0 justify_start m-y_4 relative row_all self_center">
      <h2 class="font-size_up-2 lh_1 m_0 c_white isolation_isolate relative">
        <span class="inline-block p-x_4 p-y_3 bg_acc-n3 box-decoration_clone"><strong class="font_xbold c_special">ProductName</strong>SAP</span><br>
        <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3 box-decoration_clone">Product Description</span>
      </h2>
    </div>
  </div>
  <div class="font_n1 font_0:lg flex_column flex gap_4">
    <div zone-label="main-content" class="p-y_4">
      <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display"><strong class="font-size_up m-b_2 block">Ready to Take the Next Step?</strong></h2>
      <p class="font-size_up lh_3">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 btn-primary btn-lg capitalize">Purchase</button>    </div>
  </div>
</div>
      Copy Code