No notes defined.
<div class='c-features'>
<h1 class='c-heading'>
Here's the reasons
</h1>
<div class='c-lead'>
<p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
</div>
<ul class='c-features__items l-grid--items-4'>
<li class='c-features__items__item'>
<span class='c-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>
<div class='c-features__items__item__content'>
<h1 class='c-heading c-heading--minor'>
Feature
</h1>
<div class='c-lead'>
<p>Features are a group of VPs, USPs, or grouped types of information. 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-features__items__item__content__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>
</li>
<li class='c-features__items__item'>
<span class='c-icon c-icon--noun_skyscraper_1183864-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 3</title>
<path d="M6.38,99H93.62a2.5,2.5,0,0,0,0-5H87.23V31.74a5.13,5.13,0,0,0-5.12-5.12H79.38v-10a5.14,5.14,0,0,0-5.14-5.14H67.66v-8a2.5,2.5,0,0,0-5,0v8H56.07a5.14,5.14,0,0,0-5.14,5.14v10H48.21a5.13,5.13,0,0,0-5.12,5.12v19.6H17.89a5.13,5.13,0,0,0-5.12,5.12V94H6.38a2.5,2.5,0,0,0,0,5ZM55.93,16.61a.14.14,0,0,1,.14-.14H74.25a.14.14,0,0,1,.14.14v10H55.93Zm-7.73,15h33.9a.12.12,0,0,1,.12.12V94H48.09V31.74A.12.12,0,0,1,48.21,31.62ZM17.77,56.46a.12.12,0,0,1,.12-.12h25.2V94H17.77Z"></path>
<path d="M55.74,87.45H74.58a2.5,2.5,0,0,0,0-5H55.74a2.5,2.5,0,1,0,0,5Z"></path>
<path d="M55.74,76.29H74.58a2.5,2.5,0,0,0,0-5H55.74a2.5,2.5,0,1,0,0,5Z"></path>
<path d="M55.74,65.13H74.58a2.5,2.5,0,1,0,0-5H55.74a2.5,2.5,0,1,0,0,5Z"></path>
<path d="M55.74,54H74.58a2.5,2.5,0,0,0,0-5H55.74a2.5,2.5,0,1,0,0,5Z"></path>
<path d="M55.74,42.83H74.58a2.5,2.5,0,0,0,0-5H55.74a2.5,2.5,0,1,0,0,5Z"></path>
</svg>
</span>
<div class='c-features__items__item__content'>
<h1 class='c-heading c-heading--minor'>
Feature
</h1>
<div class='c-lead'>
<p>Features are a group of VPs, USPs, or grouped types of information. 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-features__items__item__content__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>
</li>
<li class='c-features__items__item'>
<span class='c-icon c-icon--noun_friendly-chat_1436000-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="M89.23,31.89H61.89V11.23A10.28,10.28,0,0,0,51.63,1H10.77A10.28,10.28,0,0,0,.5,11.23V44.67A10.28,10.28,0,0,0,10.77,54.94h4.4V65.61a2.5,2.5,0,0,0,4.27,1.77L31.9,54.94h6.21V75.6A10.28,10.28,0,0,0,48.38,85.87H68.1L80.56,98.31a2.5,2.5,0,0,0,4.27-1.77V85.87h4.4A10.28,10.28,0,0,0,99.5,75.6V42.16A10.28,10.28,0,0,0,89.23,31.89Zm-58.37,18a2.5,2.5,0,0,0-1.77.73l-8.92,8.91V52.44a2.5,2.5,0,0,0-2.5-2.5h-6.9A5.27,5.27,0,0,1,5.5,44.67V11.23A5.27,5.27,0,0,1,10.77,6H51.63a5.27,5.27,0,0,1,5.27,5.27V31.89H48.37A10.28,10.28,0,0,0,38.11,42.16v7.78ZM94.5,75.6a5.28,5.28,0,0,1-5.27,5.27h-6.9a2.5,2.5,0,0,0-2.5,2.5v7.14L70.91,81.6a2.5,2.5,0,0,0-1.77-.73H48.38a5.28,5.28,0,0,1-5.27-5.27V42.16a5.27,5.27,0,0,1,5.27-5.27H89.23a5.27,5.27,0,0,1,5.27,5.27Z"></path>
<path d="M41.37,21.14a2.5,2.5,0,0,0-3.54,0l-9.71,9.71L24.56,27.3A2.5,2.5,0,0,0,21,30.84l5.32,5.32a2.5,2.5,0,0,0,3.54,0L41.37,24.68A2.5,2.5,0,0,0,41.37,21.14Z"></path>
<path d="M58.69,51.28a2.47,2.47,0,0,1,2.46,2.46,2.5,2.5,0,1,0,5,0,7.46,7.46,0,0,0-14.93,0,2.5,2.5,0,1,0,5,0A2.47,2.47,0,0,1,58.69,51.28Z"></path>
<path d="M78.92,46.28a7.47,7.47,0,0,0-7.47,7.46,2.5,2.5,0,1,0,5,0,2.46,2.46,0,0,1,4.93,0,2.5,2.5,0,1,0,5,0A7.47,7.47,0,0,0,78.92,46.28Z"></path>
<path d="M80.2,62.35a2.5,2.5,0,0,0-3.33,1.18,8.92,8.92,0,0,1-16.13,0,2.5,2.5,0,1,0-4.52,2.14,13.92,13.92,0,0,0,25.17,0A2.5,2.5,0,0,0,80.2,62.35Z"></path>
</svg>
</span>
<div class='c-features__items__item__content'>
<h1 class='c-heading c-heading--minor'>
Feature
</h1>
<div class='c-lead'>
<p>Features are a group of VPs, USPs, or grouped types of information. 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-features__items__item__content__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>
</li>
<li class='c-features__items__item'>
<span class='c-icon c-icon--noun_friendly-chat_1436000-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="M89.23,31.89H61.89V11.23A10.28,10.28,0,0,0,51.63,1H10.77A10.28,10.28,0,0,0,.5,11.23V44.67A10.28,10.28,0,0,0,10.77,54.94h4.4V65.61a2.5,2.5,0,0,0,4.27,1.77L31.9,54.94h6.21V75.6A10.28,10.28,0,0,0,48.38,85.87H68.1L80.56,98.31a2.5,2.5,0,0,0,4.27-1.77V85.87h4.4A10.28,10.28,0,0,0,99.5,75.6V42.16A10.28,10.28,0,0,0,89.23,31.89Zm-58.37,18a2.5,2.5,0,0,0-1.77.73l-8.92,8.91V52.44a2.5,2.5,0,0,0-2.5-2.5h-6.9A5.27,5.27,0,0,1,5.5,44.67V11.23A5.27,5.27,0,0,1,10.77,6H51.63a5.27,5.27,0,0,1,5.27,5.27V31.89H48.37A10.28,10.28,0,0,0,38.11,42.16v7.78ZM94.5,75.6a5.28,5.28,0,0,1-5.27,5.27h-6.9a2.5,2.5,0,0,0-2.5,2.5v7.14L70.91,81.6a2.5,2.5,0,0,0-1.77-.73H48.38a5.28,5.28,0,0,1-5.27-5.27V42.16a5.27,5.27,0,0,1,5.27-5.27H89.23a5.27,5.27,0,0,1,5.27,5.27Z"></path>
<path d="M41.37,21.14a2.5,2.5,0,0,0-3.54,0l-9.71,9.71L24.56,27.3A2.5,2.5,0,0,0,21,30.84l5.32,5.32a2.5,2.5,0,0,0,3.54,0L41.37,24.68A2.5,2.5,0,0,0,41.37,21.14Z"></path>
<path d="M58.69,51.28a2.47,2.47,0,0,1,2.46,2.46,2.5,2.5,0,1,0,5,0,7.46,7.46,0,0,0-14.93,0,2.5,2.5,0,1,0,5,0A2.47,2.47,0,0,1,58.69,51.28Z"></path>
<path d="M78.92,46.28a7.47,7.47,0,0,0-7.47,7.46,2.5,2.5,0,1,0,5,0,2.46,2.46,0,0,1,4.93,0,2.5,2.5,0,1,0,5,0A7.47,7.47,0,0,0,78.92,46.28Z"></path>
<path d="M80.2,62.35a2.5,2.5,0,0,0-3.33,1.18,8.92,8.92,0,0,1-16.13,0,2.5,2.5,0,1,0-4.52,2.14,13.92,13.92,0,0,0,25.17,0A2.5,2.5,0,0,0,80.2,62.35Z"></path>
</svg>
</span>
<div class='c-features__items__item__content'>
<h1 class='c-heading c-heading--minor'>
Feature
</h1>
<div class='c-lead'>
<p>Features are a group of VPs, USPs, or grouped types of information. 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-features__items__item__content__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>
</li>
</ul>
</div>
{% if display and display.layout and display.layout != 'grid' %}
{% set list_class = 'l-' ~ display.layout ~ ' l-' ~ display.layout ~ '--items-' ~ items|length %}
{% else %}
{% if 'columns-2' in display.modifiers %}
{% set list_class = 'l-grid--wide l-grid--items-' ~ items|length %}
{% else %}
{% set list_class = 'l-grid--items-' ~ items|length %}
{% endif %}
{% endif %}
{% if 'secondary' in display.modifiers %}
{% set heading_display = { modifiers: [ 'blocky' ] } %}
{% else %}
{% set heading_display = { modifiers: [ 'minor' ] } %}
{% endif %}
<div class='{{ get_component_class( 'features', display ) }}'>
{% if heading %}
{% include get_template( 'heading', 'unit' ) with heading %}
{% endif %}
{% if lead %}
{% include get_template( 'lead', 'unit' ) with lead %}
{% endif %}
<ul class='c-features__items {{ list_class }}'>
{% for item in items %}
<li class='c-features__items__item'>
{% if item.icon %}
{% include get_template( 'icon', 'unit' ) with item.icon %}
{% elseif item.logo %}
{% include get_template( 'logo', 'unit' ) with item.logo %}
{% endif %}
<div class='c-features__items__item__content'>
{% include get_template( 'heading', 'unit' ) with {
display: heading_display,
text: item.title
} %}
{% include get_template( 'lead', 'unit' ) with {
content: item.description
} %}
{% if item.link %}
<p class='c-features__items__item__content__action'>
{% include get_template( 'link', 'base' ) with item.link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
</p>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
{
"heading": {
"text": "Here's the reasons"
},
"lead": {
"content": "<p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
},
"items": [
{
"icon": {
"basename": "noun_Communication_1435998.svg"
},
"title": "Feature",
"description": "<p>Features are a group of VPs, USPs, or grouped types of information. 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"
}
},
{
"icon": {
"basename": "noun_Skyscraper_1183864.svg"
},
"title": "Feature",
"description": "<p>Features are a group of VPs, USPs, or grouped types of information. 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"
}
},
{
"icon": {
"basename": "noun_Friendly Chat_1436000.svg"
},
"title": "Feature",
"description": "<p>Features are a group of VPs, USPs, or grouped types of information. 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"
}
},
{
"icon": {
"basename": "noun_Friendly Chat_1436000.svg"
},
"title": "Feature",
"description": "<p>Features are a group of VPs, USPs, or grouped types of information. 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"
}
}
],
"display": {
"modifiers": []
}
}