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
|
|