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.

Referral Image Primary Opacity Hero Section

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

Sub-headline: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<section id="hero" class="bg-primary--hero-opacity heroWrapper" style="background:url('./assets/component-images/240*80px.svg') no-repeat left top">
  <div class="container referral-wrapper">
    <div class="row align-items-center">
      <div class="col-12 content-wrapper">
        <h1 class="large-text-1 referral-heading"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h1>
        <h3 class="large-text-3 referral-sub-heading"> Sub-headline: Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h3>
        <div class="referral-form">
          <form>
            <input type="email" placeholder="Enter your email" class="form--text--input referral-input" />
            <button type="button" class="btn btn--mid btn--reverse referral-button" aria-label="Button"> Button </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>