Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

4.1.1 Hero Image with CTA

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 - Hero Background Image Component.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation Component.MicroSite.Sub.PageTitleTreatment - Page Title Treatment Component.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight
Sub Components in Design:

    Example

    Default styling

    Hero Image

    Hero Statement Mision of the Page

    Call to Action Title (CTA). You Should be Engaged

    CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

    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 grid-template="hero-image-cta" id="hero" class="font_3:lg font_2:md font_1">
    <div grid-area="background" 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 grid-area="breadcrumb" class="z_1 flex flex_row justify_start">
        <nav data-item="hero-image-breadcrumb-nav" class="font-size_down-2 relative isolation_isolate p-y_3 p-x_4 c_white-8">
        	<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 Parent of This Micro Section of the Site</a>
        </nav>    </div>
    <div grid-area="title" class="relative font-size_up-2 m-y_6:lg m-y_5:md">
        <h1 data-item="hero-title"
          class="font-size_up-2 lh_1 m_0 c_white isolation_isolate relative">
          <span class="text">Hero</span>
          <span class="text">Statement</span>
          <span class="text">Mision</span>
          <span class="text">of </span>
          <span class="text">the</span>
          <span class="text">Page</span>
        </h1>    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
        <div data-item="cta-callout" class="z_1 font-size_0 c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
              <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
              <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
              <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>
</div>
    Copy Code