<section class="teaser-overview js-teaser-overview">
<div class="teaser-overview-inner">
<div class="teaser-overview-intro">
<header class="teaser-overview-header">
<h3 class="heading heading--category teaser-overview-subheading">The latest news</h3>
<h2 class="heading heading--secondary teaser-overview-heading">Stay updated with Clever</h2>
</header>
<div class="teaser-overview-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">View all</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>
<ul class="teaser-list">
<li class="teaser-list-item">
<article class="teaser">
<header class="teaser-header">
<div class="teaser-meta">
<small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
</div>
<h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
<div class="teaser-cta">
<span class="text">Read more</span>
</div>
</article>
</li>
<li class="teaser-list-item">
<article class="teaser">
<header class="teaser-header">
<div class="teaser-meta">
<small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
</div>
<h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
<div class="teaser-cta">
<span class="text">Read more</span>
</div>
</article>
</li>
<li class="teaser-list-item">
<article class="teaser">
<header class="teaser-header">
<div class="teaser-meta">
<small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
</div>
<h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
<div class="teaser-cta">
<span class="text">Read more</span>
</div>
</article>
</li>
<li class="teaser-list-item">
<article class="teaser">
<header class="teaser-header">
<div class="teaser-meta">
<small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
</div>
<h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
<div class="teaser-cta">
<span class="text">Read more</span>
</div>
</article>
</li>
<li class="teaser-list-item">
<article class="teaser">
<header class="teaser-header">
<div class="teaser-meta">
<small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
</div>
<h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
<div class="teaser-cta">
<span class="text">Read more</span>
</div>
</article>
</li>
<li class="teaser-list-item">
<article class="teaser">
<header class="teaser-header">
<div class="teaser-meta">
<small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
</div>
<h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
<div class="teaser-cta">
<span class="text">Read more</span>
</div>
</article>
</li>
</ul>
</div>
</section>
<section class="teaser-overview{% if teaserOverviewModifiers is defined and teaserOverviewModifiers|length %} teaser-overview--{{ teaserOverviewModifiers|join(' teaser-overview--') }}{% endif %} js-teaser-overview">
<div class="teaser-overview-inner">
<div class="teaser-overview-intro">
{% if teaserOverviewSubheading or teaserOverviewHeading %}
<header class="teaser-overview-header">
{% if teaserOverviewSubheading %}
<{{ subHeadingLevel|default('h3') }} class="heading heading--category teaser-overview-subheading">{{ teaserOverviewSubheading }}</{{ subHeadingLevel|default('h3') }}>
{% endif %}
{% if teaserOverviewHeading %}
<{{ headingLevel|default('h2') }} class="heading heading--secondary teaser-overview-heading">{{ teaserOverviewHeading }}</{{ headingLevel|default('h2') }}>
{% endif %}
</header>
{% endif %}
{% if teaserOverviewBody %}
<div class="teaser-overview-body">
{{ teaserOverviewBody }}
</div>
{% endif %}
{% if childComponents %}
<div class="child-components">
{% for component in childComponents %}
{% include '@' ~ component.type with component.content only %}
{% endfor %}
</div>
{% endif %}
</div>
{% include '@teaser-list' %}
</div>
</section>
{
"teaserOverviewHeading": "Stay updated with Clever",
"teaserOverviewSubheading": "The latest news",
"teaserOverviewBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
"teasers": [
{
"teaserModifiers": [],
"teaserImage": {
"url": "/temp/teaser-1.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/teaser-1.jpg"
},
{
"url": "/temp/teaser-1@2x.jpg"
}
],
"attributes": {
"data-object-fit": "cover",
"data-object-position": "center center"
}
},
"teaserContext": "Infrastruktur",
"teaserDate": "04/14/2017",
"teaserHeading": "See the entire Clever charging network",
"teaserUrl": "#"
},
{
"teaserModifiers": [],
"teaserImage": {
"url": "/temp/teaser-1.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/teaser-1.jpg"
},
{
"url": "/temp/teaser-1@2x.jpg"
}
],
"attributes": {
"data-object-fit": "cover",
"data-object-position": "center center"
}
},
"teaserContext": "Infrastruktur",
"teaserDate": "04/14/2017",
"teaserHeading": "See the entire Clever charging network",
"teaserUrl": "#"
},
{
"teaserModifiers": [],
"teaserImage": {
"url": "/temp/teaser-1.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/teaser-1.jpg"
},
{
"url": "/temp/teaser-1@2x.jpg"
}
],
"attributes": {
"data-object-fit": "cover",
"data-object-position": "center center"
}
},
"teaserContext": "Infrastruktur",
"teaserDate": "04/14/2017",
"teaserHeading": "See the entire Clever charging network",
"teaserUrl": "#"
},
{
"teaserModifiers": [],
"teaserImage": {
"url": "/temp/teaser-1.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/teaser-1.jpg"
},
{
"url": "/temp/teaser-1@2x.jpg"
}
],
"attributes": {
"data-object-fit": "cover",
"data-object-position": "center center"
}
},
"teaserContext": "Infrastruktur",
"teaserDate": "04/14/2017",
"teaserHeading": "See the entire Clever charging network",
"teaserUrl": "#"
},
{
"teaserModifiers": [],
"teaserImage": {
"url": "/temp/teaser-1.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/teaser-1.jpg"
},
{
"url": "/temp/teaser-1@2x.jpg"
}
],
"attributes": {
"data-object-fit": "cover",
"data-object-position": "center center"
}
},
"teaserContext": "Infrastruktur",
"teaserDate": "04/14/2017",
"teaserHeading": "See the entire Clever charging network",
"teaserUrl": "#"
},
{
"teaserModifiers": [],
"teaserImage": {
"url": "/temp/teaser-1.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/teaser-1.jpg"
},
{
"url": "/temp/teaser-1@2x.jpg"
}
],
"attributes": {
"data-object-fit": "cover",
"data-object-position": "center center"
}
},
"teaserContext": "Infrastruktur",
"teaserDate": "04/14/2017",
"teaserHeading": "See the entire Clever charging network",
"teaserUrl": "#"
}
],
"childComponents": [
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "View all"
}
}
]
}
No notes defined.