<h5>cyan</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #006ea6;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade80</strong>
<code>#006ea6</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #00527c;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade60</strong>
<code>#00527c</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #003753;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade40</strong>
<code>#003753</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #001b29;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade20</strong>
<code>#001b29</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #000a0e;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade7</strong>
<code>#000a0e</code>
</div>
</div>
</div>
<h5>blue</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #023e82;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade80</strong>
<code>#023e82</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #022f61;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade60</strong>
<code>#022f61</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #011f41;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade40</strong>
<code>#011f41</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #011020;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade20</strong>
<code>#011020</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #00050b;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade7</strong>
<code>#00050b</code>
</div>
</div>
</div>
<h5>violet</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #592374;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade80</strong>
<code>#592374</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #431a57;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade60</strong>
<code>#431a57</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #2c123a;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade40</strong>
<code>#2c123a</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #16091d;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade20</strong>
<code>#16091d</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #08030a;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade7</strong>
<code>#08030a</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: #bc161d;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade80</strong>
<code>#bc161d</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #8d1116;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade60</strong>
<code>#8d1116</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #5e0b0e;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade40</strong>
<code>#5e0b0e</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #2f0607;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade20</strong>
<code>#2f0607</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #100203;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade7</strong>
<code>#100203</code>
</div>
</div>
</div>
<h5>yellow</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #ca940f;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade80</strong>
<code>#ca940f</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #986f0b;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade60</strong>
<code>#986f0b</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #654a08;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade40</strong>
<code>#654a08</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #332504;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade20</strong>
<code>#332504</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #120d01;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade7</strong>
<code>#120d01</code>
</div>
</div>
</div>
<h5>green</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #84a63d;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade80</strong>
<code>#84a63d</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #637c2e;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade60</strong>
<code>#637c2e</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #42531e;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade40</strong>
<code>#42531e</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #21290f;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade20</strong>
<code>#21290f</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #0c0e05;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade7</strong>
<code>#0c0e05</code>
</div>
</div>
</div>
<h5>teal</h5>
<div class="sg-color-palette">
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #009483;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade80</strong>
<code>#009483</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #007c6c;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade60</strong>
<code>#007c6c</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #005c50;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade40</strong>
<code>#005c50</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #00241f;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade20</strong>
<code>#00241f</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #000d0b;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>shade7</strong>
<code>#000d0b</code>
</div>
</div>
</div>
<h5>gray</h5>
<div class="sg-color-palette">
<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>100</strong>
<code>#ffffff</code>
</div>
</div>
<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: #1a1a1a;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>veryDark</strong>
<code>#1a1a1a</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #404040;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>darker</strong>
<code>#404040</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #7f7f7f;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>mediumDark</strong>
<code>#7f7f7f</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #999999;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>medium</strong>
<code>#999999</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #cccccc;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>mediumLight</strong>
<code>#cccccc</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #f1f1f1;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>veryLight</strong>
<code>#f1f1f1</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #f1f1f1;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>095</strong>
<code>#f1f1f1</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #e6e6e6;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>090</strong>
<code>#e6e6e6</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #cccccc;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>080</strong>
<code>#cccccc</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #b3b3b3;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>070</strong>
<code>#b3b3b3</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #999999;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>060</strong>
<code>#999999</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #7f7f7f;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>050</strong>
<code>#7f7f7f</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #666666;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>040</strong>
<code>#666666</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #404040;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>025</strong>
<code>#404040</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #262626;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>015</strong>
<code>#262626</code>
</div>
</div>
<div class="sg-color-swatch">
<div class="sg-color-swatch__preview">
<span style="background-color: #1a1a1a;"></span>
</div>
<div class="sg-color-swatch__details">
<strong>010</strong>
<code>#1a1a1a</code>
</div>
</div>
<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>000</strong>
<code>#000000</code>
</div>
</div>
</div>
<p><a href="https://contrast.crgeary.com/#006ea6,00527c,003753,001b29,000a0e,023e82,022f61,011f41,011020,00050b,592374,431a57,2c123a,16091d,08030a,bc161d,8d1116,5e0b0e,2f0607,100203,ca940f,986f0b,654a08,332504,120d01,84a63d,637c2e,42531e,21290f,0c0e05,009483,007c6c,005c50,00241f,000d0b,ffffff,000000,1a1a1a,404040,7f7f7f,999999,cccccc,f1f1f1,f1f1f1,e6e6e6,cccccc,b3b3b3,999999,7f7f7f,666666,404040,262626,1a1a1a,000000">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": "© 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": {
"cyan": {
"shade80": "#006ea6",
"shade60": "#00527c",
"shade40": "#003753",
"shade20": "#001b29",
"shade7": "#000a0e"
},
"blue": {
"shade80": "#023e82",
"shade60": "#022f61",
"shade40": "#011f41",
"shade20": "#011020",
"shade7": "#00050b"
},
"violet": {
"shade80": "#592374",
"shade60": "#431a57",
"shade40": "#2c123a",
"shade20": "#16091d",
"shade7": "#08030a"
},
"red": {
"shade80": "#bc161d",
"shade60": "#8d1116",
"shade40": "#5e0b0e",
"shade20": "#2f0607",
"shade7": "#100203"
},
"yellow": {
"shade80": "#ca940f",
"shade60": "#986f0b",
"shade40": "#654a08",
"shade20": "#332504",
"shade7": "#120d01"
},
"green": {
"shade80": "#84a63d",
"shade60": "#637c2e",
"shade40": "#42531e",
"shade20": "#21290f",
"shade7": "#0c0e05"
},
"teal": {
"shade80": "#009483",
"shade60": "#007c6c",
"shade40": "#005c50",
"shade20": "#00241f",
"shade7": "#000d0b"
},
"gray": {
"100": "#ffffff",
"black": "#000000",
"veryDark": "#1a1a1a",
"darker": "#404040",
"mediumDark": "#7f7f7f",
"medium": "#999999",
"mediumLight": "#cccccc",
"veryLight": "#f1f1f1",
"095": "#f1f1f1",
"090": "#e6e6e6",
"080": "#cccccc",
"070": "#b3b3b3",
"060": "#999999",
"050": "#7f7f7f",
"040": "#666666",
"025": "#404040",
"015": "#262626",
"010": "#1a1a1a",
"000": "#000000"
}
},
"contrastLink": "https://contrast.crgeary.com/#006ea6,00527c,003753,001b29,000a0e,023e82,022f61,011f41,011020,00050b,592374,431a57,2c123a,16091d,08030a,bc161d,8d1116,5e0b0e,2f0607,100203,ca940f,986f0b,654a08,332504,120d01,84a63d,637c2e,42531e,21290f,0c0e05,009483,007c6c,005c50,00241f,000d0b,ffffff,000000,1a1a1a,404040,7f7f7f,999999,cccccc,f1f1f1,f1f1f1,e6e6e6,cccccc,b3b3b3,999999,7f7f7f,666666,404040,262626,1a1a1a,000000"
}
There are no notes for this item.