Theme Demo and Documentation

The following page provides an overview of the default styles and additional class based styles that can be added.

Default <h2></h2> style

This is a standard paragraph font style.

A default <h3></h3> head style

<h4></h4> looks likes this by default

An default <h5></h5> tag looks like this

A default <h6></h6> tag looks like this

List Style With Slashes

This is what a list style with arrows looks like
List style example
List style example

<ul class="wvu-ul-slashes">

  <li>...</li>

  <li>...</li>

</ul>

Button Styles

Try to keep button text short and concise but use descriptive words. Do not use "Read More" or "click here" for example, as this does not describe the link properly for users with accessibility needs. An icon can be added by placing the icon HTML inside of the link tag.

Example Link HTML:
<a href="https://theurl.com" class="btn btn-wvu-blue mb-1">...</a>

Call to Action Call to Action Call to Action Call to Action Call to Action Call to Action

Large Button

Color classes for buttons

WVU Blue: btn-wvu-blue
WVU Blue Outline: btn-outline-wvu-blue
WVU Gold: btn-wvu-gold
WVU Gold Outline: btn-outline-wvu-gold
Accent Blue: btn-wvu-accent--blue
Accent Blue Outline: btn-outline-wvu-accent--blue

Buttons can be used with icons

For consistency, use the following...

Call to Action

Example Icon HTML:
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
<i class="fas fa-link" aria-hidden="true"></i>
<i class="fas fa-file" aria-hidden="true"></i>
<i class="fas fa-link" aria-hidden="true"></i>
<i class="fas fa-link" aria-hidden="true"></i>

This is a button

Putting it all together

Example button with icon in HTML:
<a href="https://theurl.com" class="btn btn-wvu-blue mb-1">This is the link text <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>

Action Hero Headline

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.