Color

Use shorthand color utility classes to quickly apply or remove a background color.

Notation

Color utility classes can be defined using the format -bg-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints

Color utility classes with no breakpoint defined apply to all screen sizes.

Color Class
Value
Result
-bg--nonebackground: none;
-bg--primarybackground-color:#0047BB
-bg--secondarybackground-color:#48D597
-bg--whitebackground-color:#FFFFFF
-bg--blackbackground-color:#000000
-bg--mutedbackground-color:#72767A
-bg--greybackground-color:#53565A
-bg--grey-10background-color:#F8F9F9
-bg--grey-20background-color:#EDF0F2
-bg--grey-30background-color:#D0D4D9
-bg--blue-60background-color:#005BED
-bg--blue-70background-color:#0047BB
-bg--blue-80background-color:#00308A
-bg--blue-90background-color:#001E60
-bg--tealbackground-color:#03808C
-bg--successbackground-color:#097A49
-bg--warningbackground-color:#854E03
-bg--dangerbackground-color:#B50D12

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Color Class
Value
-bg-sm--noneVisible only from sm
-bg-sm--primaryVisible only from sm
-bg-sm--secondaryVisible only from sm
-bg-sm--whiteVisible only from sm
-bg-sm--blackVisible only from sm
-bg-sm--mutedVisible only from sm
-bg-sm--greyVisible only from sm
-bg-sm--grey-10Visible only from sm
-bg-sm--grey-20Visible only from sm
-bg-sm--grey-30Visible only from sm
-bg-sm--blue-60Visible only from sm
-bg-sm--blue-70Visible only from sm
-bg-sm--blue-80Visible only from sm
-bg-sm--blue-90Visible only from sm
-bg-sm--tealVisible only from sm
-bg-sm--successVisible only from sm
-bg-sm--warningVisible only from sm
-bg-sm--dangerVisible only from sm
-bg-md--noneVisible only from md
-bg-md--primaryVisible only from md
-bg-md--secondaryVisible only from md
-bg-md--whiteVisible only from md
-bg-md--blackVisible only from md
-bg-md--mutedVisible only from md
-bg-md--greyVisible only from md
-bg-md--grey-10Visible only from md
-bg-md--grey-20Visible only from md
-bg-md--grey-30Visible only from md
-bg-md--blue-60Visible only from md
-bg-md--blue-70Visible only from md
-bg-md--blue-80Visible only from md
-bg-md--blue-90Visible only from md
-bg-md--tealVisible only from md
-bg-md--successVisible only from md
-bg-md--warningVisible only from md
-bg-md--dangerVisible only from md
-bg-lg--noneVisible only from lg
-bg-lg--primaryVisible only from lg
-bg-lg--secondaryVisible only from lg
-bg-lg--whiteVisible only from lg
-bg-lg--blackVisible only from lg
-bg-lg--mutedVisible only from lg
-bg-lg--greyVisible only from lg
-bg-lg--grey-10Visible only from lg
-bg-lg--grey-20Visible only from lg
-bg-lg--grey-30Visible only from lg
-bg-lg--blue-60Visible only from lg
-bg-lg--blue-70Visible only from lg
-bg-lg--blue-80Visible only from lg
-bg-lg--blue-90Visible only from lg
-bg-lg--tealVisible only from lg
-bg-lg--successVisible only from lg
-bg-lg--warningVisible only from lg
-bg-lg--dangerVisible only from lg
-bg-xl--noneVisible only from xl
-bg-xl--primaryVisible only from xl
-bg-xl--secondaryVisible only from xl
-bg-xl--whiteVisible only from xl
-bg-xl--blackVisible only from xl
-bg-xl--mutedVisible only from xl
-bg-xl--greyVisible only from xl
-bg-xl--grey-10Visible only from xl
-bg-xl--grey-20Visible only from xl
-bg-xl--grey-30Visible only from xl
-bg-xl--blue-60Visible only from xl
-bg-xl--blue-70Visible only from xl
-bg-xl--blue-80Visible only from xl
-bg-xl--blue-90Visible only from xl
-bg-xl--tealVisible only from xl
-bg-xl--successVisible only from xl
-bg-xl--warningVisible only from xl
-bg-xl--dangerVisible only from xl

Examples

-bg--primary
-bg-sm--secondary
-bg-md--warning
-bg-lg--danger
-bg-xl--black
-bg--none
<!-- background-color primary on all breakpoints -->
<div class="-bg--primary"></div>
<!-- background-color secondary from sm -->
<div class="-bg-sm--secondary"></div>
<!-- background-color warning from md -->
<div class="-bg-md--warning"></div>
<!-- background-color danger from lg -->
<div class="-bg-lg--danger"></div>
<!-- background-color black from xl -->
<div class="-bg-xl--black"></div>
<!-- background none on all breakpoints -->
<div class="-bg--none"></div>