Background Colours

Create powerful blocks of colour.

colour

What do they look like?

Purple background

<div class="card bg-purple">Lorem ipsum</div>

Pale purple background

<div class="card bg-pale-purple">Lorem ipsum</div>

Green background

<div class="card bg-green">Lorem ipsum</div>

Yellow background

<div class="card bg-yellow">Lorem ipsum</div>

Turquoise background

<div class="card bg-turquoise">Lorem ipsum</div>

Blue background

<div class="card bg-blue">Lorem ipsum</div>

Mid purple background

<div class="card bg-mid-purple">Lorem ipsum</div>

Spice it up

<section class="full-width bg-purple">
Content
</section>

In green

<section class="full-width bg-green">
Content
</section>

In yellow

<section class="full-width bg-yellow">
Content
</section>
Published: 30 Nov 2022 11:59 Last updated: 10 Sep 2026 15:24 3000 views

Site design by Elliot Parker.