Action Hero
Use this if you want to call attention to a secondary chunk of content and/or action item(s).
Standard Action Hero
Introduced in Version 1.0.0
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
CleanSlate Implementation Notes What’s this?
When Using a Shared Partial
- Add a
wvu-action-heropartial to a template.
When Using the Super Template
- Add a
action-herocomponent to a slot.
Element Styles
- If you want to add a background image, upload your image to Files and label the image with
{page-slug}-action-hero-{instance-number}-background.
If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. We also have a Beginner’s Guide.
Action Hero Card
Introduced in Version 1.0.0
Action Hero Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
CleanSlate Implementation Notes What’s this?
When Using a Shared Partial
- Add a
wvu-action-hero-cardpartial to a template.
When Using the Super Template
- Add a
action-hero-cardcomponent to a slot.
Element Styles
- If you want to add a background image, upload your image to Files and label the image with
{page-slug}-action-hero-card-{instance-number}-background.
If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. We also have a Beginner’s Guide.
Action Hero Card
Introduced in Version 1.0.0
Another Action Hero Card Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
CleanSlate Implementation Notes What’s this?
When Using a Shared Partial
- Add a
wvu-action-hero-cardpartial to a template.
When Using the Super Template
- Add a
action-hero-cardcomponent to a slot.
Element Styles
- Apply these utility classes to component container:
wvu-bg-blend-mode-luminosity--90 bg-wvu-neutral--white bg-wvu-blue - If you want to add a background image, upload your image to Files and label the image with
{page-slug}-action-hero-card-{instance-number}-background.
If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. We also have a Beginner’s Guide.
Action Hero w/Two Columns
Introduced in Version 1.0.0
It Starts Now
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to ActionCleanSlate Implementation Notes What’s this?
When Using a Shared Partial
- Add a
wvu-action-hero-two-columnpartial to a template.
When Using the Super Template
- Add a
action-hero-two-columncomponent to a slot.
Element Styles
- Apply these utility classes to component container:
bg-wvu-neutral--black text-white wvu-bg-vignetting--80 wvu-bg-position-bottom - If you want to add a background image, upload your image to Files and label the image with
{page-slug}-action-hero-two-column-{instance-number}-background.
If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. We also have a Beginner’s Guide.