Skip to main content

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 gold 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.

wvu-slash wvu-slash--gold
<div class="wvu-slash wvu-slash--gold">wvu-slash wvu-slash--gold</div>
wvu-slash wvu-slash--blue
<div class="wvu-slash wvu-slash--blue">wvu-slash wvu-slash--blue</div>
wvu-slash wvu-slash--white
<div class="wvu-slash wvu-slash--white">wvu-slash wvu-slash--white</div>
wvu-slash wvu-slash--gold wvu-slash--center
<div class="wvu-slash wvu-slash--gold wvu-slash--center">wvu-slash wvu-slash--gold wvu-slash--center</div>
wvu-slash wvu-slash--gold wvu-slash--center-bottom
<div class="wvu-slash wvu-slash--gold wvu-slash--center-bottom">wvu-slash wvu-slash--gold wvu-slash--center-bottom</div>
wvu-slash wvu-slash--gold wvu-slash--right
<div class="wvu-slash wvu-slash--gold wvu-slash--right">wvu-slash wvu-slash--gold wvu-slash--right</div>
wvu-slash wvu-slash--gold wvu-slash--right-bottom
<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. There are also options for a skinny slash: wvu-slash--skinny.

Slash

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

Skinny Slash

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

Multiple Line Skinny Slash

<h2 class="wvu-slash wvu-slash--skinny wvu-slash--2-right wvu-shout display-2 d-inline-block">
  Skinny 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.

Header With Bar

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

Header With Bar on Bottom

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

Header With Bar Centered

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

Header With Bar Centered Bottom

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

Header With White Bar

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

WVU Pattern

Use wvu-bg-pattern-gold or wvu-bg-pattern-blue to apply either a gold or blue background pattern to an element. Or 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

wvu-bg-pattern-gold
<div class="wvu-bg-pattern-gold py-5 text-wvu-blue text-center w-100">
  wvu-bg-pattern-gold
</div>
wvu-bg-pattern-blue
<div class="wvu-bg-pattern-blue py-5 text-wvu-blue text-center w-100">
  wvu-bg-pattern-blue
</div>
wvu-bg-pattern-grid
<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>
wvu-bg-pattern-grid-transparent
<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>
wvu-bg-pattern-grid-zoomed
<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>
wvu-bg-pattern-grid-zoomed-transparent
<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>
wvu-bg-pattern-slashes-gold-blue
<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>
wvu-bg-pattern-slashes-gold-blue-white
<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

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