<article class="teaser teaser--decorated">
<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>
<{{ tagName|default('article') }} class="teaser{% if teaserModifiers is defined and teaserModifiers|length %} teaser--{{ teaserModifiers|join(' teaser--') }}{% endif %}">
<header class="teaser-header">
{% if teaserContext or teaserDate %}
<div class="teaser-meta">
{% if teaserContext %}<small class="teaser-context">{{ teaserContext }}</small>{% endif %}
{% if teaserDate %}<small class="teaser-date">{{ teaserDate }}</small>{% endif %}
</div>
{% endif %}
<{{ headingLevel|default('h3') }} class="heading heading--small teaser-heading"><a href="{{ teaserUrl }}">{{ teaserHeading }}</a></{{ headingLevel|default('h3') }}>
</header>
{% include '@image' with teaserImage only %}
{% if teaserBody or teaserCarProperties %}
<div class="teaser-body">
{{ teaserBody }}
{% if teaserCarProperties %}
<ul>
<li>{{ teaserCarProperties.type|capitalize }}</li>
<li>Up to {{ teaserCarProperties.range }} km on electricity</li>
<li>Up to {{ teaserCarProperties.seats }} seats</li>
{% if teaserCarProperties['leasing'] == true %}
<li>Available for leasing</li>
{% endif %}
</ul>
{% endif %}
</div>
{% endif %}
<div class="teaser-cta">
<span class="text">{{ teaserCtaLabel|default('Read more') }}</span>
{% if 'external' in teaserModifiers %}
{% include '@icon' with { source: 'icon-external-link.svg' } %}
{% endif %}
</div>
</{{ tagName|default('article') }}>
{
"teaserModifiers": [
"decorated"
],
"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": "#"
}
No notes defined.