Skip to main content
Design System
Use / Download Contribute

Hero

Feature your main content and call to action. This content should reflect your site’s most important user need or goal.

Find a bug? Create an issue.
Have an idea for a new component? Tell us.

Standard Hero

Introduced in Version 1.0.0

It Starts Now.

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Do

  • Use this when you have a visually compelling background photo, and can accrue such photos on a consistent basis.
  • Use a compelling header that is in-brand and relevant to your most important content/action item.
  • Have a clear call to action.

Don’t

  • Don't use the hero pattern without a clear call-to-action.
  • Don't use a background image that renders your copy illegible.
  • Don't use a background photo that is pixelated.
  • Don't use a background photo unless it meets our brand guidelines.
  • Don't use more than one hero unit on a page.
  • Don't just repeat the site title in the header.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-hero partial to a template.

When Using the Super Template

  • Add a hero component 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}-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.

Standard Hero

Introduced in Version 1.0.0

This is where ideas come first.

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Do

  • Use this when you have a visually compelling background photo, and can accrue such photos on a consistent basis.
  • Use a compelling header that is in-brand and relevant to your most important content/action item.
  • Have a clear call to action.

Don’t

  • Don't use the hero pattern without a clear call-to-action.
  • Don't use a background image that renders your copy illegible.
  • Don't use a background photo that is pixelated.
  • Don't use a background photo unless it meets our brand guidelines.
  • Don't use more than one hero unit on a page.
  • Don't just repeat the site title in the header.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-hero partial to a template.
  • Set align to right.

When Using the Super Template

  • Add a hero component to a slot.
  • Select right from the Slot Alignment dropdown menu associated with the component’s slot.

Element Styles

  • Apply these utility classes to component container:
    bg-dark text-white wvu-bg-position-center wvu-bg-size-cover wvu-bg-vignetting wvu-bg-vignetting--right
  • Apply these utility classes for component header:
    display-3 iowan-old-style-black-italic wvu-slash
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-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.

Standard Hero w/Long Headline

Introduced in Version 1.0.0

The future will be built by those who are willing to get up and go after it.

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-hero partial to a template.

When Using the Super Template

  • Add a hero component to a slot.

Element Styles

  • Apply these utility classes to component container:
    wvu-bg-blend-mode-luminosity--80 bg-wvu-neutral--black text-white wvu-bg-pattern-grid-transparent
  • Apply these utility classes for component header:
    display-4 wvu-shout wvu-slash
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-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.

Standard Hero w/Centered Text

Introduced in Version 1.0.0

A celebration of success.

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-hero partial to a template.
  • Set align to middle.

When Using the Super Template

  • Add a hero component to a slot.
  • Select middle from the Slot Alignment dropdown menu associated with the component’s slot.

Element Styles

  • Apply these utility classes to component container:
    text-center wvu-bg-blend-mode-luminosity--80 bg-wvu-neutral--black text-white
  • Apply these utility classes for component header:
    display-2 wvu-shout wvu-slash wvu-slash--skinny wvu-slash--center-bottom wvu-slash--bottom
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-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.

Blog Article Hero

Introduced in Version 1.0.0

Hero

Vision, Values & Playlists

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-blog-article-hero partial to a template.

When Using the Super Template

  • Add a blog-article-hero component to a slot.

Element Styles

  • Apply these utility classes for component header:
    display-2 iowan-old-style
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-blog-article-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.