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--muted | background-color:#72767A | |
-bg--grey | background-color:#53565A | |
-bg--grey-10 | background-color:#F8F9F9 | |
-bg--grey-20 | background-color:#EDF0F2 | |
-bg--grey-30 | background-color:#D0D4D9 | |
-bg--blue-60 | background-color:#005BED | |
-bg--blue-70 | background-color:#0047BB | |
-bg--blue-80 | background-color:#00308A | |
-bg--blue-90 | background-color:#001E60 | |
-bg--teal | background-color:#03808C | |
-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--muted | 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--blue-60 | Visible only from sm |
-bg-sm--blue-70 | Visible only from sm |
-bg-sm--blue-80 | Visible only from sm |
-bg-sm--blue-90 | Visible only from sm |
-bg-sm--teal | 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--muted | 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--blue-60 | Visible only from md |
-bg-md--blue-70 | Visible only from md |
-bg-md--blue-80 | Visible only from md |
-bg-md--blue-90 | Visible only from md |
-bg-md--teal | 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--muted | 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--blue-60 | Visible only from lg |
-bg-lg--blue-70 | Visible only from lg |
-bg-lg--blue-80 | Visible only from lg |
-bg-lg--blue-90 | Visible only from lg |
-bg-lg--teal | 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--muted | 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--blue-60 | Visible only from xl |
-bg-xl--blue-70 | Visible only from xl |
-bg-xl--blue-80 | Visible only from xl |
-bg-xl--blue-90 | Visible only from xl |
-bg-xl--teal | 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>