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--brand | background-color:#4E8003 | |
-bg--white | background-color:#FFFFFF | |
-bg--black | background-color:#000000 | |
-bg--grey-10 | background-color:#F8F8F8 | |
-bg--grey-20 | background-color:#EEEEEE | |
-bg--green-40 | background-color:#8CC63F | |
-bg--success | background-color:#4E8003 | |
-bg--warning | background-color:#A66102 | |
-bg--danger | background-color:#DE1B21 | |
-bg--info | background-color:#2973E3 |
To target a specific breakpoint, add the breakpoint abbreviation to the class.
Color Class | Value |
|---|---|
-bg-sm--none | Visible only from sm |
-bg-sm--brand | Visible only from sm |
-bg-sm--white | Visible only from sm |
-bg-sm--black | Visible only from sm |
-bg-sm--grey-10 | Visible only from sm |
-bg-sm--grey-20 | Visible only from sm |
-bg-sm--green-40 | 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-sm--info | Visible only from sm |
-bg-md--none | Visible only from md |
-bg-md--brand | Visible only from md |
-bg-md--white | Visible only from md |
-bg-md--black | Visible only from md |
-bg-md--grey-10 | Visible only from md |
-bg-md--grey-20 | Visible only from md |
-bg-md--green-40 | 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-md--info | Visible only from md |
-bg-lg--none | Visible only from lg |
-bg-lg--brand | Visible only from lg |
-bg-lg--white | Visible only from lg |
-bg-lg--black | Visible only from lg |
-bg-lg--grey-10 | Visible only from lg |
-bg-lg--grey-20 | Visible only from lg |
-bg-lg--green-40 | 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-lg--info | Visible only from lg |
-bg-xl--none | Visible only from xl |
-bg-xl--brand | Visible only from xl |
-bg-xl--white | Visible only from xl |
-bg-xl--black | Visible only from xl |
-bg-xl--grey-10 | Visible only from xl |
-bg-xl--grey-20 | Visible only from xl |
-bg-xl--green-40 | 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 |
-bg-xl--info | Visible only from xl |
<!-- background-color success on all breakpoints -->
<div class="-bg--success"></div>
<!-- background-color danger from sm -->
<div class="-bg-sm--danger"></div>
<!-- background-color warning from md -->
<div class="-bg-md--warning"></div>
<!-- background-color info from lg -->
<div class="-bg-lg--info"></div>
<!-- background-color brand from xl -->
<div class="-bg-xl--brand"></div>
<!-- background none on all breakpoints -->
<div class="-bg--none"></div>