Skip to main content
Design System
Use / Download Contribute

Landing Page Header

When you want a fancy page with compelling content. Maybe you direct users to this page in a marketing piece and you want to make a strong visual impact to introduce your content.

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

Landing Page Header 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 Action

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-action-hero-two-column partial to a template.

When Using the Super Template

  • Add a action-hero-two-column component to a slot.

Element Styles

  • Apply these utility classes to component container:
    py-5 bg-wvu-neutral--black text-white wvu-bg-position-center wvu-bg-blend-mode-luminosity--80 bg-wvu-neutral--dark-brown wvu-bg-vignetting
  • 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.

Landing Page Header w/Featurettes

Introduced in Version 1.0.0

Featurettes Headline

Subhead goes here.

Featurette E

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More: Featurette E

Featurette F

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More: Featurette F

Featurette G

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More: Featurette G

Featurette H

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More: Featurette H

Put additional info or links here.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-featurettes partial to a template.
  • Set limit to 4.
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.

When Using the Super Template

  • Add a featurettes component to a slot.
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.
  • Enter 4 into the Limit field associated with the component’s slot.

Element Styles

  • Apply these utility classes to component container:
    bg-wvu-accent--dark-green wvu-bg-vignetting text-white wvu-bg-position-center wvu-bg-blend-mode-luminosity--80 py-5
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-featurettes-{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. Also see our guide on how featurettes work. We also have a Beginner’s Guide.

Landing Page Header w/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

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.

Landing Page Header w/Label and Subhead

Introduced in Version 1.0.0

Landing Page Header

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-backpage-header partial to a template.
  • Set header_subhead to 1.
  • Set header_label to 1.

When Using the Super Template

  • Add a backpage-header component to a slot.
  • Check the “Show header subhead” box in your page’s settings.
  • Check the “Show header label” box in your page’s settings.

Element Styles

  • Apply these utility classes to component container:
    pb-5 bg-wvu-neutral--dark-gray text-white wvu-bg-vignetting
  • 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.