Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.7.1 Hero Image with CTA

experimental

The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

Recipes.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image Recipes.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation Recipes.MicroSite.Sub.PageTitleTreatment - Page Title Treatment Recipes.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight
Sub Components in Design:

    Example

    Default styling

    Hero Image

    Transformaing Cardiovascular Care For All Around The World

    The Value of UX and Member Engagement

    Accusantium iure non nam quaerat nesciunt ad. Vero nobis ea quo laudantium eum esse. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

    caution:
    This item is not finalized and might be subject to change
    NOTE:
    The Hero Image with CTA component is used to create impactful hero sections with a compelling call-to-action overlay. It combines a visually appealing hero image with a title, description, and call-to-action button. 
    <div data-item="hero-image-cta" class="hero relative isolation_isolate grid rows_3 rows_2:md columns_4:md columns_5:lg columns_2 m-t_n4 m-x_n4  overflow_hidden " style="--hero-overlay-opacity:.9; --row-1:2.5rem; --row-2:min-content;">
    <picture data-item="responsive-hero-image" class=" col_all grid row_all">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png" media="(min-width: 1024px)" class="display_none">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png" media="(min-width: 768px)" class="display_none">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png" media="(min-width: 400px)" class="display_none">
          <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image" class="absolute inset_0 w_100">
    </picture>    <div class="z_1 row-start_start row_en:mdd_1 col-start_start col-end_end flex flex_row justify_start">
        <nav data-item="hero-image-breadcrumb-nav" class="  relative isolation_isolate p-y_3 p-x_4 c_white-8 w_au:mdto font_n1 font_0:md">
            <!-- Breadcrumb navigation content goes here -->
        	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
        	The page this was a child of</a>
        </nav>    </div>
    <div class="relative row-start_2 row-end_3 col-start_start col-end_3:md col-end_end p-y_0 p-r_4 m-l_0:md">
        <h1 class="c_white  m-t_5:lg m-t_4 m-b_0 font_5:lg font_4:md font_3 isolation_isolate relative" data-item="hero-title" >
          <span>Transformaing</span>
          <span>Cardiovascular</span>
          <span>Care</span>
          <span>For</span>
          <span>All</span>
          <span>Around</span>
          <span>The</span>
          <span>World</span>
        </h1>    </div>
    <div class="col-end_end col-start_n3:md col-start_n4:lg col-start_start font_0:lg font_n1 p-t_0:md p-t_5 relative row-end_end row-end_end:md row-start_2:md row-start_3">
        <div data-item="cta-callout" class="z_1 c_white color_inherit font_0 isolation_isolate m-b_4 m-t_n4 m-x_4 m-x_5:lg p_4 p_5:lg reading-typography relative z_1">
              <h2 data-item="cta-title" class="font_medium m-t_0">The Value of UX and Member Engagement</h2>
              <p data-item="cta-description" class="font-size_up-1 lh_2">Accusantium iure non nam quaerat nesciunt ad. Vero nobis ea quo laudantium eum esse. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
              <div class="grid justify_center">
                <button  class="btn btn-primary not-link">Get Started</button>
              </div>
        </div>    </div>
</div>
    Copy Code