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.

Simple Landing Page Primary Background Color

Tagline goes here

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

Subheadline goes here

<section id="hero" class="bg-primary heroWrapper">
    <div class="container position--relative">
        <div class="row m-0 align-items-center">
            <div class="col-12 content-wrapper">
                <p class="m-0 overline--one">Tagline goes here</p>
                <h1 class="large-text-2 heading">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </h1>
                <h4 class="medium-text-1 m-0 sub-heading">
                    Subheadline goes here
                </h4>
            </div>
            <div class="lead-form-wrapper"></div>
        </div>
    </div>
</section>

Simple Landing Page Secondary Background Color

Tagline goes here

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

Subheadline goes here

<section id="hero" class="bg-secondary heroWrapper">
    <div class="container position--relative">
        <div class="row m-0 align-items-center">
            <div class="col-12 content-wrapper">
                <p class="m-0 overline--one">Tagline goes here</p>
                <h1 class="large-text-2 heading">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </h1>
                <h4 class="medium-text-1 m-0 sub-heading">
                    Subheadline goes here
                </h4>
            </div>
            <div class="lead-form-wrapper"></div>
        </div>
    </div>
</section>