No notes defined.
<div class='c-callout c-callout--reversed c-callout--with-icon'>
<div class='c-callout__media'>
<img class='c-callout__image' src='/images/summit-speaker-balloons-1x1.jpg' alt='' />
</div>
<div class='c-callout__content-wrapper'>
<span class='c-icon c-icon--double c-callout__icon 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>
<h1 class='c-heading c-heading--reversed'>
Callout
</h1>
<div class='c-lead c-lead--reversed'>
<p>A callout takes over a section of the page. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
</div>
<p class='c-callout__action'>
<a class='c-link c-link--forward c-link--with-icon c-link--with-icon--reversed ' href="" itemprop="item" itemid=""><span itemprop="name">Follow through</span></a>
</p>
</div>
</div>
<div class='{{ get_component_class( 'callout', display ) }} {% if not image %}c-callout--text-only{% endif %} {% if icon %}c-callout--with-icon{% endif %}'>
{% if video or image %}
<div class='c-callout__media'>
{% if video %}
{% include get_template( 'embed', 'unit' ) with video %}
{% elseif image %}
<img class='c-callout__image' src='{{ image.src }}' alt='{{ image.alt }}' />
{% endif %}
</div>
{% endif %}
<div class='c-callout__content-wrapper'>
{% if notice %}
{% include get_template( 'notice', 'unit' ) with notice %}
{% set notice = NULL %}
{% endif %}
{% if deco and not icon %}
{% include '@brand/flourishes/flourishes--' ~ deco.type ~ '-deco.twig' with deco|merge( { display: { component: 'callout' } } ) %}
{% endif %}
{% if icon %}
{% include '@unit/icon/icon.twig' with icon|merge( { display: { component: 'callout', modifiers: [ 'double' ] } } ) %}
{% endif %}
{% if heading %}
{% include '@unit/heading/heading.twig' with heading %}
{% endif %}
{% if lead %}
{% include get_template( 'lead', 'unit' ) with lead %}
{% endif %}
{% if link %}
<p class='c-callout__action'>
{% include get_template( 'link', 'base' ) with link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
</p>
{% endif %}
</div>
</div>
{
"deco": {
"type": "caron",
"count": 10
},
"image": {
"src": "/images/summit-speaker-balloons-1x1.jpg"
},
"heading": {
"text": "Callout"
},
"lead": {
"content": "<p>A callout takes over a section of the page. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
},
"link": {
"url": "#",
"text": "Follow through"
},
"wrapperTheme": "awareness",
"display": {
"modifiers": [
"reversed"
]
},
"icon": {
"basename": "noun_Communication_1435998.svg"
}
}