Skip to main content
Design System
Use / Download Contribute

Profile Hero

Feature a faculty member, student, program, facility, etc. in a visually compelling way.

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

Profile Hero

Introduced in Version 1.0.0

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

Jane Schmoe, Biology, Class of ’22

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

View Profile

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:
    bg-wvu-neutral--black text-white wvu-bg-pattern-grid-transparent wvu-bg-vignetting--80 wvu-bg-position-center-left--80 wvu-bg-position-mobile-top wvu-bg-position-sm-center-left--85 wvu-bg-position-md-center-left--80 wvu-bg-position-xl-center-right--0
  • 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.

Profile Hero

Introduced in Version 1.0.0

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

Joe Schmoe, Biology, Class of ’22

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

View Profile

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-wvu-neutral--black text-white wvu-bg-pattern-grid-transparent wvu-bg-vignetting--80 wvu-bg-vignetting--right wvu-bg-position-center-left--80 wvu-bg-position-mobile-top wvu-bg-position-sm-center-left--85 wvu-bg-position-md-center-left--80 wvu-bg-position-xl-center-right--0
  • 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.

Profile Hero (Split)

Introduced in Version 1.0.0

Header Goes Here

Center for Cool Innovation

For even more hands-on experience and to improve the oral health of children and adults across the state, School of Dentistry students must accumulate 125 hours or more of community engagement work prior to graduation.

Action Item

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-action-hero-split partial to a template.

When Using the Super Template

  • Add a action-hero-split component to a slot.

Element Styles

  • Apply these utility classes to component container:
    wvu-bg-position-spacer-md-top wvu-bg-position-center-left--70 wvu-bg-position-xl-center-right--80
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-action-hero-split-{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.

Profile Hero (Split)

Introduced in Version 1.0.0

Header Goes Here

Center for Cool Innovation

For even more hands-on experience and to improve the oral health of children and adults across the state, School of Dentistry students must accumulate 125 hours or more of community engagement work prior to graduation.

Action Item

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

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

When Using the Super Template

  • Add a action-hero-split 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:
    wvu-bg-position-spacer-md-top wvu-bg-position-center-left--70 wvu-bg-position-xl-center-right--80
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-action-hero-split-{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.