Background Color

Since 1.5.0

Class

.bg--{colorName}

.bg--{dark | light}

.bg--{info | success | warning | danger}

.bg--black--{10 | 20 | 30 | 40 | 50}

Code Sample

.bg--{colorName}

<div class="bg--navy rounded--5 pa--2 txt--white">.bg--navy</div>
<div class="bg--orchid rounded--5 pa--2">.bg--orchid</div>
<div class="bg--aqua rounded--5 pa--2">.bg--aqua</div>

.bg--{dark | light}

<div class="bg--dark rounded--5 pa--2">.bg--dark</div>
<div class="bg--dark--gradient rounded--5 pa--2">.bg--dark--gradient</div>
<div class="bg--light rounded--5 pa--2">.bg--light</div>

.bg--{info | success | warning | danger}

<div class="bg--info rounded--5 pa--2">.bg--info</div>
<div class="bg--info--gradient rounded--5 pa--2">.bg--info--gradient</div>
<div class="bg--success rounded--5 pa--2">.bg--success</div>
<div class="bg--success--gradient rounded--5 pa--2">.bg--success--gradient</div>
<div class="bg--warning rounded--5 pa--2">.bg--warning</div>
<div class="bg--warning--gradient rounded--5 pa--2">.bg--warning--gradient</div>
<div class="bg--danger rounded--5 pa--2">.bg--danger</div>
<div class="bg--danger--gradient rounded--5 pa--2">.bg--danger--gradient</div>

.bg--black--{10 | 20 | 30 | 40 | 50}

<div class="bg--black rounded--5 pa--2 txt--white">.bg--black</div>
<div class="bg--black--10 rounded--5 pa--2 txt--white">.bg--black--10</div>
<div class="bg--black--20 rounded--5 pa--2 txt--white">.bg--black--20</div>
<div class="bg--black--30 rounded--5 pa--2 txt--white">.bg--black--30</div>
<div class="bg--black--40 rounded--5 pa--2 txt--white">.bg--black--40</div>
<div class="bg--black--50 rounded--5 pa--2 txt--white">.bg--black--50</div>