Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

4.4.2 Micro Branding with CTA Button

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.

Component.MicroSite.Sub.HeroImage.BackgroundImage - Background Image Component.MicroSite.Sub.PageTitleTreatment - Page Title Component.MicroSite.Sub.HeroImage.CTAButton - CTA Button
Sub Components in Design:

    Example

    Default styling

    Hero Image

    Hero Statement Mision of the Page™

    NOTE:
    Micro Branding is used to create cohesive experiance by continuing the branding to children pages of a microiste. It combines a slice of hero image with just the single call-to-action button. 
    <div grid-template="hero-image-cta" template-option="micro" class="isolation_isolate overflow_hidden relative">
    <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 grid-area="title">
    <h1 data-item="hero-title"
      class="m_0 m-y_3 m-y_0:lg c_white isolation_isolate relative">
      <span class="display_none:lg"><a href="#RootPage" 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 class="text display_contents">Hero Statement Mision of  the Page&trade;<span>
    </h1>    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
      <div class="grid justify_center items_center ">
        <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
      </div>  </div>
</div>
    Copy Code