<div class="app-showcase js-app-showcase">
<div class="app-showcase-inner">
<div class="app-showcase-media">
<div class="mask"></div>
<div class="media">
<div class="media-item" data-heading="Start charging">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 216.42512077294685%;" class="image-placeholder" data-img-attr='{"src":"/temp/app-screenshot-3.jpg","alt":"","srcset":"/temp/app-screenshot-3.jpg 1x,/temp/app-screenshot-3@2x.jpg 2x"}'></span>
<noscript><img src="/temp/app-screenshot-3.jpg" alt="" srcset="/temp/app-screenshot-3.jpg 1x,/temp/app-screenshot-3@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="media-item" data-heading="Find your station">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 216.42512077294685%;" class="image-placeholder" data-img-attr='{"src":"/temp/app-screenshot-2.jpg","alt":"","srcset":"/temp/app-screenshot-2.jpg 1x,/temp/app-screenshot-2@2x.jpg 2x"}'></span>
<noscript><img src="/temp/app-screenshot-2.jpg" alt="" srcset="/temp/app-screenshot-2.jpg 1x,/temp/app-screenshot-2@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="media-item" data-heading="Choose your plug">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 216.34103019538188%;" class="image-placeholder" data-img-attr='{"src":"/temp/app-screenshot-1.jpg","alt":"","srcset":"/temp/app-screenshot-1.jpg 1x,/temp/app-screenshot-1@2x.jpg 2x"}'></span>
<noscript><img src="/temp/app-screenshot-1.jpg" alt="" srcset="/temp/app-screenshot-1.jpg 1x,/temp/app-screenshot-1@2x.jpg 2x"></noscript>
</div>
</div>
</div>
</div>
</div>
<div class="app-showcase-content">
<div class="app-showcase-content-inner">
<h2 class="heading heading--secondary app-showcase-heading">Charging has never been this easy</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<div class="app-showcase-links">
<a href="#" class="btn">
<span class="icon icon-app-ios">
<span class="svg-container"><svg viewBox="0 0 136.5 162" xmlns="http://www.w3.org/2000/svg">
<path d="m133.6 126.3c-2.4 5.7-5.4 10.9-8.7 15.7-4.6 6.5-8.3 11.1-11.2 13.6-4.5 4.1-9.3 6.2-14.4 6.4-3.7 0-8.1-1.1-13.3-3.2s-10-3.2-14.3-3.2c-4.6 0-9.5 1.1-14.7 3.2-5.3 2.1-9.5 3.2-12.7 3.4-4.9.2-9.8-2-14.7-6.5-3.1-2.7-7-7.4-11.7-14-5-7.1-9.2-15.3-12.4-24.7-3.8-10.3-5.5-20.1-5.5-29.6 0-10.9 2.3-20.2 7-28.1 3.7-6.3 8.6-11.3 14.8-14.9s12.8-5.5 19.9-5.6c3.9 0 9 1.2 15.4 3.6s10.4 3.6 12.2 3.6c1.3 0 5.9-1.4 13.6-4.2 7.3-2.6 13.4-3.7 18.4-3.3 13.6 1.1 23.9 6.5 30.7 16.2-12.2 7.4-18.2 17.7-18.1 31 .1 10.3 3.9 18.9 11.2 25.8 3.3 3.2 7.1 5.6 11.2 7.4-.7 2.5-1.7 5-2.7 7.4zm-31.3-123.1c0 8.1-3 15.7-8.9 22.7-7 8.3-15.7 13.1-25 12.4-.1-1-.2-2-.2-3.1 0-7.8 3.4-16.1 9.4-22.9 3-3.4 6.8-6.3 11.4-8.6s9-3.5 13.1-3.7c.2 1.1.2 2.2.2 3.2z" />
</svg>
</span>
</span>
<span class="text">iOS App</span>
</a>
<a href="#" class="btn">
<span class="icon icon-app-android">
<span class="svg-container"><svg viewBox="0 0 468 553" xmlns="http://www.w3.org/2000/svg">
<path d="m34.2 179.1c-9.5 0-17.6 3.3-24.3 10s-9.9 14.6-9.9 23.9v143c0 9.5 3.3 17.6 10 24.3 6.6 6.6 14.7 10 24.3 10 9.5 0 17.6-3.3 24.1-10 6.5-6.6 9.8-14.7 9.8-24.3v-143c0-9.3-3.3-17.3-10-23.9s-14.7-10-24-10z" />
<path d="m309.4 50.8 23.6-43.5c1.5-2.9 1-5.1-1.7-6.6-2.9-1.3-5.1-.7-6.6 2l-23.9 43.9c-21.1-9.3-43.3-14-66.8-14s-45.8 4.7-66.8 14l-23.9-43.9c-1.6-2.7-3.8-3.3-6.6-2-2.7 1.6-3.2 3.8-1.7 6.6l23.6 43.5c-23.9 12.2-43 29.2-57.2 51s-21.3 45.7-21.3 71.6h307.4c0-25.9-7.1-49.8-21.3-71.6-14.1-21.8-33.1-38.8-56.8-51zm-136.4 63.4c-2.6 2.6-5.6 3.8-9.1 3.8s-6.5-1.3-9-3.8c-2.4-2.5-3.7-5.6-3.7-9.1s1.2-6.6 3.7-9.1c2.4-2.5 5.4-3.8 9-3.8s6.6 1.3 9.1 3.8c2.5 2.6 3.8 5.6 3.8 9.1s-1.3 6.5-3.8 9.1zm140.1 0c-2.4 2.6-5.4 3.8-9 3.8s-6.6-1.3-9.1-3.8c-2.6-2.5-3.8-5.6-3.8-9.1s1.3-6.6 3.8-9.1 5.6-3.8 9.1-3.8 6.5 1.3 9 3.8c2.4 2.6 3.7 5.6 3.7 9.1-.1 3.5-1.3 6.5-3.7 9.1z" />
<path d="m81.4 406.8c0 10.2 3.5 18.8 10.6 25.9s15.7 10.6 25.9 10.6h24.6l.3 75.5c0 9.5 3.3 17.6 10 24.3s14.6 10 23.9 10c9.5 0 17.6-3.3 24.3-10 6.6-6.6 10-14.7 10-24.3v-75.4h45.9v75.4c0 9.5 3.3 17.6 10 24.3s14.7 10 24.3 10c9.5 0 17.6-3.3 24.3-10s10-14.7 10-24.3v-75.4h24.9c10 0 18.5-3.5 25.6-10.6s10.6-15.7 10.6-25.9v-221.5h-305.2z" />
<path d="m433.7 179.1c-9.3 0-17.3 3.3-23.9 9.8s-10 14.6-10 24.1v143c0 9.5 3.3 17.6 10 24.3s14.6 10 23.9 10c9.5 0 17.6-3.3 24.3-10s10-14.7 10-24.3v-143c0-9.5-3.3-17.6-10-24.1s-14.7-9.8-24.3-9.8z" />
</svg>
</span>
</span>
<span class="text">Android App</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="app-showcase js-app-showcase">
<div class="app-showcase-inner">
<div class="app-showcase-media">
<div class="mask"></div>
<div class="media">
{% for media in appShowcaseMedia|reverse %}
<div class="media-item" data-heading="{{ media.heading }}">
{% if media.type == 'video' %}
{% include '@video' with media.content only %}
{% else %}
{% include '@image' with media.content only %}
{% endif %}
</div>
{% endfor %}
</div>
</div>
<div class="app-showcase-content">
<div class="app-showcase-content-inner">
<h2 class="heading heading--secondary app-showcase-heading">{{ appShowcaseHeading }}</h2>
{{ appShowcaseBody }}
<div class="app-showcase-links">
{% for link in appShowcaseLinks %}
<a href="{{ link.url }}" class="btn">
{% if link['icon'] is defined %}
{% include '@icon' with { source: link.icon } %}
{% endif %}
<span class="text">{{ link.text }}</span>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{
"appShowcaseMedia": [
{
"type": "image",
"heading": "Choose your plug",
"content": {
"url": "/temp/app-screenshot-1.jpg",
"lazyload": true,
"retina": true,
"width": 563,
"height": 1218,
"sizes": [
{
"url": "/temp/app-screenshot-1.jpg"
},
{
"url": "/temp/app-screenshot-1@2x.jpg"
}
]
}
},
{
"type": "image",
"heading": "Find your station",
"content": {
"url": "/temp/app-screenshot-2.jpg",
"lazyload": true,
"retina": true,
"width": 414,
"height": 896,
"sizes": [
{
"url": "/temp/app-screenshot-2.jpg"
},
{
"url": "/temp/app-screenshot-2@2x.jpg"
}
]
}
},
{
"type": "image",
"heading": "Start charging",
"content": {
"url": "/temp/app-screenshot-3.jpg",
"lazyload": true,
"retina": true,
"width": 414,
"height": 896,
"sizes": [
{
"url": "/temp/app-screenshot-3.jpg"
},
{
"url": "/temp/app-screenshot-3@2x.jpg"
}
]
}
}
],
"appShowcaseHeading": "Charging has never been this easy",
"appShowcaseBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>",
"appShowcaseLinks": [
{
"text": "iOS App",
"url": "#",
"icon": "icon-app-ios.svg"
},
{
"text": "Android App",
"url": "#",
"icon": "icon-app-android.svg"
}
]
}
Purpose: Used to present the Clever app.
Purpose: Used to display the process of finding a charging station using the Clever app step by step. Can be images or a sequence of videos.
Required: Yes
Recommendations: Can either be images or a sequence of short same length videos. Image or video aspect ratio should be 9:19,5. They should clearly display the mobile screen during each of the three steps of finding a charging station using the Clever app. The number of images or videos should be the same as the number of the Data headings.
Purpose: Indicates specific steps of using the app.
Required: Yes
Recommendations: Keep max to about 20 characters (including spacing) for each item. The number of images or videos should be the same as the number of the Data headings.
Purpose: Used as the main headline to set context for the content below.
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to direct the user to the relevant page - in this case websites for the apple and android Clever apps.
Required: Yes
Purpose: Used to indicate a relevant page or action.
Required: Yes
Recommendations: Keep max to about 15-20 characters (including spaces)