<h5>blue</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #001333;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#001333</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #002666;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#002666</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #003a99;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#003a99</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #004dcc;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#004dcc</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #0060ff;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#0060ff</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #4382fb;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#4382fb</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #74a2fc;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#74a2fc</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #a4c1fd;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#a4c1fd</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #d2e0fe;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#d2e0fe</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #d8e8ff;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint92</strong>
            <code>#d8e8ff</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #e5efff;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint95</strong>
            <code>#e5efff</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #f2f7ff;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint97</strong>
            <code>#f2f7ff</code>
        </div>
    </div>

</div>

<h5>red</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #330d00;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#330d00</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #661900;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#661900</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #992600;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#992600</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #cc3200;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#cc3200</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ff3f00;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#ff3f00</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ff663b;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#ff663b</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ff8d6a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#ff8d6a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffb39b;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#ffb39b</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffd9cd;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ffd9cd</code>
        </div>
    </div>

</div>

<h5>neutral</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000000;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>black</strong>
            <code>#000000</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #061434;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#061434</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #253146;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#253146</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #38445c;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#38445c</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #4e5a73;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#4e5a73</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #697184;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#697184</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #878e9d;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#878e9d</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #a5aab6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#a5aab6</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #c3c7ce;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#c3c7ce</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ebecef;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ebecef</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffffff;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>white</strong>
            <code>#ffffff</code>
        </div>
    </div>

</div>

<h5>deepBlue</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000028;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#000028</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000050;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#000050</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #000078;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#000078</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #0000a0;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#0000a0</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #0000c8;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#0000c8</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #3045cc;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#3045cc</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #6575d8;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#6575d8</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #98a5e5;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#98a5e5</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ccd2f2;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ccd2f2</code>
        </div>
    </div>

</div>

<h5>purple</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #20002c;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#20002c</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #400058;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#400058</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #610083;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#610083</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #8100af;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#8100af</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #a100db;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#a100db</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #b433e2;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#b433e2</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #c766e9;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#c766e9</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #d999f1;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#d999f1</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ecccf8;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ecccf8</code>
        </div>
    </div>

</div>

<h5>neonRed</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #330710;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#330710</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #660f21;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#660f21</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #991631;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#991631</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #cc1e42;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#cc1e42</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ff2552;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#ff2552</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ff5173;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#ff5173</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ff7d96;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#ff7d96</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffa8b9;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#ffa8b9</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffd4dc;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ffd4dc</code>
        </div>
    </div>

</div>

<h5>warmYellow</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #332105;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#332105</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #66430a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#66430a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #99640f;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#99640f</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #cc8614;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#cc8614</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffa719;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#ffa719</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffb947;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#ffb947</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffca75;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#ffca75</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffdca3;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#ffdca3</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ffedd1;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ffedd1</code>
        </div>
    </div>

</div>

<h5>tealGreen</h5>
<div class="sg-color-palette">

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #002815;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade80</strong>
            <code>#002815</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #00502a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade60</strong>
            <code>#00502a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #007740;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade40</strong>
            <code>#007740</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #009f55;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>shade20</strong>
            <code>#009f55</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #00c76a;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>base</strong>
            <code>#00c76a</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #33d288;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint20</strong>
            <code>#33d288</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #66dda6;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint40</strong>
            <code>#66dda6</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #99e9c3;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint60</strong>
            <code>#99e9c3</code>
        </div>
    </div>

    <div class="sg-color-swatch">
        <div class="sg-color-swatch__preview">
            <span style="background-color: #ccf4e1;"></span>
        </div>
        <div class="sg-color-swatch__details">
            <strong>tint80</strong>
            <code>#ccf4e1</code>
        </div>
    </div>

</div>

<p><a href="https://contrast.crgeary.com/#001333,002666,003a99,004dcc,0060ff,4382fb,74a2fc,a4c1fd,d2e0fe,d8e8ff,e5efff,f2f7ff,330d00,661900,992600,cc3200,ff3f00,ff663b,ff8d6a,ffb39b,ffd9cd,000000,061434,253146,38445c,4e5a73,697184,878e9d,a5aab6,c3c7ce,ebecef,ffffff,000028,000050,000078,0000a0,0000c8,3045cc,6575d8,98a5e5,ccd2f2,20002c,400058,610083,8100af,a100db,b433e2,c766e9,d999f1,ecccf8,330710,660f21,991631,cc1e42,ff2552,ff5173,ff7d96,ffa8b9,ffd4dc,332105,66430a,99640f,cc8614,ffa719,ffb947,ffca75,ffdca3,ffedd1,002815,00502a,007740,009f55,00c76a,33d288,66dda6,99e9c3,ccf4e1">View colours in contrast checking tool</a>.</p>
<p><strong>Note:</strong> These colors are shown for reference only. Color values should never be hard-coded in the SASS/CSS and <code>gravity-ui-web</code>'s SASS code therefore does <em>not</em> provide variables for these colors. Instead, <em>only</em> the CSS custom properties provided Gravity's color system should be referenced when applying colors to UI elements. This ensures that all UI elements work with all available color schemes.</p>
{% macro colorSwatch(name, value) %}
<div class="sg-color-swatch">
  <div class="sg-color-swatch__preview">
    <span style="background-color: {{ value }};"></span>
  </div>
  <div class="sg-color-swatch__details">
    <strong>{{ name }}</strong>
    <code>{{ value }}</code>
  </div>
</div>
{% endmacro -%}

{% for palette, colors in palettes %}
  <h5>{{ palette }}</h5>
  <div class="sg-color-palette">
    {% for colorName, colorValue in colors %}
      {{ colorSwatch(colorName, colorValue) | safe }}
    {% endfor %}
  </div>
{% endfor %}

<p><a href="{{ contrastLink }}">View colours in contrast checking tool</a>.</p>
<p><strong>Note:</strong> These colors are shown for reference only. Color values should never be hard-coded in the SASS/CSS and <code>gravity-ui-web</code>'s SASS code therefore does <em>not</em> provide variables for these colors. Instead, <em>only</em> the CSS custom properties provided Gravity's color system should be referenced when applying colors to UI elements. This ensures that all UI elements work with all available color schemes.</p>
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
  "url": "#",
  "listItems": [
    {
      "htmlContent": "Some list item content"
    },
    {
      "htmlContent": "More list item content"
    },
    {
      "htmlContent": "Even more list item content"
    },
    {
      "htmlContent": "I can't believe there's still more list item content"
    },
    {
      "htmlContent": "Seriously?! That's enough now."
    }
  ],
  "footer": {
    "copy": "&copy; 2019 <strong>Buildit</strong>. All rights reserved.",
    "linksA": [
      {
        "label": "Stories",
        "url": "#"
      },
      {
        "label": "People",
        "url": "#"
      },
      {
        "label": "Jobs",
        "url": "#"
      }
    ],
    "linksB": [
      {
        "label": "Terms",
        "url": "#"
      },
      {
        "label": "Accessibility",
        "url": "#"
      },
      {
        "label": "Privacy & Cookie Policy",
        "url": "https://wiprodigital.com/privacy-policy"
      }
    ]
  },
  "hero": {
    "pullout": "Big, attention-grabbing headline",
    "paragraph": "Witty subtitle",
    "cta": {
      "text": "Clickbaity label",
      "url": "#"
    }
  },
  "img": {
    "random": {
      "src": "/images/img-random-1.png",
      "alt": "A placeholder image with an arbitrary aspect ratio."
    },
    "square": {
      "src": "/images/img-1x1.png",
      "alt": "A placeholder image with a perfect square (1:1) aspect ratio."
    },
    "tv": {
      "src": "/images/img-4x3.png",
      "alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
    },
    "widescreen": {
      "src": "/images/img-16x9.png",
      "alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
    },
    "logo": {
      "src": "/images/img-random-2.png",
      "alt": "A test image for a logo with an arbitrary aspect ratio."
    }
  },
  "title": "Page title",
  "header": {
    "url": "./homepage",
    "links": [
      {
        "text": "Jobs",
        "url": "./jobs"
      },
      {
        "text": "Locations",
        "url": "./locations"
      }
    ],
    "externalLinks": [
      {
        "text": "Fancy external website",
        "url": "./error-page"
      }
    ]
  },
  "sections": [
    {
      "title": "Example section",
      "class": "grav-o-full-bleed__content",
      "content": [
        {
          "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    }
  ],
  "section": {
    "title": "This is the title for a section",
    "class": "grav-o-full-bleed__content",
    "content": [
      {
        "paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
      },
      {
        "twoColumnsList": [
          {
            "htmlContent": "Vestibulum auctor dapibus neque."
          },
          {
            "htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          },
          {
            "htmlContent": "Aliquam tincidunt mauris eu risus."
          },
          {
            "htmlContent": "Labore et dolore magna aliqua."
          },
          {
            "htmlContent": "Phasellus tempus, orci non mattis sagittis."
          }
        ]
      },
      {
        "inlineRow": [
          {
            "text": "First link",
            "url": "#"
          },
          {
            "text": "Second link",
            "url": "#"
          },
          {
            "text": "Third link",
            "url": "#"
          }
        ]
      },
      {
        "imgCards": [
          {
            "title": "Some fascinating, attention-grabbing headling",
            "content": "Ideally, with a click-baity tagline that entices to you to visit!",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Brief description of this fascinating image"
            }
          },
          {
            "title": "Labore et dolore magna aliqua",
            "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Phasellus tempus, orci non mattis"
            }
          },
          {
            "title": "Nanotechnology immersion along the information highway",
            "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Bring to the table win-win survival strategies"
            }
          }
        ]
      },
      {
        "imgLinks": [
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Image linke #1"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-2.png",
              "alt": "Image linke #2"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-3.png",
              "alt": "Image linke #3"
            }
          }
        ]
      }
    ]
  },
  "palettes": {
    "blue": {
      "shade80": "#001333",
      "shade60": "#002666",
      "shade40": "#003a99",
      "shade20": "#004dcc",
      "base": "#0060ff",
      "tint20": "#4382fb",
      "tint40": "#74a2fc",
      "tint60": "#a4c1fd",
      "tint80": "#d2e0fe",
      "tint92": "#d8e8ff",
      "tint95": "#e5efff",
      "tint97": "#f2f7ff"
    },
    "red": {
      "shade80": "#330d00",
      "shade60": "#661900",
      "shade40": "#992600",
      "shade20": "#cc3200",
      "base": "#ff3f00",
      "tint20": "#ff663b",
      "tint40": "#ff8d6a",
      "tint60": "#ffb39b",
      "tint80": "#ffd9cd"
    },
    "neutral": {
      "black": "#000000",
      "shade80": "#061434",
      "shade60": "#253146",
      "shade40": "#38445c",
      "shade20": "#4e5a73",
      "base": "#697184",
      "tint20": "#878e9d",
      "tint40": "#a5aab6",
      "tint60": "#c3c7ce",
      "tint80": "#ebecef",
      "white": "#ffffff"
    },
    "deepBlue": {
      "shade80": "#000028",
      "shade60": "#000050",
      "shade40": "#000078",
      "shade20": "#0000a0",
      "base": "#0000c8",
      "tint20": "#3045cc",
      "tint40": "#6575d8",
      "tint60": "#98a5e5",
      "tint80": "#ccd2f2"
    },
    "purple": {
      "shade80": "#20002c",
      "shade60": "#400058",
      "shade40": "#610083",
      "shade20": "#8100af",
      "base": "#a100db",
      "tint20": "#b433e2",
      "tint40": "#c766e9",
      "tint60": "#d999f1",
      "tint80": "#ecccf8"
    },
    "neonRed": {
      "shade80": "#330710",
      "shade60": "#660f21",
      "shade40": "#991631",
      "shade20": "#cc1e42",
      "base": "#ff2552",
      "tint20": "#ff5173",
      "tint40": "#ff7d96",
      "tint60": "#ffa8b9",
      "tint80": "#ffd4dc"
    },
    "warmYellow": {
      "shade80": "#332105",
      "shade60": "#66430a",
      "shade40": "#99640f",
      "shade20": "#cc8614",
      "base": "#ffa719",
      "tint20": "#ffb947",
      "tint40": "#ffca75",
      "tint60": "#ffdca3",
      "tint80": "#ffedd1"
    },
    "tealGreen": {
      "shade80": "#002815",
      "shade60": "#00502a",
      "shade40": "#007740",
      "shade20": "#009f55",
      "base": "#00c76a",
      "tint20": "#33d288",
      "tint40": "#66dda6",
      "tint60": "#99e9c3",
      "tint80": "#ccf4e1"
    }
  },
  "contrastLink": "https://contrast.crgeary.com/#001333,002666,003a99,004dcc,0060ff,4382fb,74a2fc,a4c1fd,d2e0fe,d8e8ff,e5efff,f2f7ff,330d00,661900,992600,cc3200,ff3f00,ff663b,ff8d6a,ffb39b,ffd9cd,000000,061434,253146,38445c,4e5a73,697184,878e9d,a5aab6,c3c7ce,ebecef,ffffff,000028,000050,000078,0000a0,0000c8,3045cc,6575d8,98a5e5,ccd2f2,20002c,400058,610083,8100af,a100db,b433e2,c766e9,d999f1,ecccf8,330710,660f21,991631,cc1e42,ff2552,ff5173,ff7d96,ffa8b9,ffd4dc,332105,66430a,99640f,cc8614,ffa719,ffb947,ffca75,ffdca3,ffedd1,002815,00502a,007740,009f55,00c76a,33d288,66dda6,99e9c3,ccf4e1"
}

There are no notes for this item.