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 Secondary 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-secondary--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>