Background Color
10 color state for background. You can use these color with prefix
It is also a 10 custom invert color state for background. You can use these color with prefix
.bg-*| State | Preview | Class postfix | Usage |
|---|---|---|---|
| Primary | Background Primary | *-primary | bg-primary |
| Secondary | Background Secondary | *-secondary | bg-secondary |
| Brand | Background Brand | *-brand | bg-brand |
| Success | Background Success | *-success | bg-success |
| Danger | Background Danger | *-danger | bg-danger |
| Warning | Background Warning | *-warning | bg-warning |
| Info | Background Info | *-info | bg-info |
| Light | Background Light | *-light | bg-light |
| Dark | Background Dark | *-dark | bg-dark |
| White | Background White | *-white | bg-white |
| Transparent | Background Transparent | *-transparent | bg-transparent |
.m--invert*| State | Preview | Class postfix | Usage |
|---|---|---|---|
| Primary | Background Primary | *-primary | m--invert-primary |
| Secondary | Background Secondary | *-secondary | m--invert-secondary |
| Brand | Background Brand | *-brand | m--invert-brand |
| Success | Background Success | *-success | m--invert-success |
| Danger | Background Danger | *-danger | m--invert-danger |
| Warning | Background Warning | *-warning | m--invert-warning |
| Info | Background Info | *-info | m--invert-info |
| Light | Background Light | *-light | m--invert-light |
| Dark | Background Dark | *-dark | m--invert-dark |
Text Colors
10 color state for text. You can use these color with prefix
.text-*| State | Preview | Class postfix | Usage |
|---|---|---|---|
| Primary | Text Primary | *-primary | text-primary |
| Secondary | Text Secondary | *-secondary | text-secondary |
| Brand | Text Brand | *-brand | text-brand |
| Success | Text Success | *-success | text-success |
| Danger | Text Danger | *-danger | text-danger |
| Warning | Text Warning | *-warning | text-warning |
| Info | Text Info | *-info | text-info |
| Light | Text Light | *-light | text-light |
| Dark | Text Dark | *-dark | text-dark |
| Muted | Text Mute | *-muted | text-muted |
| White | Text White | *-white | text-white |