No notes defined.
<section class='c-page-section
c-page-section--figures '>
<div class='c-page-section__figure-wrapper'>
<section class='c-figures c-figures--columns c-figures--columns-2'>
<ul class='c-figures__items d-flex u-list--unstyled'>
<li class='c-figures__items__item'>
<figure class='c-stat c-stat--highlight c-stat--with-icon '>
<span class='c-icon c-icon--double c-stat__icon c-icon--noun_discussion_1430519-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="M88.5,73.78a11.8,11.8,0,1,0-14.33,0,11.73,11.73,0,0,0-8.5,4.48,11.73,11.73,0,0,0-8.5-4.48,11.8,11.8,0,1,0-14.33,0,11.73,11.73,0,0,0-8.5,4.48,11.73,11.73,0,0,0-8.5-4.48,11.8,11.8,0,1,0-14.33,0A11.76,11.76,0,0,0,.5,85.49V92.4A2.5,2.5,0,0,0,3,94.9H97a2.5,2.5,0,0,0,2.5-2.5V85.49A11.76,11.76,0,0,0,88.5,73.78ZM31.83,89.9H5.5V85.49a6.75,6.75,0,0,1,6.74-6.74A4.75,4.75,0,0,0,14.88,70a6.79,6.79,0,0,1-.94-10.51,6.71,6.71,0,0,1,4.94-1.92,6.93,6.93,0,0,1,6.59,6.81,6.79,6.79,0,0,1-3,5.62,4.75,4.75,0,0,0,2.62,8.71,6.75,6.75,0,0,1,6.74,6.74Zm31.33,0H36.83V85.49a6.75,6.75,0,0,1,6.74-6.74A4.75,4.75,0,0,0,46.21,70a6.79,6.79,0,0,1,4-12.43,6.93,6.93,0,0,1,6.59,6.81,6.79,6.79,0,0,1-3,5.62,4.75,4.75,0,0,0,2.62,8.72,6.75,6.75,0,0,1,6.74,6.74Zm31.33,0H68.17V85.49a6.75,6.75,0,0,1,6.74-6.74A4.75,4.75,0,0,0,77.54,70a6.79,6.79,0,0,1,4-12.43,6.93,6.93,0,0,1,6.59,6.81,6.79,6.79,0,0,1-3,5.62,4.75,4.75,0,0,0,2.62,8.71,6.75,6.75,0,0,1,6.74,6.74Z"></path>
<path d="M32.8,53.15a2.49,2.49,0,0,0,2.72-.54L45.92,42.22h8.17L64.47,52.61a2.5,2.5,0,0,0,4.27-1.77V42.22h6.75a8.36,8.36,0,0,0,8.35-8.35V13.44A8.36,8.36,0,0,0,75.49,5.1h-51a8.36,8.36,0,0,0-8.35,8.35V33.87a8.36,8.36,0,0,0,8.35,8.35h6.75v8.62A2.5,2.5,0,0,0,32.8,53.15ZM24.51,37.22a3.35,3.35,0,0,1-3.35-3.35V13.44a3.35,3.35,0,0,1,3.35-3.35h51a3.35,3.35,0,0,1,3.35,3.35V33.87a3.35,3.35,0,0,1-3.35,3.35H66.24a2.5,2.5,0,0,0-2.5,2.5V44.8l-6.85-6.85a2.5,2.5,0,0,0-1.77-.73H44.88a2.5,2.5,0,0,0-1.77.73L36.26,44.8V39.72a2.5,2.5,0,0,0-2.5-2.5Z"></path>
<path d="M37,24.66a2.52,2.52,0,0,0,.23.43,2.79,2.79,0,0,0,.31.38,2.32,2.32,0,0,0,.38.31,2.24,2.24,0,0,0,.43.23,2.57,2.57,0,0,0,.47.14,2.63,2.63,0,0,0,.49,0,2.83,2.83,0,0,0,.49,0,2.71,2.71,0,0,0,.46-.14,2.21,2.21,0,0,0,.43-.23,2.33,2.33,0,0,0,.38-.31,2.78,2.78,0,0,0,.31-.38,2,2,0,0,0,.23-.43,2.13,2.13,0,0,0,.15-.47,2.44,2.44,0,0,0,0-1,2.71,2.71,0,0,0-.38-.9,2.27,2.27,0,0,0-.31-.38,2.35,2.35,0,0,0-.38-.31,2.21,2.21,0,0,0-.43-.23,2.66,2.66,0,0,0-.46-.14,2.3,2.3,0,0,0-1,0,2.53,2.53,0,0,0-.47.14,2.24,2.24,0,0,0-.43.23,2.34,2.34,0,0,0-.38.31,2.28,2.28,0,0,0-.31.38,2.51,2.51,0,0,0-.23.43,3.59,3.59,0,0,0-.15.47,3,3,0,0,0,0,1A4.15,4.15,0,0,0,37,24.66Z"></path>
<circle cx="50" cy="23.7" r="2.5"></circle>
<path d="M58.42,24.66a3.6,3.6,0,0,0,.23.43,3.88,3.88,0,0,0,.32.38,2.51,2.51,0,0,0,1.76.73,2.65,2.65,0,0,0,.49,0,2.54,2.54,0,0,0,.47-.14,2.58,2.58,0,0,0,.43-.23,2.88,2.88,0,0,0,.38-.31,3.76,3.76,0,0,0,.31-.38,2.41,2.41,0,0,0,.37-.9,2,2,0,0,0,0-.49,2.51,2.51,0,0,0-.73-1.77,2.92,2.92,0,0,0-.38-.31,2.58,2.58,0,0,0-.43-.23,2.51,2.51,0,0,0-3.46,2.31,2.69,2.69,0,0,0,.05.49A2.45,2.45,0,0,0,58.42,24.66Z"></path>
</svg>
</span> <span class='c-stat__text'>
<figcaption class='c-stat__caption'>
<strong class='c-stat__highlight'>Global Reach</strong>
</figcaption>
<span class='c-stat__figure'><span class='c-stat__number'>137</span> </span>
<span class='c-stat__detail'>Cities reached by our program</span>
</span>
</figure>
</li>
<li class='c-figures__items__item'>
<figure class='c-stat c-stat--highlight c-stat--with-icon '>
<span class='c-icon c-icon--double c-stat__icon c-icon--noun_social-network_1429555-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">
<title>Artboard 5</title>
<path d="M87.82,66.08a12.19,12.19,0,0,0-4.67-21.8V22.63A10.23,10.23,0,0,0,72.93,12.41H62A12.3,12.3,0,0,0,50.37,2.29,12.18,12.18,0,0,0,38,12.41H27.07A10.23,10.23,0,0,0,16.85,22.63V44.28A12.17,12.17,0,0,0,7.15,56.21a12.18,12.18,0,0,0,5,9.87A12.16,12.16,0,0,0,.5,78.22v3A2.5,2.5,0,0,0,3,83.75H16.85v4.52a9.45,9.45,0,0,0,9.44,9.44H73.71a9.45,9.45,0,0,0,9.44-9.44V83.75H97a2.5,2.5,0,0,0,2.5-2.5v-3A12.16,12.16,0,0,0,87.82,66.08ZM45,9.32a7.15,7.15,0,0,1,5.24-2,7.34,7.34,0,0,1,7,7.21,7.2,7.2,0,0,1-3.18,6,4.85,4.85,0,0,0,2.68,8.89,7.15,7.15,0,0,1,7.15,7.15V37H36.15V36.5a7.15,7.15,0,0,1,7.15-7.15A4.85,4.85,0,0,0,46,20.46,7.2,7.2,0,0,1,45,9.32ZM5.5,78.22a7.15,7.15,0,0,1,7.15-7.15,4.85,4.85,0,0,0,2.69-8.89A7.2,7.2,0,0,1,19.58,49a7.34,7.34,0,0,1,7,7.21,7.2,7.2,0,0,1-3.18,6,4.85,4.85,0,0,0,2.68,8.89,7.15,7.15,0,0,1,7.15,7.15v.53H5.5ZM78.15,88.27a4.45,4.45,0,0,1-4.44,4.44H26.29a4.45,4.45,0,0,1-4.44-4.44V83.75H35.7a2.5,2.5,0,0,0,2.5-2.5v-3A12.16,12.16,0,0,0,26.52,66.08a12.19,12.19,0,0,0-4.67-21.8V22.63a5.23,5.23,0,0,1,5.22-5.22H38.15a12.19,12.19,0,0,0,4.68,7A12.16,12.16,0,0,0,31.15,36.5v3a2.5,2.5,0,0,0,2.5,2.5h32.7a2.5,2.5,0,0,0,2.5-2.5v-3A12.16,12.16,0,0,0,57.17,24.36a12.2,12.2,0,0,0,4.68-7H72.93a5.23,5.23,0,0,1,5.22,5.22V44.28a12.17,12.17,0,0,0-9.71,11.93,12.18,12.18,0,0,0,5,9.87A12.16,12.16,0,0,0,61.8,78.22v3a2.5,2.5,0,0,0,2.5,2.5H78.15ZM94.5,78.75H66.8v-.53a7.15,7.15,0,0,1,7.15-7.15,4.85,4.85,0,0,0,2.69-8.89A7.2,7.2,0,0,1,80.87,49a7.34,7.34,0,0,1,7,7.21,7.2,7.2,0,0,1-3.18,6,4.85,4.85,0,0,0,2.68,8.89,7.15,7.15,0,0,1,7.15,7.15Z"></path>
<circle cx="50" cy="63.88" r="2.5"></circle>
<circle cx="50" cy="53.77" r="2.5"></circle>
<circle cx="50" cy="74.02" r="2.5"></circle>
</svg>
</span> <span class='c-stat__text'>
<figcaption class='c-stat__caption'>
<strong class='c-stat__highlight'>Session Participation</strong>
</figcaption>
<span class='c-stat__figure'><span class='c-stat__number'>355</span> </span>
<span class='c-stat__detail'>Workshop and event attendees</span>
</span>
</figure>
</li>
</ul>
</section>
</div>
<div class='c-page-section__content-wrapper'>
<div class='c-callout c-callout--text-only '>
<div class='c-callout__content-wrapper'>
<h1 class='c-heading'>
Callout
</h1>
<div class='c-lead'>
<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>
</section>
<section class='{{ get_component_class( 'page-section', display ) }}
{% if video or image %} c-page-section--media {% endif %}
{% if video %} c-page-section--media--video {% endif %}
{% if image %} c-page-section--media--image {% endif %}
{% if figures %} c-page-section--figures {% endif %}'>
<div class='c-page-section__figure-wrapper'>
{% if video or image %}
<div class='c-page-section__media'>
{% if video %}
{% include get_template( 'embed', 'unit' ) with video %}
{% elseif image %}
<div class='c-page-section__media__container-ratio'>
<img class='c-page-section__image' src='{{ image.src }}' alt='{{ image.alt }}' />
</div>
{% endif %}
</div>
{% endif %}
{% if figures %}
{% include get_template( 'figures', 'group' ) with figures %}
{% endif %}
</div>
<div class='c-page-section__content-wrapper'>
{% include get_template( 'callout', 'unit' ) with callout|merge( { image: null, video: null } ) %}
</div>
</section>
{
"image": null,
"callout": {
"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"
}
},
"theme": "community",
"figures": {
"display": {
"modifiers": [
"columns",
"columns-2"
]
},
"statModifiers": [
"highlight"
],
"items": [
{
"figure": 137,
"caption": "Global Reach",
"detail": "Cities reached by our program",
"icon": {
"basename": "noun_discussion_1430519.svg"
}
},
{
"figure": 355,
"caption": "Session Participation",
"detail": "Workshop and event attendees",
"icon": {
"basename": "noun_social network_1429555.svg"
}
}
]
}
}