Colors
Learn how to change the color of elements.
Backgrounds
Note, that primary colors are unique for each customer.
| CSS Class | Result |
|---|---|
.bg-white
|
|
.bg-n1
|
|
.bg-n2
|
|
.bg-n5
|
|
.bg-n6
|
|
.bg-primary
|
|
.bg-primary-d1
|
|
.bg-primary-l
|
|
.bg-green
|
|
.bg-green-l
|
|
.bg-yellow
|
|
.bg-yellow-l
|
|
.bg-red
|
|
.bg-red-l
|
|
Text Colors
Text color classes can also be used to change the color of icons. Learn how to add vector icons here.
| CSS Class | Result |
|---|---|
.text-base
|
Default text color |
.text-quiet
|
Quiet text color |
.text-muted
|
Muted text color |
.text-white
|
White color with a subtle shadow |
.text-brand
|
Brand text color |
.text-green
|
Green text color |
.text-yellow
|
Yellow text color |
.text-red
|
Red text color |
Icon Colors
Icon color classes should be used to change the color of icons. They must be used together with the .icon class. Learn how to add vector icons here.
| CSS Class | Result |
|---|---|
.color-brand
|
|
.color-green
|
|
.color-yellow
|
|
.color-red
|
|
.color-n1
|
|
.color-n1-transp
|
|
.color-n2
|
|
.color-n2-transp
|
|
.color-n3
|
|
.color-n3-transp
|
|
.color-n4
|
|
.color-n4-transp
|
|
.color-n5-transp
|
|