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 Gradient 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" style="background-image:url(./assets/component-images/240*80px.svg);background-repeat:no-repeat;background-position:center center;background-size:cover" class="bg-secondary-gradient heroWrapper">
    <div class="container referral-wrapper position--relative">
        <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>