Skip to main content
Design System
Use / Download Contribute

Masthead

Primary identifier for your site. Let’s the user know at a glance where they are. A masthead is required for all WVU websites.

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

Standard Masthead w/Buttons

Introduced in Version 1.0.0

West Virginia University Masthead Title
Apply Link 1 Apply Link 2 Apply Link 3

Don’t

  • Don’t use the name of your parent organization in your logo lockup. This makes it look like you are on your parent organization’s website. If you want to create an association with your parent organization’s website, fill out the masthead_college_link_title and masthead_college_link_address fields in your site settings.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • The wvu-masthead component is included in the default.html layout.

When Using the Super Template

  • The wvu-masthead component is included in each theme template.

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.

Masthead w/Co-Brand

Introduced in Version 1.0.0

West Virginia University Masthead Title MSIR 60 Years logo
Apply Link 1 Apply Link 2 Apply Link 3

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • The wvu-masthead component is included in the default.html layout.
  • Enter the URL of the alternate logo you want to use in the has_alternate_logo custom data field in your site’s settings (you should upload your logo to CleanSlate first). Omit the https:// part of the URL.
  • Enter true in the has_co_brand custom data field in your site’s settings.

When Using the Super Template

  • The wvu-masthead component is included in each theme template.
  • Enter the name of your logo lockup in the masthead_title field of your site settings.
  • Enter the URL of the alternate logo you want to use in the has_alternate_logo custom data field in your site’s settings (you should upload your logo to CleanSlate first). Omit the https:// part of the URL.
  • Enter true in the has_co_brand custom data field in your site’s settings.

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.

Masthead w/Co-Brand

Introduced in Version 1.0.0

West Virginia University Masthead Title Admissions
Apply Link 1 Apply Link 2 Apply Link 3

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • The wvu-masthead component is included in the default.html layout.
  • Enter the text you want to display as the co-brand in the has_co_brand custom data field in your site’s settings.

When Using the Super Template

  • The wvu-masthead component is included in each theme template.
  • Enter the name of your logo lockup in the masthead_title field of your site settings.
  • Enter the text you want to display as the co-brand in the has_co_brand custom data field in your site’s settings.

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.

Gold Masthead

Introduced in Version 1.0.0

West Virginia University Masthead Title Here Is a Unit Name That Has an Extraordinary Long Title
Apply Link 1 Apply Link 2 Apply Link 3

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • The wvu-masthead component is included in the default.html layout.
  • Enter gold in the masthead_color custom data field in your site’s settings.
  • Enter the text you want to display as the co-brand in the has_co_brand custom data field in your site’s settings.

When Using the Super Template

  • The wvu-masthead component is included in each theme template.
  • Enter gold in the masthead_color custom data field in your site’s settings.
  • Enter the name of your logo lockup in the masthead_title field of your site settings.
  • Enter the text you want to display as the co-brand in the has_co_brand custom data field in your site’s settings.

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.

Masthead w/Alternate Logo

Introduced in Version 1.0.0

Unit or School Name WVU 150 Years logo lockup
Apply Link 1 Apply Link 2 Apply Link 3

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • The wvu-masthead component is included in the default.html layout.
  • Enter the URL of the alternate logo you want to use in the has_alternate_logo custom data field in your site’s settings (you should upload your logo to CleanSlate first). Omit the https:// part of the URL.

When Using the Super Template

  • The wvu-masthead component is included in each theme template.
  • Enter the URL of the alternate logo you want to use in the has_alternate_logo custom data field in your site’s settings (you should upload your logo to CleanSlate first). Omit the https:// part of the URL.

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.

Faculty Masthead

Introduced in Version 1.0.0

West Virginia University Masthead Title Professor Joe Schmoe, PhD Department of Chemistry
Apply Link 1 Apply Link 2 Apply Link 3

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • The wvu-masthead component is included in the default.html layout.
  • Enter the text you want to display as the co-brand in the has_co_brand custom data field in your site’s settings.
  • Enter the text you want to display as the co-brand subtitle in the co_brand_subtitle custom data field in your site’s settings.

When Using the Super Template

  • The wvu-masthead component is included in each theme template.
  • Enter the name of your logo lockup in the masthead_title field of your site settings.
  • Enter the text you want to display as the co-brand in the has_co_brand custom data field in your site’s settings.
  • Enter the text you want to display as the co-brand subtitle in the co_brand_subtitle custom data field in your site’s settings.

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.

Masthead w/Parent Organization

Introduced in Version 1.0.0

West Virginia University Masthead Title
Parent Organization Name Goes Here
Apply Link 1 Apply Link 2 Apply Link 3

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • The wvu-masthead component is included in the default.html layout.
  • Enter the text you want to display as the parent organization in the masthead_college_link_title custom data field in your site’s settings.

When Using the Super Template

  • The wvu-masthead component is included in each theme template.
  • Enter the text you want to display as the parent organization in the masthead_college_link_title custom data field in your site’s settings.

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.