Color
These utilities are generated by Bootstrap when we override Bootstrap’s color variables.
Further down the page are examples for text color. But they work for buttons
btn-{color}, backgrounds bg-{color}, and border colors
border-{color}. Where {color} can be one of the following:
Primary Palette
wvu-blue
wvu-gold
Neutral Palette
wvu-neutral--black
wvu-neutral--dark-gray
wvu-neutral--light-gray
wvu-neutral--dark-brown
wvu-neutral--brown
wvu-neutral--light-brown
Accent Palette
wvu-accent--dark-blue
wvu-accent--blue
wvu-accent--light-blue
wvu-accent--brown
wvu-accent--mustard
wvu-accent--orange
wvu-accent--dark-green
wvu-accent--green
wvu-accent--light-green
wvu-accent--red
wvu-accent--burnt-orange
wvu-accent--yellow
Make sure when using these classes to keep in mind our Accessibility Guidelines for color contrast.
Background Color Examples
<div class="text-wvu-blue text-white">bg-wvu-blue text-white</div> <div class="bg-wvu-gold bg-dark">bg-wvu-gold</div> <div class="bg-wvu-neutral--black text-white">bg-wvu-neutral--black text-white</div> <div class="bg-wvu-neutral--dark-gray text-white">bg-wvu-neutral--dark-gray text-white</div> <div class="bg-wvu-neutral--light-gray bg-dark">bg-wvu-neutral--light-gray</div> <div class="bg-wvu-neutral--dark-brown text-white">bg-wvu-neutral--dark-brown text-white</div> <div class="bg-wvu-neutral--brown text-white">bg-wvu-neutral--brown text-white</div> <div class="bg-wvu-neutral--light-brown bg-dark">bg-wvu-neutral--light-brown</div> <div class="bg-wvu-accent--dark-blue text-white">bg-wvu-accent--dark-blue text-white</div> <div class="bg-wvu-accent--blue text-white">bg-wvu-accent--blue text-white</div> <div class="bg-wvu-accent--light-blue bg-dark">bg-wvu-accent--light-blue</div> <div class="bg-wvu-accent--brown text-white">bg-wvu-accent--brown text-white</div> <div class="bg-wvu-accent--mustard text-white">bg-wvu-accent--mustard text-white</div> <div class="bg-wvu-accent--orange bg-dark text-white">bg-wvu-accent--orange text-white</div> <div class="bg-wvu-accent--dark-green text-white">bg-wvu-accent--dark-green text-white</div> <div class="bg-wvu-accent--green">bg-wvu-accent--green</div> <div class="bg-wvu-accent--light-green bg-dark">bg-wvu-accent--light-green</div> <div class="bg-wvu-accent--red text-white">bg-wvu-accent--red text-white</div> <div class="bg-wvu-accent--burnt-orange text-white">bg-wvu-accent--burnt-orange text-white</div> <div class="bg-wvu-accent--yellow bg-dark">bg-wvu-accent--yellow</div>
Text Color Examples
<div class="text-wvu-blue">text-wvu-blue</div> <div class="text-wvu-gold bg-dark">text-wvu-gold</div> <div class="text-wvu-neutral--black">text-wvu-neutral--black</div> <div class="text-wvu-neutral--dark-gray">text-wvu-neutral--dark-gray</div> <div class="text-wvu-neutral--light-gray bg-dark">text-wvu-neutral--light-gray</div> <div class="text-wvu-neutral--dark-brown">text-wvu-neutral--dark-brown</div> <div class="text-wvu-neutral--brown">text-wvu-neutral--brown</div> <div class="text-wvu-neutral--light-brown bg-dark">text-wvu-neutral--light-brown</div> <div class="text-wvu-accent--dark-blue">text-wvu-accent--dark-blue</div> <div class="text-wvu-accent--blue">text-wvu-accent--blue</div> <div class="text-wvu-accent--light-blue bg-dark">text-wvu-accent--light-blue</div> <div class="text-wvu-accent--brown">text-wvu-accent--brown</div> <div class="text-wvu-accent--mustard">text-wvu-accent--mustard</div> <div class="text-wvu-accent--orange bg-dark">text-wvu-accent--orange</div> <div class="text-wvu-accent--dark-green">text-wvu-accent--dark-green</div> <div class="text-wvu-accent--green">text-wvu-accent--green</div> <div class="text-wvu-accent--light-green bg-dark">text-wvu-accent--light-green</div> <div class="text-wvu-accent--red">text-wvu-accent--red</div> <div class="text-wvu-accent--burnt-orange">text-wvu-accent--burnt-orange</div> <div class="text-wvu-accent--yellow bg-dark">text-wvu-accent--yellow</div>