Background colours Create powerful blocks of colour. colour What do they look like? Purple background <div class="card bg-purple">Lorem ipsum</div> Turquoise background <div class="card bg-turquoise">Lorem ipsum</div> Green background <div class="card bg-green">Lorem ipsum</div> Yellow background <div class="card bg-yellow">Lorem ipsum</div> Orange background <div class="card bg-orange">Lorem ipsum</div> Red background <div class="card bg-red">Lorem ipsum</div> Black background <div class="card bg-black">Lorem ipsum</div> White background <div class="card bg-white border-1">Lorem ipsum</div> Spice it up <section class="full-width bg-red"> Content </section> In orange <section class="full-width bg-orange"> Content </section> In yellow <section class="full-width bg-yellow"> Content </section>
Create powerful blocks of colour.
<div class="card bg-purple">Lorem ipsum</div>
<div class="card bg-turquoise">Lorem ipsum</div>
<div class="card bg-green">Lorem ipsum</div>
<div class="card bg-yellow">Lorem ipsum</div>
<div class="card bg-orange">Lorem ipsum</div>
<div class="card bg-red">Lorem ipsum</div>
<div class="card bg-black">Lorem ipsum</div>
<div class="card bg-white border-1">Lorem ipsum</div>
<section class="full-width bg-red"> Content </section>
<section class="full-width bg-orange"> Content </section>
<section class="full-width bg-yellow"> Content </section>
Add scrolling banners to promote events, campaigns and more.
Some pages, such as in the Advice and Governance sections, have resource lists to make things easier to find and access.