Background Colours
To be used by row components
Example
$colour-white: #fff;
$colour-red: #ea0043;
$colour-royal-blue: #4032fe;
$colour-mint-green: #5df4cf;
$colour-purple: #340f78;
$colour-dark-purple: #29022c;
$colour-light-grey: #F8F8F8;
$colour-grey: #e8e8e8;
Markup: components/background-colours/background-colours.twig
<br/>
<br/>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>$colour-white: #fff;</p>
<div class="bg--red" style="height: 100px; width: 100%;"></div>
<p>$colour-red: #ea0043;</p>
<div class="bg--royal-blue" style="height: 100px; width: 100%;"></div>
<p>$colour-royal-blue: #4032fe;</p>
<div class="bg--mint-green" style="height: 100px; width: 100%;"></div>
<p>$colour-mint-green: #5df4cf;</p>
<div class="bg--purple" style="height: 100px; width: 100%;"></div>
<p>$colour-purple: #340f78;</p>
<div class="bg--dark-purple" style="height: 100px; width: 100%;"></div>
<p>$colour-dark-purple: #29022c;</p>
<div class="bg--light-grey" style="height: 100px; width: 100%;"></div>
<p>$colour-light-grey: #F8F8F8;</p>
<div class="bg--grey" style="height: 100px; width: 100%;"></div>
<p>$colour-grey: #e8e8e8;</p>
Source:
_cr17-styleguide.scss
, line 43