When to Use
Example 1: Standard Action Hero
Action Hero Headline
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Call to ActionHere is a Secondary Call to Action
<section id="action-hero-1" aria-labelledby="action-hero-1-label" class=" py-5 text-center bg-wvu-gold wvu-bg-topo-dark text-wvu-blue wvu-overflow-hidden wvu-background-size-cover">
<div class="container position-relative wvu-z-index-content">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 id="action-hero-1-label" class="display-2 wvu-shout">Action Hero Headline</h2>
<p class="lead pb-2">This is a simple hero unit, a simple jumbotron-style component for calling extraattention to featured content or information.</p>
<a class="btn btn-wvu-blue btn-lg" href="#" role="button">Call to Action</a>
<p class="mt-2 mb-0">Here is a
<a href="#" class="text-wvu-accent--dark-blue">Secondary Call to Action</a>
</p>
</div>
</div>
</div>
</section>
Example 2: Alternate
Action Hero Headline
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Call to ActionHere is a Secondary Call to Action
<section id="action-hero-2" aria-labelledby="action-hero-2-label" class=" py-5 text-center bg-wvu-accent--blue-dark wvu-bg-topo-light text-white wvu-overflow-hidden wvu-background-size-cover wvu-bg-position-bottom wvu-bg-blend-mode-luminosity" style="background-image: url(https://designsystem.wvu.edu/files/97f66df2-8acd-40a9-8785-bc628229758e/1780x1780?cb=4e7d4db13fdf569c894bec567f2d27dc)">
<div class="container position-relative wvu-z-index-content">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 id="action-hero-2-label" class="display-3 iowan-old-style-black-italic text-wvu-gold wvu-bar wvu-bar--white wvu-bar--center wvu-bar--bottom">Action Hero Headline</h2>
<p class="lead pb-2">This is a simple hero unit, a simple jumbotron-style component for calling extraattention to featured content or information.</p>
<a class="btn btn-wvu-gold btn-lg" href="#" role="button">Call to Action</a>
<p class="mt-2 mb-0">Here is a
<a href="#" class="text-wvu-gold">Secondary Call to Action</a>
</p>
</div>
</div>
</div>
</section>
Example 3: Alternate
Action Hero Headline
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Call to ActionHere is a Secondary Call to Action
<section id="action-hero-3" aria-labelledby="action-hero-3-label" class=" py-5 text-center bg-wvu-accent--blue-light wvu-bg-topo-dark text-wvu-blue wvu-overflow-hidden wvu-background-size-cover">
<div class="container position-relative wvu-z-index-content">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 id="action-hero-3-label" class="display-4 helvetica-neue-bold">Action Hero Headline</h2>
<p class="iowan-old-style fs-4 pb-2">This is a simple hero unit, a simple jumbotron-style component for calling extraattention to featured content or information.</p>
<a class="btn btn-wvu-blue btn-lg" href="#" role="button">Call to Action</a>
<p class="mt-2 mb-0">Here is a
<a href="#" class="text-wvu-accent--dark-blue">Secondary Call to Action</a>
</p>
</div>
</div>
</div>
</section>