@moodxd/utility-color v1.0.3

MoO Utility Color

View a list of color options

Background Colors

To alter an element’s background color, apply the .u-bg[Color] class to the element’s tag. This will emphasize the color of the element’s background with the color specified in the style’s name. Please ensure there is enough color contrast between the background and foreground elements (such as text), as clear communication is extremely important. .u-bg[Color]

<div class="u-cf">
  <div class="u-sizeFull u-bgBlue">
    Blue Background Color
  </div>
</div>

Font Colors

Font color can also be customized by adding the .u-font[Color] class to the parent element. This allows emphasis on certain text and to provide contrast with background colors. This style should be used sparingly and static type should never be altered to resemble a hyperlink. This can cause confusion on behalf of the user. .u-font[Color]

<div class="u-fontBlueDarker">BlueDarker Font</div>

Border Colors

In order to alter the color of an element’s border, add the .u-border[Color] class to the element’s tag. As with font colors, this style should be used sparingly and only to provide visual emphasis (for example, when a form field has focus). .u-border[Color]

<div class="u-cf">
  <div class="u-sizeFull u-borderA u-borderTeal">
    Teal Border Color
  </div>
</div>

The class .u-border[A/T/B/L/R/V/H] will add a 1-pixel border to the specified side. Multiple instances of this class can be added to help customize the appearance of the element, as long as the same side is not used twice. Use the chart below for a description of each setting. Adds a 1px solid border (.u-border[A/T/B/L/R/V/H])