Hero Section


A Hero Section is the first thing users see on a webpage. It typically includes a headline, subheading, call-to-action (CTA) button, and an eye-catching background or image.

Microsite Thank You Hero Section

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<section id="hero" class="branding-primary-secondary-gradient heroWrapper text-light position--relative cmn-hero">
    <div class="container position-relative">
       <div class="container cmn-hero--wrapper">
          <div class="row justify-content-center text-center m-b-30">
             <div class="col-12"><span class="blueprint-icon icon-success text-light icon-6x"></span></div>
          </div>
          <div class="row">
             <div class="m-auto col-12">
                <h1 class="large-text-2 text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8 m-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
             </div>
          </div>
          <div class="row justify-content-center text-sm-center feature-container"></div>
       </div>
    </div>
 </section>

Microsite Thank You with Button Hero Section

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<section id="hero" class="branding-primary-secondary-gradient heroWrapper text-light position--relative cmn-hero">
    <div class="container position-relative">
       <div class="container cmn-hero--wrapper">
          <div class="row justify-content-center text-center m-b-30">
             <div class="col-12"><span class="blueprint-icon icon-success text-light icon-6x"></span></div>
          </div>
          <div class="row">
             <div class="m-auto col-12">
                <h1 class="large-text-2 text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8 m-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
             </div>
          </div>
          <div class="row justify-content-center text-sm-center feature-container"></div>
       </div>
       <div class="cta-parent">
          <div class="btn--container"><a href="#" rel="noreferrer" class="btn btn--large display--inline-block">Button</a></div>
       </div>
    </div>
 </section>