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 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-primary-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"> Headline: Invite Your Colleagues to the Kellogg Experience </h1>
                <h3 class="large-text-3 referral-sub-heading"> Sub-headline: Save up to 10% on program fees, for you and your network </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>