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.

Microsites Hero Variant One

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

Lorem Ipsum

: XXth Month

: XX weeks

<section id="hero" class="bg-image-gradient heroWrapper text-light position--relative cmn-hero microsite--hero-version-first wide-form-wrapper">
   <div class="hero-image" style="background-image: url(./assets/component-images/240*80px.svg)"></div>
   <div class="wrapper">
      <div class="container position-relative">
         <div class="row items--center">
            <div class="col-12 left-col content-wrapper col-xxl-7 col-xl-6 col-lg-5 col-md-10">
               <h1 class="large-text-2 heading m-b-10">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
               <div class="medium-text-1 m-0 sub-heading">Lorem Ipsum</div>
               <div class="feature-container para--one">
                  <dl class="m-a-0">
                     <dt><span class="blueprint-icon icon-calendar"></span></dt>
                     <dd class="m-a-0">XXth Month</dd>
                  </dl>
                  <dl class="m-a-0">
                     <dt><span class="blueprint-icon icon-duration"></span></dt>
                     <dd class="m-a-0">XX weeks</dd>
                  </dl>
               </div>
            </div>
            <div class="col-12 right-col m-t-30 m-t-lg-0 col-xxl-5 col-xl-6 col-lg-7">
               <div class="lead-form-version-second"></div>
            </div>
         </div>
      </div>
   </div>
</section>