Colors - CGU Brand

Text & Link Colors

<h3 class="u-color-teal">Teal Text</h3>
<p><a href="#" class="u-link-teal">A Teal Link</a></p>

All available color options

// Syntax:
// u-color-{$color}
// u-link-{$color}

$colors: (
 'red'
 'dark-red'
 'black'
 'dark-gray'
 'alt-gray'
 'light-gray'
 'lighter-gray'
 'lightest-gray'
 'white'
 'yellow'
 'light-yellow'
 'green'
 'light-green'
 'tan'
 'navy'
 'blue'
 'light-blue'
 'lightest-blue'
 'teal'
 'light-teal'
 'dark-teal'
);

Background Colors

Background color utility classes also affect the child elements of the container it’s applied to.

<div class="u-bg-teal" style="padding: 1em;">
  <h3> A .u-bg-teal container.</h3>
  <p>This is some text, with <a href="#">a link</a>.</p>
  <p class="u-color-muted">Muted text.</p>
  <hr/>
  <p><a class="button">Button</a></p>
</div>

All available background colors:

// Syntax:
// u-bg-{$bg_color}

$bg_colors: (
 'red',
 'black',
 'dark-gray',
 'light-gray',
 'lighter-gray',
 'lightest-gray',
 'white',
 'tan',
 'tan-50',
 'tan-30',
 'light-yellow',
 'light-green',
 'blue',
 'teal',
 'light-teal',
 'dark-teal'
);

Overlays

Overlay classes are primarily used for darkening images that have text over them. The darkening makes text more legible.

.u-overlay-shaded

<figure class="u-overlay-shaded u-hug" style="position:relative">
  <img src="//unsplash.it/900/450/" class="u-display-block" alt="placeholder"/>
  <figcaption class="u-position-center u-color-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec neque congue, euismod diam ut, vehicula libero.</figcaption>
</div>

.u-overlay-hover-darken

<figure class="u-overlay-hover-darken u-hug" style="position:relative">
  <img src="//unsplash.it/900/450/" class="u-display-block" alt="placeholder"/>
  <figcaption class="h3 u-position-center u-color-white">Hover me.</figcaption>
</div>

.u-overlay-gradient

<figure class="u-overlay-gradient u-hug" style="position:relative">
  <img src="//unsplash.it/900/450/" class="u-display-block" alt="placeholder"/>
  <figcaption class="u-position-center u-color-white" style="left:1em">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec neque congue, euismod diam ut, vehicula libero.</figcaption>
</div>