<article class="teaser teaser--car">
<header class="teaser-header">
<h3 class="heading heading--small teaser-heading"><a href="#">Volvo XC90 T8 Twin Engine</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/car-teaser-1.jpg","alt":"","srcset":"/temp/car-teaser-1.jpg 1x,/temp/car-teaser-1@2x.jpg 2x","data-object-fit":"contain","data-object-position":"center center"}'></span>
<noscript><img src="/temp/car-teaser-1.jpg" alt="" srcset="/temp/car-teaser-1.jpg 1x,/temp/car-teaser-1@2x.jpg 2x" data-object-fit="contain" data-object-position="center center"></noscript>
</div>
</div>
<div class="teaser-body">
<ul>
<li>Electric</li>
<li>Up to 300 km on electricity</li>
<li>Up to 5 seats</li>
<li>Available for leasing</li>
</ul>
</div>
<div class="teaser-cta">
<span class="text">More info</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": [
"car"
],
"teaserImage": {
"url": "/temp/car-teaser-1.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/car-teaser-1.jpg"
},
{
"url": "/temp/car-teaser-1@2x.jpg"
}
],
"attributes": {
"data-object-fit": "contain",
"data-object-position": "center center"
}
},
"teaserContext": null,
"teaserDate": null,
"teaserHeading": "Volvo XC90 T8 Twin Engine",
"teaserUrl": "#",
"teaserCtaLabel": "More info",
"teaserCarProperties": {
"brand": "Volvo",
"type": "electric",
"range": 300,
"seats": 5,
"leasing": true
}
}
No notes defined.