No notes defined.
<section class='c-banner u-background-dark-blue'>
<div class='c-banner__content-wrapper'>
<header class='c-section-header u-background-dark-blue'>
<p class='c-section-header__supra'><span>Brand</span></p>
<h1 class='c-heading u-background-dark-blue'>
Colors
</h1>
</header>
</div>
</section>
<section class='l-row container-fluid'>
<h1 class='c-heading'>
Brand colors
</h1>
<div class='c-lead'>Colors corresponding to the Awareness, Community, Education, and Support respectively.</div>
<ul class='l-grid l-grid--items-4'>
<li class='u-background-alizarin-crimson l-grid__item u-padding--normal margin--bottom--normal'>
<h4>alizarin-crimson</h4>#ee3f42
</li>
<li class='u-background-pelorous l-grid__item u-padding--normal margin--bottom--normal'>
<h4>pelorous</h4>#3fbfc4
</li>
<li class='u-background-picton-blue l-grid__item u-padding--normal margin--bottom--normal'>
<h4>picton-blue</h4>#53b0e2
</li>
<li class='u-background-malibu l-grid__item u-padding--normal margin--bottom--normal'>
<h4>malibu</h4>#8dd7f7
</li>
</ul>
</section>
<section class='l-row container-fluid'>
<h1 class='c-heading'>
Complements
</h1>
<div class='c-lead'>Very rarely used, only in the context of an impact field's theme.</div>
<ul class='l-grid l-grid--items-4'>
<li class='u-background-alizarin-crimson-complement l-grid__item u-padding--normal margin--bottom--normal'>
<h4>alizarin-crimson-complement</h4>#6E1D1E
</li>
<li class='u-background-pelorous-complement l-grid__item u-padding--normal margin--bottom--normal'>
<h4>pelorous-complement</h4>#164345
</li>
<li class='u-background-picton-blue-complement l-grid__item u-padding--normal margin--bottom--normal'>
<h4>picton-blue-complement</h4>#254E63
</li>
<li class='u-background-malibu-complement l-grid__item u-padding--normal margin--bottom--normal'>
<h4>malibu-complement</h4>#446878
</li>
</ul>
</section>
<section class='l-row container-fluid'>
<h1 class='c-heading'>
Utility
</h1>
<div class='c-lead'>Only used to provide context or a level of contrast.</div>
<ul class='l-grid l-grid--items-8'>
<li class='u-background-muted l-grid__item u-padding--normal margin--bottom--normal'>
<h4>muted</h4>#fafafa
</li>
<li class='u-background-light-gray l-grid__item u-padding--normal margin--bottom--normal'>
<h4>light-gray</h4>#eee
</li>
<li class='u-background-gray l-grid__item u-padding--normal margin--bottom--normal'>
<h4>gray</h4>#aaa
</li>
<li class='u-background-dark-gray l-grid__item u-padding--normal margin--bottom--normal'>
<h4>dark-gray</h4>#404040
</li>
<li class='u-background-dark-blue l-grid__item u-padding--normal margin--bottom--normal'>
<h4>dark-blue</h4>#062c41
</li>
<li class='u-background-success l-grid__item u-padding--normal margin--bottom--normal'>
<h4>success</h4>#3BDBB4
</li>
<li class='u-background-error l-grid__item u-padding--normal margin--bottom--normal'>
<h4>error</h4>#F08688
</li>
<li class='u-background-notice l-grid__item u-padding--normal margin--bottom--normal'>
<h4>notice</h4>#F0EE56
</li>
</ul>
</section>
<section class='l-row container-fluid'>
<h1 class='c-heading'>
CSS
</h1>
<ul class='l-grid l-grid--items-4'>
<li class='u-background-headline-color l-grid__item u-padding--normal margin--bottom--normal'>
<h4>headline-color</h4>#062c41
</li>
<li class='u-background-text-color l-grid__item u-padding--normal margin--bottom--normal'>
<h4>text-color</h4>#222
</li>
<li class='u-background-link-border-color l-grid__item u-padding--normal margin--bottom--normal'>
<h4>link-border-color</h4>#53b0e2
</li>
<li class='u-background-inverted l-grid__item u-padding--normal margin--bottom--normal'>
<h4>inverted</h4>#fcfcfc
</li>
</ul>
</section>
{% set list_class = 'l-grid' %}
{% set item_class = 'l-grid__item u-padding--normal margin--bottom--normal' %}
{% include get_template( 'banner', 'unit' ) with {
display: {
backgroundColor: 'dark-blue',
},
header: {
supraheading: 'Brand',
heading: {
text: 'Colors'
},
lead: NULL,
},
} %}
{% for background in backgrounds %}
<section class='l-row container-fluid'>
{% include '@unit/heading/heading.twig' with background.heading %}
{% if background.lead %}
{% include '@unit/lead/lead.twig' with background.lead %}
{% endif %}
<ul class='{{ list_class }} l-grid--items-{{ background.colors|length }}' >
{% for color in background.colors %}
<li class='u-background-{{ color.name }} {{ item_class }}'><h4>{{ color.name }}</h4>{{ color.color }}</li>
{% endfor %}
</ul>
</section>
{% endfor %}
{
"theme": "education",
"backgrounds": [
{
"heading": {
"text": "Brand colors"
},
"lead": {
"content": "Colors corresponding to the Awareness, Community, Education, and Support respectively."
},
"colors": [
{
"name": "alizarin-crimson",
"color": "#ee3f42"
},
{
"name": "pelorous",
"color": "#3fbfc4"
},
{
"name": "picton-blue",
"color": "#53b0e2"
},
{
"name": "malibu",
"color": "#8dd7f7"
}
]
},
{
"heading": {
"text": "Complements"
},
"lead": {
"content": "Very rarely used, only in the context of an impact field's theme."
},
"colors": [
{
"name": "alizarin-crimson-complement",
"color": "#6E1D1E"
},
{
"name": "pelorous-complement",
"color": "#164345"
},
{
"name": "picton-blue-complement",
"color": "#254E63"
},
{
"name": "malibu-complement",
"color": "#446878"
}
]
},
{
"heading": {
"text": "Utility"
},
"lead": {
"content": "Only used to provide context or a level of contrast."
},
"colors": [
{
"name": "muted",
"color": "#fafafa"
},
{
"name": "light-gray",
"color": "#eee"
},
{
"name": "gray",
"color": "#aaa"
},
{
"name": "dark-gray",
"color": "#404040"
},
{
"name": "dark-blue",
"color": "#062c41"
},
{
"name": "success",
"color": "#3BDBB4"
},
{
"name": "error",
"color": "#F08688"
},
{
"name": "notice",
"color": "#F0EE56"
}
]
},
{
"heading": {
"text": "CSS"
},
"colors": [
{
"name": "headline-color",
"color": "#062c41"
},
{
"name": "text-color",
"color": "#222"
},
{
"name": "link-border-color",
"color": "#53b0e2"
},
{
"name": "inverted",
"color": "#fcfcfc"
}
]
}
]
}