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.

Microsite Reverse Secondary Hero Section

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Starts: XXth Month

Duration: XX weeks

<section id="hero" class="branding-reverse-secondary heroWrapper cmn-hero"
    style="background-image:url(./assets/component-images/240*80px.svg);background-repeat:no-repeat;background-position:center center;background-size:cover">
    <div class="container cmn-hero--wrapper">
        <div class="row">
            <div class="m-auto col-12">
                <h2 class="text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8 m-auto">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </h2>
                <h4 class="text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </h4>
                <h5
                    class="medium-text-2 text-weight-bold text-center col-12 col-lg-10 m-l-auto m-r-auto m-t-lg-20 m-t-10 m-b-0">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                </h5>
            </div>
        </div>
        <div class="row justify-content-center text-sm-center featureContainer">
            <div class="col-12 col-sm-4 d-flex d-sm-block align-items-center featureItem">
                <div class="featureImageParent">
                    <span class="blueprint-icon icon-calendar"></span>
                </div>
                <h5 class="text-weight-semibold mb-0">Starts: XXth Month</h5>
            </div>
            <div class="col-12 col-sm-4 d-flex d-sm-block align-items-center featureItem">
                <div class="featureImageParent">
                    <span class="blueprint-icon icon-duration"></span>
                </div>
                <h5 class="text-weight-semibold mb-0">Duration: XX weeks</h5>
            </div>
        </div>
        <div class="row justify-content-center text-sm-center cta-parent">
            <div class="col-12">
                <button type="button" class="btn btn--large" aria-label="Apply Button">
                    Button
                </button>
            </div>
        </div>
    </div>
</section>

Microsite Reverse Secondary Hero Section

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Starts: XXth Month

Duration: XX weeks

<section id="hero" class="branding-reverse-secondary-gradient heroWrapper cmn-hero"
    style="background-image:url(./assets/component-images/240*80px.svg);background-repeat:no-repeat;background-position:center center;background-size:cover">
    <div class="container cmn-hero--wrapper">
        <div class="row">
            <div class="m-auto col-12">
                <h2 class="text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8 m-auto">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </h2>
                <h4 class="text-weight-semibold text-center col-xl-8 col-lg-10 col-md-8">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </h4>
                <h5
                    class="medium-text-2 text-weight-bold text-center col-12 col-lg-10 m-l-auto m-r-auto m-t-lg-20 m-t-10 m-b-0">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                </h5>
            </div>
        </div>
        <div class="row justify-content-center text-sm-center featureContainer">
            <div class="col-12 col-sm-4 d-flex d-sm-block align-items-center featureItem">
                <div class="featureImageParent">
                    <span class="blueprint-icon icon-calendar"></span>
                </div>
                <h5 class="text-weight-semibold mb-0">Starts: XXth Month</h5>
            </div>
            <div class="col-12 col-sm-4 d-flex d-sm-block align-items-center featureItem">
                <div class="featureImageParent">
                    <span class="blueprint-icon icon-duration"></span>
                </div>
                <h5 class="text-weight-semibold mb-0">Duration: XX weeks</h5>
            </div>
        </div>
        <div class="row justify-content-center text-sm-center cta-parent">
            <div class="col-12">
                <button type="button" class="btn btn--large" aria-label="Apply Button">
                    Button
                </button>
            </div>
        </div>
    </div>
</section>