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 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--transparent--light
<div class="wvu-slash wvu-slash--transparent--light">wvu-slash wvu-slash--white</div>
wvu-slash wvu-slash--transparent--dark
<div class="wvu-slash wvu-slash--transparent-dark">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..

Slash

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

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 Bar Right

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

Header With Bar Right Bottom

<h2 class="text-end wvu-bar wvu-bar--bottom wvu-bar--right wvu-shout w-100">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-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-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-dark 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>

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.