Background Color

Since 1.5.0
Class
1
.bg--{colorName}
Copied!
1
.bg--{dark | light}
Copied!
1
.bg--{info | success | warning | danger}
Copied!
1
.bg--black--{10 | 20 | 30 | 40 | 50}
Copied!
Code Sample
.bg--{colorName}
1
<div class="bg--navy rounded--5 pa--2 txt--white">.bg--navy</div>
2
<div class="bg--orchid rounded--5 pa--2">.bg--orchid</div>
3
<div class="bg--aqua rounded--5 pa--2">.bg--aqua</div>
Copied!
.bg--{dark | light}
1
<div class="bg--dark rounded--5 pa--2">.bg--dark</div>
2
<div class="bg--dark--gradient rounded--5 pa--2">.bg--dark--gradient</div>
3
<div class="bg--light rounded--5 pa--2">.bg--light</div>
Copied!
.bg--{info | success | warning | danger}
1
<div class="bg--info rounded--5 pa--2">.bg--info</div>
2
<div class="bg--info--gradient rounded--5 pa--2">.bg--info--gradient</div>
3
<div class="bg--success rounded--5 pa--2">.bg--success</div>
4
<div class="bg--success--gradient rounded--5 pa--2">.bg--success--gradient</div>
5
<div class="bg--warning rounded--5 pa--2">.bg--warning</div>
6
<div class="bg--warning--gradient rounded--5 pa--2">.bg--warning--gradient</div>
7
<div class="bg--danger rounded--5 pa--2">.bg--danger</div>
8
<div class="bg--danger--gradient rounded--5 pa--2">.bg--danger--gradient</div>
Copied!
.bg--black--{10 | 20 | 30 | 40 | 50}
1
<div class="bg--black rounded--5 pa--2 txt--white">.bg--black</div>
2
<div class="bg--black--10 rounded--5 pa--2 txt--white">.bg--black--10</div>
3
<div class="bg--black--20 rounded--5 pa--2 txt--white">.bg--black--20</div>
4
<div class="bg--black--30 rounded--5 pa--2 txt--white">.bg--black--30</div>
5
<div class="bg--black--40 rounded--5 pa--2 txt--white">.bg--black--40</div>
6
<div class="bg--black--50 rounded--5 pa--2 txt--white">.bg--black--50</div>
Copied!

Components - Previous

Badge

Next - Utilities

Border

Last modified 1yr ago

Copy link

Contents

Class

Code Sample