The following page provides an overview of the default styles and additional class based styles that can be added.
Default <h2></h2> 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
WVU-shout and wvu-slash style
Additional styles can be added to the headings by using the classes text-wvu-blue,
wvu-shout and wvu-slash.
Display 2 Heading with wvu-shout and wvu-slash
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
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...
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>
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>