Elements

Utilities

If you are a developer making custom themes and components, the WVU Design System offers utilities to add elements such as a slash, topo map pattern, and stickers.

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.

Heading

<h2 class="wvu-slash wvu-shout display-2 d-inline-block">
  Heading
</h2>

List Item
List Item

<ul class="wvu-ul-slashes--gold">
  <li>List Item</li>
  <li>List Item</li>
</ul>

WVU Topo Map

The WVU topo map pattern is now separated out into its own element, positioned behind some content. To use it, the element that contains both the topo map element and the content must use utilities for audience e.g. audience-general, audience-alumni, audience-leaders_partners, or audience-prospective_students, as well as tone-lets-go, and a background color option e.g. bg-option-{number} where {number} can be a number 1 through 8.

The element that contains the pattern must have the classes wvu-b-pattern and wvu-b-pattern-color, and should be followed by an element with the class wvu-b-gradient. See code example below.

<div class="py-6 position-relative audience-general tone-lets-go bg-option-1">
  <div class="wvu-bg-img">
    <div class="wvu-b-pattern wvu-b-pattern-color h-100 w-100 position-absolute" style="opacity: .8"></div>
    <div class="wvu-b-gradient d-flex w-100 h-100 justify-content-between position-absolute"></div>
  </div>
  <div class="wvu-z-index-content"><!--put content here.--></div>
</div>

Stickers

Stickers can be used in combination with a stylized horizontal rule to break up content. There are no utility classes for stickers, but the following code can be used to include them as a component.

<div class="wvu-z-index-content py-6">
  <div class="position-absolute w-100">
    <div class="container">
      <div class="row justify-content-center align-items-center">
        <div class="col-18 d-flex-align-items-center justify-content-center position-relative" style="height: 0px;">
          <div class="wvu-hr-dotted w-100 position-absolute wvu-hr-dotted-wvu-star-city-blue" style="content: ''; top: 0;"></div>
          <div class="w-100 position-absolute d-flex align-items-center justify-content-center" style="height: 0px;">
            <img class="position-absolute wvu-shadow-hard-filter" src="https://static.wvu.edu/global/images/stickers/black-bear.webp" alt="" height="250px" width="250px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Active Campus Alert