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.
<section id="hero" class="branding-primary-reverse 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><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">
Wharton Executive Education’s Lorem Ipsum is simply dummy text of the printing and typesetting industry.
(ABAP) curriculum is designed and delivered by world-renowned
Wharton faculty who are at the cutting edge of data analytics,
artificial intelligence, and business leadership. The
comprehensive curriculum ranges from in-depth core modules to
interactive online sessions, as well as online and on-campus
electives.
</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: 12th June</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: 3 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>