Figuration v4.4 is now available!

Color

Add a little, or a lot of, color to your site or application.

Dealing with Specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Conveying Meaning to Assistive Technologies

Please refer to the Accessiblity notes about conveying meaning with color.

Some of the utility color styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Text

Change your text color with contextual color utility classes.

.text-primary

.text-success

.text-info

.text-warning

.text-danger

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black

<p class="text-primary">.text-primary</p>
<p class="text-success">.text-success</p>
<p class="text-info">.text-info</p>
<p class="text-warning">.text-warning</p>
<p class="text-danger">.text-danger</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black">.text-black</p>

Contextual text color classes also work well on anchors with the provided hover and focus states.
Note: The .text-body, .text-muted, .text-white, and .text-black classes have no link styling, other than the default underline.

<p><a href="#" class="text-primary">.text-primary</a></p>
<p><a href="#" class="text-success">.text-success</a></p>
<p><a href="#" class="text-info">.text-info</a></p>
<p><a href="#" class="text-warning">.text-warning</a></p>
<p><a href="#" class="text-danger">.text-danger</a></p>
<p><a href="#" class="text-light bg-dark">.text-light</a></p>
<p><a href="#" class="text-dark">.text-dark</a></p>
<p><a href="#" class="text-body">.text-body</a></p>
<p><a href="#" class="text-muted">.text-muted</a></p>
<p><a href="#" class="text-white bg-dark">.text-white</a></p>
<p><a href="#" class="text-black">.text-black</a></p>

Backgrounds

Similar to the contextual text color classes, easily set the background color of an element to any contextual class. Background utilities do not set color, so in some cases you will want to use .text-* utilities.

There is also a .bg-transparent for removing the background color of an element.

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-black
.bg-transparent
<div class="p-0_5 mb-1 bg-primary text-white">.bg-primary</div>
<div class="p-0_5 mb-1 bg-success text-black">.bg-success</div>
<div class="p-0_5 mb-1 bg-info text-white">.bg-info</div>
<div class="p-0_5 mb-1 bg-warning text-black">.bg-warning</div>
<div class="p-0_5 mb-1 bg-danger text-white">.bg-danger</div>
<div class="p-0_5 mb-1 bg-light text-black">.bg-light</div>
<div class="p-0_5 mb-1 bg-dark text-white">.bg-dark</div>
<div class="p-0_5 mb-1 bg-body text-black">.bg-body</div>
<div class="p-0_5 mb-1 bg-white text-black">.bg-white</div>
<div class="p-0_5 mb-1 bg-black text-white">.bg-black</div>
<div class="p-0_5 mb-1 bg-transparent text-black">.bg-transparent</div>

Borders

Borders also be colored with their own set of contextual classes. Borders do not change color on hover and focus state.

There is also a .border-transparent that removes the border color of an element, but keeps the border width in place.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-info"></span>
<span class="border border-warning"></span>
<span class="border border-danger"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-transparent"></span>

Palette Colors

If the color palette is enabled, any color theme that is added to the $palette-themes Sass map will become available for use. For example the theme named primary, then becomes available as .text-primary-[level], .bg-primary-[level], and .border-primary-[level], where level is in the set defined by the $palette-levels variable.

.text-primary-700 text

.text-primary-400 link

.bg-primary-100 background with .text-primary-900
<p class="text-primary-700">.text-primary-700 text</p>
<p><a href="#" class="text-primary-400">.text-primary-400 link</a></p>
<div class="bg-primary-100 text-primary-900 mb-0_5 p-0_5">.bg-primary-100 background with .text-primary-900</div>
<span class="border border-primary-200"></span>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-bg-colors boolean true Enable the generation of the theme background color utility classes.
$enable-utility-bg-palette boolean true Enable the generation of the palette background color utility classes.
$enable-utility-bg-special boolean true Enable the generation of the body, black, white, and transparent background color utility classes.
$enable-utility-border-colors boolean true Enable the generation of the theme border color utility classes.
$enable-utility-border-palette boolean true Enable the generation of the palette border color utility classes.
$enable-utility-border-special boolean true Enable the generation of the transparent border color utility class.
$enable-utility-text-colors boolean true Enable the generation of the theme text color utility classes.
$enable-utility-text-palette boolean true Enable the generation of the palette text color utility classes.
$enable-utility-text-special boolean true Enable the generation of the body, black, white, and muted background color utility classes.
$utility-bg-colors map $base-colors Themed background colors.
$palette-colors-bg map $palette-colors Palette-based background colors.
$palette-levels-bg list $palette-levels List of palette levels to use with palette background colors.
$utility-border-colors map $base-colors Themed border colors.
$palette-colors-borders map $palette-colors Palette-based border colors.
$palette-levels-borders list $palette-levels List of palette levels to use with palette colors.
$utility-text-colors map $base-colors Themed text colors.
$palette-colors-text map $palette-colors Palette-based text colors.
$palette-levels-text list $palette-levels List of palette levels to use with palette text colors.

Mixins

No mixins available.