<!-- Default -->
<h2 class="label">blue</h2>

<h4 class="csu-blue">Background colour applied</h4>
<h4 class="csu-blue-text">Text colour applied</h4>
<h4 class="underline csu-blue-line">Line colour applied to underline</h4>
<ol class="number-list csu-blue-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-blue-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Green -->
<h2 class="label">green</h2>

<h4 class="csu-green">Background colour applied</h4>
<h4 class="csu-green-text">Text colour applied</h4>
<h4 class="underline csu-green-line">Line colour applied to underline</h4>
<ol class="number-list csu-green-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-green-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Grey -->
<h2 class="label">grey</h2>

<h4 class="csu-grey">Background colour applied</h4>
<h4 class="csu-grey-text">Text colour applied</h4>
<h4 class="underline csu-grey-line">Line colour applied to underline</h4>
<ol class="number-list csu-grey-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-grey-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Ochre -->
<h2 class="label">ochre</h2>

<h4 class="csu-ochre">Background colour applied</h4>
<h4 class="csu-ochre-text">Text colour applied</h4>
<h4 class="underline csu-ochre-line">Line colour applied to underline</h4>
<ol class="number-list csu-ochre-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-ochre-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Orange -->
<h2 class="label">orange</h2>

<h4 class="csu-orange">Background colour applied</h4>
<h4 class="csu-orange-text">Text colour applied</h4>
<h4 class="underline csu-orange-line">Line colour applied to underline</h4>
<ol class="number-list csu-orange-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-orange-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Purple -->
<h2 class="label">purple</h2>

<h4 class="csu-purple">Background colour applied</h4>
<h4 class="csu-purple-text">Text colour applied</h4>
<h4 class="underline csu-purple-line">Line colour applied to underline</h4>
<ol class="number-list csu-purple-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-purple-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Red -->
<h2 class="label">red</h2>

<h4 class="csu-red">Background colour applied</h4>
<h4 class="csu-red-text">Text colour applied</h4>
<h4 class="underline csu-red-line">Line colour applied to underline</h4>
<ol class="number-list csu-red-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-red-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Foa -->
<h2 class="label">foa</h2>

<h4 class="csu-foa">Background colour applied</h4>
<h4 class="csu-foa-text">Text colour applied</h4>
<h4 class="underline csu-foa-line">Line colour applied to underline</h4>
<ol class="number-list csu-foa-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-foa-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Fob -->
<h2 class="label">fob</h2>

<h4 class="csu-fob">Background colour applied</h4>
<h4 class="csu-fob-text">Text colour applied</h4>
<h4 class="underline csu-fob-line">Line colour applied to underline</h4>
<ol class="number-list csu-fob-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-fob-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Fos -->
<h2 class="label">fos</h2>

<h4 class="csu-fos">Background colour applied</h4>
<h4 class="csu-fos-text">Text colour applied</h4>
<h4 class="underline csu-fos-line">Line colour applied to underline</h4>
<ol class="number-list csu-fos-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-fos-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Primary -->
<h2 class="label">primary</h2>

<h4 class="csu-primary">Background colour applied</h4>
<h4 class="csu-primary-text">Text colour applied</h4>
<h4 class="underline csu-primary-line">Line colour applied to underline</h4>
<ol class="number-list csu-primary-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-primary-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Secondary -->
<h2 class="label">secondary</h2>

<h4 class="csu-secondary">Background colour applied</h4>
<h4 class="csu-secondary-text">Text colour applied</h4>
<h4 class="underline csu-secondary-line">Line colour applied to underline</h4>
<ol class="number-list csu-secondary-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-secondary-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<!-- Success -->
<h2 class="label">success</h2>

<h4 class="csu-success">Background colour applied</h4>
<h4 class="csu-success-text">Text colour applied</h4>
<h4 class="underline csu-success-line">Line colour applied to underline</h4>
<ol class="number-list csu-success-list">
    <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
    <tr class="csu-success-fade">
        <td>This table has a fade of the main applied</td>
    </tr>
</table>

<h2 class="label">{{ modifier}}</h2>

<h4 class="csu-{{ modifier }}">Background colour applied</h4>
<h4 class="csu-{{ modifier }}-text">Text colour applied</h4>
<h4 class="underline csu-{{ modifier }}-line">Line colour applied to underline</h4>
<ol class="number-list csu-{{ modifier }}-list">
  <li>Applied to special list</li>
</ol>
<table class="full-width table no-border">
  <tr class="csu-{{ modifier }}-fade"><td>This table has a fade of the main applied</td></tr>
</table>

The Colour Modifiers can be applied to change the background, text, border or line, special list or table or div. The convention for this is csu-COLOURNAME, csu-COLOURNAME-text, csu-COLOURNAME-line, csu-COLOURNAME-list & csu-COLOURNAME-fade.