Use shorthand color utility classes to quickly apply or remove a background color.
Color utility classes can be defined using the format -bg-{breakpoint}--{value}.
Breakpoints supported are sm, md, lg, and xl.
Color utility classes with no breakpoint defined apply to all screen sizes.
Color Class | Value | Result |
|---|---|---|
-bg--none | background: none; | |
-bg--primary | background-color:#0047BB | |
-bg--secondary | background-color:#48D597 | |
-bg--white | background-color:#FFFFFF | |
-bg--black | background-color:#000000 | |
-bg--grey | background-color:#53565A | |
-bg--grey-10 | background-color:#F8F9F9 | |
-bg--grey-20 | background-color:#EDF0F2 | |
-bg--grey-30 | background-color:#D0D4D9 | |
-bg--success | background-color:#097A49 | |
-bg--warning | background-color:#854E03 | |
-bg--danger | background-color:#B50D12 |
To target a specific breakpoint, add the breakpoint abbreviation to the class.
Color Class | Value |
|---|---|
-bg-sm--none | Visible only from sm |
-bg-sm--primary | Visible only from sm |
-bg-sm--secondary | Visible only from sm |
-bg-sm--white | Visible only from sm |
-bg-sm--black | Visible only from sm |
-bg-sm--grey | Visible only from sm |
-bg-sm--grey-10 | Visible only from sm |
-bg-sm--grey-20 | Visible only from sm |
-bg-sm--grey-30 | Visible only from sm |
-bg-sm--success | Visible only from sm |
-bg-sm--warning | Visible only from sm |
-bg-sm--danger | Visible only from sm |
-bg-md--none | Visible only from md |
-bg-md--primary | Visible only from md |
-bg-md--secondary | Visible only from md |
-bg-md--white | Visible only from md |
-bg-md--black | Visible only from md |
-bg-md--grey | Visible only from md |
-bg-md--grey-10 | Visible only from md |
-bg-md--grey-20 | Visible only from md |
-bg-md--grey-30 | Visible only from md |
-bg-md--success | Visible only from md |
-bg-md--warning | Visible only from md |
-bg-md--danger | Visible only from md |
-bg-lg--none | Visible only from lg |
-bg-lg--primary | Visible only from lg |
-bg-lg--secondary | Visible only from lg |
-bg-lg--white | Visible only from lg |
-bg-lg--black | Visible only from lg |
-bg-lg--grey | Visible only from lg |
-bg-lg--grey-10 | Visible only from lg |
-bg-lg--grey-20 | Visible only from lg |
-bg-lg--grey-30 | Visible only from lg |
-bg-lg--success | Visible only from lg |
-bg-lg--warning | Visible only from lg |
-bg-lg--danger | Visible only from lg |
-bg-xl--none | Visible only from xl |
-bg-xl--primary | Visible only from xl |
-bg-xl--secondary | Visible only from xl |
-bg-xl--white | Visible only from xl |
-bg-xl--black | Visible only from xl |
-bg-xl--grey | Visible only from xl |
-bg-xl--grey-10 | Visible only from xl |
-bg-xl--grey-20 | Visible only from xl |
-bg-xl--grey-30 | Visible only from xl |
-bg-xl--success | Visible only from xl |
-bg-xl--warning | Visible only from xl |
-bg-xl--danger | Visible only from xl |
<!-- 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>