Skip to main content
Design System
Use / Download Contribute

Backpage Header

A basic header for a back page (as opposed to a landing page) that serves as a label for the page.

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

Standard Backpage Header

Introduced in Version 1.0.0

Backpage Header

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-backpage-header partial to a template.

When Using the Super Template

  • Add a backpage-header 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}-backpage-header-{instance-number}-background. If you want a background image to apply globally to all backpage headers, label your file with backpage-header-background (more specific labels will always override global ones on a per page basis).

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 Backpage Header

Introduced in Version 1.0.0

Backpage Header

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-backpage-header partial to a template.

When Using the Super Template

  • Add a backpage-header component to a slot.

Element Styles

  • Apply these utility classes to component container:
    bg-white text-wvu-neutral--black
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-backpage-header-{instance-number}-background. If you want a background image to apply globally to all backpage headers, label your file with backpage-header-background (more specific labels will always override global ones on a per page basis).

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 Backpage Header

Introduced in Version 1.0.0

Backpage Header

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-backpage-header partial to a template.

When Using the Super Template

  • Add a backpage-header component to a slot.

Element Styles

  • Apply these utility classes to component container:
    bg-wvu-neutral--black text-white wvu-bg-position-center wvu-bg-vignetting wvu-bg-pattern-grid-transparent
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-backpage-header-{instance-number}-background. If you want a background image to apply globally to all backpage headers, label your file with backpage-header-background (more specific labels will always override global ones on a per page basis).

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.