Skip to main content

Action Hero

Shared Partial Name:

wvu-action-hero

When to Use

Use this if you want to call attention to a secondary chunk of content and/or action item(s).

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 Action

Here 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 Action

Here 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 Action

Here 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>

Content Model and Styling Guidelines

The following guidelines will help ensure your content and styling follow our design principles, and ensures consistency and unity across your pages as well as other WVU-branded websites.

Content-Specific Guidelines

Content Max Characters Description
Header* 56 Marketing copy that grabs the user’s attention.
Subhead* 56 A brief teaser related to the call to action.
Blurb* 255 Marketing copy or information related to the call to action.
Call to Action* 16 The user action you want to promote.
Postscript 1-2 Sentences The person’s office location.

* Indicates required content.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared action-hero partial in the Design System CleanSlate. CleanSlate developers can use this component by adding a shared partial to a template. Below are the available configuration options for this component.