Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.7.3 Micro Branding with CTA Button

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.BackgroundImageMicro - Background Image Recipes.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation Recipes.MicroSite.Sub.HeroImage.CTAButton - CTA Button
Sub Components in Design:

    Example

    Default styling

    Hero Image
    Join Us: Become an ACC Member
    caution:
    This item is not finalized and might be subject to change
    NOTE:
    Micro Branding is used to create compelling call-to-action overlay. It combines a visually appealing hero image with a call-to-action button. 
    <div data-item="hero-image-cta" class="flex flex_column flex_row:md font_3 font_4:md font_5:lg hero isolation_isolate overflow_hidden relative" style="--hero-overlay-opacity:.9;">
     <div class="col_all overflow_hidden row_all">
         <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0">
             <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="flex_100">
         </picture>
     </div>  <div class="items_center p-l_4 p-y_4">
    <span data-item="hero-title" class="c_white isolation_isolate relative">
        <span class="display_none:md"><a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
        <span>Join Us:</span>
        <span>Become</span>
        <span>an</span>
        <span>ACC</span>
        <span>Member</span>
    </span>
  </div>
  <div class="flex_none grid items_center justify_center m-l_auto:md p-x_5 p-y_4 relative">
    <div class="">
        <a href="#" class="br_1 br_solid br_white-3 btn btn-primary font_medium not-link shadow_bevel-bold">Join Now</a>
    </div>
  </div>
</div>
    Copy Code