<section class='c-banner c-banner--has-overlay c-banner--half-page' style="background-image: url( '/images/cover-journey-16x9.jpg' );">
<div class='c-banner__content-wrapper'>
<span class='c-icon c-icon--huge c-icon--noun_communication_1435998-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px">
<path d="M48.68,51.39a4.8,4.8,0,0,0-2.14-4,6.94,6.94,0,0,1,4.09-12.69,7.07,7.07,0,0,1,6.73,7A6.93,6.93,0,0,1,54.3,47.4a4.79,4.79,0,0,0,2.64,8.78,6.89,6.89,0,0,1,6.88,6.88V64a2.5,2.5,0,0,0,5,0v-.92A11.9,11.9,0,0,0,57.58,51.2a11.94,11.94,0,1,0-14.34,0A11.9,11.9,0,0,0,32,63.06v4a2.5,2.5,0,0,0,5,0v-4a6.89,6.89,0,0,1,6.88-6.88A4.8,4.8,0,0,0,48.68,51.39Z"></path>
<path d="M93.35,54.46c.15-1.46.25-2.91.25-4.33a43.4,43.4,0,0,0-5.19-20.54,9.47,9.47,0,0,0-12-14.06A43.52,43.52,0,0,0,51.67,6.72,9.48,9.48,0,0,0,33.44,10,43.73,43.73,0,0,0,14,26.06a10.67,10.67,0,0,0-7,19.81c-.14,1.43-.24,2.86-.24,4.26a43.4,43.4,0,0,0,5.13,20.44A9.47,9.47,0,0,0,23.78,84.65,43.51,43.51,0,0,0,48.7,93.55a9.47,9.47,0,0,0,18.1-3.28A43.72,43.72,0,0,0,86.36,74.14a10.67,10.67,0,0,0,7-19.68Zm-12.55-35a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,80.8,19.45ZM42.91,5.85a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,42.91,5.85ZM6.53,36.59a5.68,5.68,0,1,1,5.68,5.69A5.69,5.69,0,0,1,6.53,36.59Zm12.9,44.13a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,19.43,80.72ZM57.35,94.15a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,57.35,94.15Zm8.4-8.88a9.48,9.48,0,0,0-17.81,3.24A38.5,38.5,0,0,1,27.5,81.19,9.47,9.47,0,0,0,15.83,67.46,38.42,38.42,0,0,1,11.7,50.13c0-.05,0-.11,0-.16A44.57,44.57,0,0,0,24,62.39a2.5,2.5,0,0,0,2.89-4.08c-5.15-3.65-9.06-7.68-11.29-11.59a10.66,10.66,0,0,0,5.58-15.95c4.63-1.8,11-2.4,18.08-1.64a2.5,2.5,0,0,0,.53-5c-7.4-.79-14.05-.24-19.3,1.54A38.7,38.7,0,0,1,34.63,15a9.47,9.47,0,0,0,17.65-3.21A38.52,38.52,0,0,1,72.71,19a9.48,9.48,0,0,0,11.71,13.7A38.42,38.42,0,0,1,88.6,50.13c0,.25,0,.51,0,.76-3.71-6.51-11-12.91-20.5-17.95a2.5,2.5,0,0,0-2.33,4.42C74.4,41.94,81.11,47.81,84.3,53.48a10.65,10.65,0,0,0-5.52,15.8c-7.88,3.15-20.42,2.6-33.11-1.63a2.5,2.5,0,0,0-1.58,4.74A72.11,72.11,0,0,0,66.5,76.3,39.1,39.1,0,0,0,80.21,74.1,38.72,38.72,0,0,1,65.75,85.27Zm22-16a5.68,5.68,0,1,1,5.68-5.69A5.69,5.69,0,0,1,87.79,69.25Z"></path>
</svg>
</span>
<header class='c-section-header'>
<p class='c-section-header__supra'><span>Banner</span></p>
<h1 class='c-heading'>
Section Heading
</h1>
</header>
<div class='c-lead'>
<p>A lead text is an introduction to the content of the page. Should start with the main subject and finish with an excerpt.</p>
</div>
</div>
</section>
<section class='{{ get_component_class( 'banner', display ) }}'
{% if image and not ( 'positioned-background' in display.modifiers ) %} style="background-image: url( '{{ image.src }}' );" {% endif %}
{% if dir %} dir='{{ dir }}' {% endif %}>
{% if flourish %}
{% include '@brand/flourishes/flourishes--' ~ flourish ~ '.twig' %}
{% endif %}
{% if image and ( 'positioned-background' in display.modifiers ) %}
<div class='c-banner__background-wrapper' style="background-image: url( '{{ image.src }}' );"></div>
{% endif %}
<div class='c-banner__content-wrapper'>
{% if leaf %}
{% include '@brand/sia-leaf/sia-leaf.twig' %}
{% elseif headshot %}
{% include '@unit/headshot/headshot.twig' with headshot %}
{% elseif logo %}
{% include get_template( 'logo', 'unit' ) with logo %}
{% elseif countryMap %}
{% include get_template( 'country-map', 'unit' ) with countryMap %}
{% elseif countryFlag %}
{% include '@unit/icon/icon--country-flag.twig' with countryFlag %}
{% elseif icon %}
{% include '@unit/icon/icon.twig' with icon %}
{% endif %}
{% include '@unit/section-header/section-header.twig' with header %}
{% if meta %}
{% include '@unit/meta/meta.twig' with meta %}
{% endif %}
{% if lead %}
{% include '@unit/lead/lead.twig' with lead %}
{% endif %}
{% if button or link %}
<p class='c-banner__action'>
{% if button %}
{% include get_template( 'button', 'base' ) with button %}
{% elseif link %}
{% include get_template( 'link', 'base' ) with link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
{% endif %}
</p>
{% endif %}
</div>
</section>
{
"header": {
"display": {
"modifiers": null
},
"supraheading": "Banner",
"heading": {
"text": "Section Heading"
}
},
"lead": {
"display": {
"modifiers": null
},
"content": "<p>A lead text is an introduction to the content of the page. Should start with the main subject and finish with an excerpt.</p>"
},
"display": {
"layout": "half-page",
"modifiers": [
"has-overlay"
]
},
"image": {
"src": "/images/cover-journey-16x9.jpg"
},
"icon": {
"display": {
"modifiers": [
"huge"
]
},
"basename": "noun_Communication_1435998.svg"
}
}