1. Docs
  2. Utilities
  3. Colors
Buy Now Contact

Color Utilities

Change the text color or background color of the content.

Text

Add u-color-{style} to quickly change the color of any element based on the style specified.

This a success text

This a info text

This a warning text

This a danger text

This a primary text

This a secondary text

<h4 class="u-color-success">This a success text</h4>
<h4 class="u-color-info">This a info text</h4>
<h4 class="u-color-warning">This a warning text</h4>
<h4 class="u-color-danger">This a danger text</h4>
<h4 class="u-color-primary">This a primary text</h4>
<h4 class="u-color-secondary">This a secondary text</h4>

Backgrounds

Add u-bg-{style} to quickly change the background color of any element based on the style specified.

Color Utilities

<div class="u-bg-success"></div>
<div class="u-bg-info"></div>
<div class="u-bg-warning"></div>
<div class="u-bg-danger"></div>
<div class="u-bg-primary"></div>
<div class="u-bg-secondary"></div>

Brand Colors

Use brand color utilities to change the the text or background color of any brand-related component. Very useful when used with with social icons.

Brand Color Utilities

<h4 class="u-color-facebook">...</h4>
<h4 class="u-color-twitter">...</h4>
<h4 class="u-color-pinterest">...</h4>
<h4 class="u-color-behance">...</h4>
<h4 class="u-color-dribbble">...</h4>
<h4 class="u-color-linkedin">...</h4>

<div class="u-bg-facebook">...</div>
<div class="u-bg-twitter">...</div>
<div class="u-bg-pinterest">...</div>
<div class="u-bg-behance">...</div>
<div class="u-bg-dribbble">...</div>
<div class="u-bg-linkedin">...</div>