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'>
Themes
</h1>
</header>
</div>
</section>
<section class='t-theme--awareness'>
<ul class='u-list--unstyled row'>
<li class='col-md'>
<div class='l-spacer'>
<span class='c-icon c-icon--icon-leaf-awareness-svg'>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
<g id="Awareness_1_">
<g>
<g>
<path fill="#EF3F42" d="M122.2,0C193.5-1.5,251.5,56.5,250,127.8C248.5,195.9,191.9,250,123.7,250H0l0-123.7
C0,58.1,54.1,1.5,122.2,0z" />
</g>
</g>
</g>
</svg>
</span>
<header class='c-section-header'>
<h1 class='c-heading'>
Awareness
</h1>
</header>
<div class='c-lead'>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
</div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<footer>
John Johnson, <cite><a href="#!">Impact Hub Report 2018.</a></cite>
</footer>
</blockquote>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
<li class='col-md'>
<div class='l-spacer t-background--accent'>
<h1 class='c-heading'>
Accent
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
<div class='l-spacer t-background--complementary'>
<h1 class='c-heading'>
Complementary
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
</ul>
</section>
<section class='t-theme--community'>
<ul class='u-list--unstyled row'>
<li class='col-md'>
<div class='l-spacer'>
<span class='c-icon c-icon--icon-leaf-community-svg'>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
<g id="Community_1_">
<g>
<g>
<path fill="#43BFC4" d="M129.4,249.9C56.9,252.5-2.4,193.1,0.1,120.6C2.4,53,59.2,0,126.8,0H250v123.2
C250,190.8,197,247.6,129.4,249.9z" />
</g>
</g>
</g>
</svg>
</span>
<header class='c-section-header'>
<h1 class='c-heading'>
Community
</h1>
</header>
<div class='c-lead'>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
</div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<footer>
John Johnson, <cite><a href="#!">Impact Hub Report 2018.</a></cite>
</footer>
</blockquote>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
<li class='col-md'>
<div class='l-spacer t-background--accent'>
<h1 class='c-heading'>
Accent
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
<div class='l-spacer t-background--complementary'>
<h1 class='c-heading'>
Complementary
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
</ul>
</section>
<section class='t-theme--education'>
<ul class='u-list--unstyled row'>
<li class='col-md'>
<div class='l-spacer'>
<span class='c-icon c-icon--icon-leaf-education-svg'>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
<g id="Education_1_">
<g>
<g>
<path fill="#53AEDE" d="M98.1,2.8c-47.7,10-85.3,47.6-95.3,95.3C-14,178.8,47.2,250,125,250h125V125C250,47.2,178.8-14,98.1,2.8z
" />
</g>
</g>
</g>
</svg>
</span>
<header class='c-section-header'>
<h1 class='c-heading'>
Education
</h1>
</header>
<div class='c-lead'>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
</div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<footer>
John Johnson, <cite><a href="#!">Impact Hub Report 2018.</a></cite>
</footer>
</blockquote>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
<li class='col-md'>
<div class='l-spacer t-background--accent'>
<h1 class='c-heading'>
Accent
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
<div class='l-spacer t-background--complementary'>
<h1 class='c-heading'>
Complementary
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
</ul>
</section>
<section class='t-theme--support'>
<ul class='u-list--unstyled row'>
<li class='col-md'>
<div class='l-spacer'>
<span class='c-icon c-icon--icon-leaf-support-svg'>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
<g id="Support_1_">
<g>
<g>
<path fill="#8DD7F7" d="M125,250c70.9,0,128.1-59.1,124.9-130.7C246.9,52.2,190.3,0,123.2,0H0v125C0.1,194,56,250,125,250z" />
</g>
</g>
</g>
</svg>
</span>
<header class='c-section-header'>
<h1 class='c-heading'>
Support
</h1>
</header>
<div class='c-lead'>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
</div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<footer>
John Johnson, <cite><a href="#!">Impact Hub Report 2018.</a></cite>
</footer>
</blockquote>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
<li class='col-md'>
<div class='l-spacer t-background--accent'>
<h1 class='c-heading'>
Accent
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
<div class='l-spacer t-background--complementary'>
<h1 class='c-heading'>
Complementary
</h1>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p><a class='c-button' href="">Button</a> <a class='c-link ' href="" itemprop="item" itemid=""><span itemprop="name">Link</span></a></p>
</div>
</li>
</ul>
</section>
{% include get_template( 'banner', 'unit' ) with {
display: {
backgroundColor: 'dark-blue',
},
header: {
supraheading: 'Brand',
heading: {
text: 'Themes'
},
lead: NULL,
},
} %}
{% for theme in themes %}
<section class='t-theme--{{ theme.id }}'>
<ul class='u-list--unstyled row'>
<li class='col-md'>
<div class='l-spacer'>
{% include '@brand/sia-leaf/sia-leaf.twig' with { leaf: theme.id } %}
{% include '@unit/section-header/section-header.twig' with { heading: { text: theme.name } } %}
{% include '@unit/lead/lead.twig' with { content: "<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>" } %}
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<footer>
John Johnson, <cite><a href="#!">Impact Hub Report 2018.</a></cite>
</footer>
</blockquote>
<p>{% include '@base/button/button.twig' with { text: 'Button' } %} {% include '@base/link/link.twig' with { text: 'Link' } %}</p>
</div>
</li>
<li class='col-md'>
<div class='l-spacer t-background--accent'>
{% include '@unit/heading/heading.twig' with { text: 'Accent' } %}
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p>{% include '@base/button/button.twig' with { text: 'Button' } %} {% include '@base/link/link.twig' with { text: 'Link' } %}</p>
</div>
<div class='l-spacer t-background--complementary'>
{% include '@unit/heading/heading.twig' with { text: "Complementary" } %}
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<p>{% include '@base/button/button.twig' with { text: 'Button' } %} {% include '@base/link/link.twig' with { text: 'Link' } %}</p>
</div>
</li>
</ul>
</section>
{% endfor %}
{
"themes": [
{
"id": "awareness",
"name": "Awareness",
"colors": {
"accent": "alizarin-crimson"
}
},
{
"id": "community",
"name": "Community",
"colors": {
"accent": "pelorous"
}
},
{
"id": "education",
"name": "Education",
"colors": {
"accent": "picton-blue"
}
},
{
"id": "support",
"name": "Support",
"colors": {
"accent": "malibu"
}
}
]
}