<div class="teaser teaser--external teaser--decorated">
<header class="teaser-header">
<h3 class="heading heading--small teaser-heading"><a href="#">BMW i4</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-body">
<ul>
<li>Electric</li>
<li>Coming in 2020</li>
</ul>
</div>
<div class="teaser-cta">
<span class="text">Read more on bmw.dk</span>
<span class="icon icon-external-link">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
<path d="M17 11.3v-8l-8.3 8.3-1.4-1.4L15.5 2H7.7V0H19v11.3h-2zM8 6H2v11h11v-6h2v8H0V4h8v2z" />
</svg>
</span>
</span>
</div>
</div>
<{{ 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": [
"external",
"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": null,
"teaserDate": null,
"teaserHeading": "BMW i4",
"teaserUrl": "#",
"tagName": "div",
"teaserBody": "\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>Electric</li>\n\t\t\t\t\t\t<li>Coming in 2020</li>\n\t\t\t\t\t</ul>\n\t\t\t\t",
"teaserCtaLabel": "Read more on bmw.dk"
}
No notes defined.