<div class="charging-stations-teaser-scroll js-charging-stations-teaser-play">
<div class="video-container">
<div class="video-container-inner">
<div class="video">
<video playsinline muted>
<source src="/temp/DotMapReveal.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<article class="card card--centered card--mega-header" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-0-sub-heading" class="heading heading--category card-subheading">Clever charging stations</h3>
<h2 id="card-0-heading" class="heading heading--secondary card-heading">748</h2>
</header>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="child-components">
<a href="#" class="cta">
<span class="text">Find a charger</span>
<span class="icon icon-cta-arrow-right">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.5 15.1">
<path d="M49 0l-1.5 1.4 5.2 5.2H0v2h52.7l-5.2 5.1 1.5 1.4 7.5-7.5z" />
</svg></span>
</span>
</a>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="charging-stations-teaser-scroll js-charging-stations-teaser-play">
<div class="video-container">
<div class="video-container-inner">
{% include '@video' with video %}
</div>
</div>
{% include '@card' with chargingStationsTeaser %}
</div>
{
"video": {
"url": "/temp/DotMapReveal.mp4",
"type": "video",
"focalPoint": "center center",
"attributes": {
"playsinline": true,
"loop": false,
"muted": true,
"autoplay": false
}
},
"chargingStationsTeaser": {
"cardId": "card-0",
"cardModifiers": [
"centered",
"mega-header"
],
"cardHeading": "748",
"cardSubheading": "Clever charging stations",
"cardBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
"childComponents": [
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "Find a charger"
}
}
]
}
}
Purpose: Used to direct the user to the Clever Charging Network page.
Purpose: Acts as a supporting headline above.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the content below. In this case illustrates data either from the backend, or put in by the editor - the total amount of Clever charging stations.
Required: Yes
Purpose: Used to expand on the main headline.
Required: Yes