Elements

These utilities to apply a WVU-branded slash, pattern, or grid pattern to an element.

WVU Slash

Use wvu-slash--gold, wvu-slash--blue, or wvu-slash--white to add a slash to a header element, or wvu-ul-slashes--gold, wvu-ul-slashes--blue, or wvu-ul-slashes--white to substitute slashes for bullets in an unordered list.

For headers, you can position the slash at the center, right, center-right, or bottom-right of the text using modifiers wvu-slash--center, wvu-slash--right, wvu-slash--center-right, or wvu-slash--bottom-right.

You can also use modifier classes shift the slash left or right in the case that it is bumping in to text or going behind text to make it illegible. Use wvu-slash--{number}-{direction} where {number} is an integer 1 - 5 and {direction} is one of left, right, up, or down.

The slash’s height will be 150% of the height of its containing element.

<div class="wvu-slash wvu-slash--gold">wvu-slash wvu-slash--gold</div>

<div class="wvu-slash wvu-slash--blue">wvu-slash wvu-slash--blue</div>

<div class="wvu-slash wvu-slash--white">wvu-slash wvu-slash--white</div>

<div class="wvu-slash wvu-slash--transparent--light">wvu-slash wvu-slash--white</div>

<div class="wvu-slash wvu-slash--transparent-dark">wvu-slash wvu-slash--white</div>

<div class="wvu-slash wvu-slash--gold wvu-slash--center">wvu-slash wvu-slash--gold wvu-slash--center</div>

<div class="wvu-slash wvu-slash--gold wvu-slash--center-bottom">wvu-slash wvu-slash--gold wvu-slash--center-bottom</div>

<div class="wvu-slash wvu-slash--gold wvu-slash--right">wvu-slash wvu-slash--gold wvu-slash--right</div>

<div class="wvu-slash wvu-slash--gold wvu-slash--right-bottom">wvu-slash wvu-slash--gold wvu-slash--right-bottom</div>

Sizing

The size of the slash is relative to the size of the text it is being applied to. Below are some examples of the slash being applied to large text..

<h2 class="wvu-slash wvu-shout display-2 d-inline-block">
  Slash on Large Text
</h2>

WVU Bar

Use wvu-bar with a modifier class of either wvu-bar--white, or wvu-bar--center to add a bar to a header element.

<h2 class="wvu-bar wvu-shout">Header With Bar</h2>>

<h2 class="wvu-bar wvu-bar--bottom wvu-shout">Header With Bar</h2>

<h2 class="wvu-bar wvu-bar--center wvu-shout">Header With Bar</h2>

<h2 class="wvu-bar wvu-bar--center wvu-bar--bottom wvu-shout">Header With Bar</h2>

<h2 class="text-end wvu-bar wvu-bar--right wvu-shout w-100">Header With Bar</h2>

<h2 class="text-end wvu-bar wvu-bar--bottom wvu-bar--right wvu-shout w-100">Header With Bar</h2>

<h2 class="wvu-bar wvu-bar--white wvu-shout">Header With Bar</h2>

WVU Pattern

Use wvu-bg-pattern-grid, wvu-bg-pattern-grid-transparent, wvu-bg-pattern-zoomed, and wvu-bg-pattern-grid-zoomed-tranparent to apply a grid wireframe of the WVU pattern to either a photo or a flat color background.

You cannot combine multiple background patterns, for example grid with the solid pattern, or a grid with a transparent grid. Only use one of the background pattern at a time.

Make sure to use wvu-z-index-content to define the z-index of your content when using the grid and slashes utilities shown below. This ensures the content stays above the background images used to achieve these effects.

Examples

<div class="wvu-bg-pattern-grid w-100 py-5 text-white text-center" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">wvu-bg-pattern-grid</div>
</div>

<div class="wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">wvu-bg-pattern-grid-transparent</div>
</div>

<div class="wvu-bg-pattern-grid-zoomed w-100 py-5 text-white text-center" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">wvu-bg-pattern-grid-zoomed</div>
</div>

<div class="wvu-bg-pattern-grid-zoomed-transparent w-100 py-5 text-white text-center" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  
wvu-bg-pattern-grid-zoomed-transparent
</div>

<div class="wvu-bg-pattern-slashes-gold-blue w-100 py-5 text-white text-center" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">wvu-bg-pattern-slashes-gold-blue</div>
</div>

<div class="wvu-bg-pattern-slashes-gold-blue-white w-100 py-5 text-white text-center"style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">wvu-bg-pattern-slashes-gold-blue-white</div>
</div>

WVU Topo Map

Use wvu-bg-topo-dark or wvu-bg-topo-light to apply a topographic map pattern to an element.

Make sure to use wvu-z-index-content to define the z-index of your content when using the topo map utilities shown below. This ensures the content stays above the background images used to achieve these effects.

Examples

<div class="wvu-bg-topo-light py-5 bg-dark text-white text-center w-100">
  <div class="wvu-z-index-content">wvu-bg-topo-light</div>
</div>

<div class="wvu-bg-topo-dark py-5 text-center w-100">
  <div class="wvu-z-index-content">wvu-bg-topo-dark</div>
</div>

Z-Index

When you add background utilities to a component, this will sometimes make a background element appear above your component’s text. To fix this, add a wvu-z-index-content utility class to the text’s container element.