Create powerful blocks of colour.
What do they look like?
An orange background
A yellow background
Combine them with a full width background
<div class="full-width bg-orange">Content</div>
List of background colours
| Colour |
Class |
Example |
| Orange |
bg-orange |
<div class="card bg-orange">Content</div>
|
| Yellow |
bg-yellow |
<div class="card bg-yellow">Content</div>
|
| Light Green |
bg-light-green |
<div class="card bg-light-green">Content</div>
|
| Lime |
bg-lime |
<div class="card bg-lime">Content</div>
|
| Green |
bg-green |
<div class="card bg-green">Content</div>
|
| Turquoise |
bg-turquoise |
<div class="card bg-turquoise">Content</div>
|
| Teal |
bg-teal |
<div class="card bg-teal">Content</div>
|
| Sky |
bg-sky |
<div class="card bg-sky">Content</div>
|
| Blue |
bg-blue |
<div class="card bg-blue">Content</div>
|
| Purple |
bg-purple |
<div class="card bg-purple">Content</div>
|
| Magenta |
bg-magenta |
<div class="card bg-magenta">Content</div>
|
| Red |
bg-red |
<div class="card bg-red">Content</div>
|
| White |
bg-white |
<div class="card bg-white">Content</div>
|
| Black |
bg-black |
<div class="card bg-black">Content</div>
|
| Tooting Red |
bg-tootingred |
<div class="card bg-tootingred">Content</div> |
| Tooting Green |
|
<div class="card bg-tootinggreen">Content</div> |