<div class="car-teaser-grid js-car-teaser-grid">
<div class="car-teaser-grid-inner">
<div class="filter">
<div class="filter-inner">
<form method="get" action="" id="car-teaser-grid-filter" class="js-filter" name="filter">
<div class="form-block form-block--radios form-block--type">
<fieldset>
<legend>Car type</legend>
<div class="form-group">
<div class="form-input form-input--radio">
<input id="type-1" value="" name="type" type="radio" checked>
<label for="type-1">
<span>All</span>
</label>
</div>
<div class="form-input form-input--radio">
<input id="type-2" value="electric" name="type" type="radio">
<label for="type-2">
<span>Electric</span>
</label>
</div>
<div class="form-input form-input--radio">
<input id="type-3" value="hybrid" name="type" type="radio">
<label for="type-3">
<span>Hybrid</span>
</label>
</div>
<div class="form-input form-input--radio">
<input id="type-4" value="plugin hybrid" name="type" type="radio">
<label for="type-4">
<span>Plugin Hybrid</span>
</label>
</div>
</div>
</fieldset>
</div>
<div class="form-block form-block--range form-block--range">
<div class="form-input form-input--range">
<label for="range">Min. range on electricity</label>
<div class="form-group">
<div role="slider" aria-valuenow="50" aria-valuemin="50" aria-valuemax="300">
<input id="range" name="range" type="range" step="10" value="50" min="50" max="300">
</div>
</div>
</div>
</div>
<div class="form-block form-block--button">
<button class="form-button btn" type="submit">
<span class="text">Filter</span>
</button>
</div>
</form>
<div class="link-dropdown js-link-dropdown" data-selected-index="0">
<h4 class="heading heading--label link-dropdown-label">Choose car brand</h4>
<ul class="link-dropdown-list">
<li class="link-dropdown-list-item">
<a href="#">All</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Audi</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Hyundai</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Jaguar</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Kia</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Land Rover</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Mercedes</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Mini</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Mitsubishi</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Nissan</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Peugeot</a>
</li>
<li class="link-dropdown-list-item">
<a href="#">Renault</a>
</li>
</ul>
</div>
<div class="filter-results">
<strong>Result</strong>
<span data-results-strings="car,cars">8 cars</span>
</div>
</div>
</div>
<ul class="car-teasers" data-empty-message="No results found.">
<li class="car-teasers-item" data-car-id="0" data-car-meta='{"brand":"Volvo","type":"electric","range":300,"seats":5,"leasing":true}'>
<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>
</li>
<li class="car-teasers-item" data-car-id="1" data-car-meta='{"brand":"BMW","type":"electric","range":150,"seats":4,"leasing":true}'>
<article class="teaser">
<header class="teaser-header">
<h3 class="heading heading--small teaser-heading"><a href="#">BMW i3</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-2.jpg","alt":"","srcset":"/temp/car-teaser-2.jpg 1x,/temp/car-teaser-2@2x.jpg 2x"}'></span>
<noscript><img src="/temp/car-teaser-2.jpg" alt="" srcset="/temp/car-teaser-2.jpg 1x,/temp/car-teaser-2@2x.jpg 2x"></noscript>
</div>
</div>
<div class="teaser-body">
<ul>
<li>Electric</li>
<li>Up to 150 km on electricity</li>
<li>Up to 4 seats</li>
<li>Available for leasing</li>
</ul>
</div>
<div class="teaser-cta">
<span class="text">More info</span>
</div>
</article>
</li>
<li class="car-teasers-item" data-car-id="2" data-car-meta='{"brand":"KIA","type":"electric","range":200,"seats":8,"leasing":false}'>
<article class="teaser">
<header class="teaser-header">
<h3 class="heading heading--small teaser-heading"><a href="#">KIA Niro</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-3.jpg","alt":"","srcset":"/temp/car-teaser-3.jpg 1x,/temp/car-teaser-3@2x.jpg 2x"}'></span>
<noscript><img src="/temp/car-teaser-3.jpg" alt="" srcset="/temp/car-teaser-3.jpg 1x,/temp/car-teaser-3@2x.jpg 2x"></noscript>
</div>
</div>
<div class="teaser-body">
<ul>
<li>Electric</li>
<li>Up to 200 km on electricity</li>
<li>Up to 8 seats</li>
</ul>
</div>
<div class="teaser-cta">
<span class="text">More info</span>
</div>
</article>
</li>
<li class="car-teasers-item" data-car-id="3" data-car-meta='{"brand":"BMW","type":"electric","range":250,"seats":2,"leasing":true}'>
<article class="teaser">
<header class="teaser-header">
<h3 class="heading heading--small teaser-heading"><a href="#">BMW i8</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-4.jpg","alt":"","srcset":"/temp/car-teaser-4.jpg 1x,/temp/car-teaser-4@2x.jpg 2x"}'></span>
<noscript><img src="/temp/car-teaser-4.jpg" alt="" srcset="/temp/car-teaser-4.jpg 1x,/temp/car-teaser-4@2x.jpg 2x"></noscript>
</div>
</div>
<div class="teaser-body">
<ul>
<li>Electric</li>
<li>Up to 250 km on electricity</li>
<li>Up to 2 seats</li>
<li>Available for leasing</li>
</ul>
</div>
<div class="teaser-cta">
<span class="text">More info</span>
</div>
</article>
</li>
<li class="car-teasers-item" data-car-id="4">
<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>
</li>
</ul>
</div>
</div>
<div class="car-teaser-grid{% if carTeaserGridModifiers is defined and carTeaserGridModifiers|length %} car-teaser-grid--{{ carTeaserGridModifiers|join(' car-teaser-grid--') }}{% endif %} js-car-teaser-grid">
<div class="car-teaser-grid-inner">
{% embed '@filter' with carTeaserFilter|merge({ id: 'car-teaser-grid-filter' }) %}
{% block childComponents %}
{% include '@link-dropdown' with carTeaserLinkDropdown %}
<div class="filter-results">
<strong>Result</strong>
<span data-results-strings="{{ carTeaserFilterResultsStrings|join(',') }}">{{ filterTotalResults }} {{ filterTotalResults > 1 ? carTeaserFilterResultsStrings[1] : carTeaserFilterResultsStrings[0] }}</span>
</div>
{% endblock %}
{% endembed %}
<ul class="car-teasers" data-empty-message="{{ carTeaserFilterEmptyMessage }}">
{% for teaser in carTeasers %}
<li class="car-teasers-item" data-car-id="{{ loop.index0 }}"{% if teaser.teaserCarProperties %} data-car-meta='{{ teaser.teaserCarProperties|json_encode }}'{% endif %}>{% include '@teaser' with teaser %}</li>
{% endfor %}
</ul>
</div>
</div>
{
"carTeaserGridModifiers": [],
"carTeaserFilter": {
"filterAction": null,
"filterMethod": null,
"filterFormBlocks": [
{
"type": "form-block-radios",
"content": {
"formBlockLegend": "Car type",
"formBlockName": "type",
"formBlockOptions": [
{
"value": "",
"label": "All",
"checked": true
},
{
"value": "electric",
"label": "Electric"
},
{
"value": "hybrid",
"label": "Hybrid"
},
{
"value": "plugin hybrid",
"label": "Plugin Hybrid"
}
]
}
},
{
"type": "form-block-range",
"content": {
"formBlockLabel": "Min. range on electricity",
"formBlockName": "range",
"formBlockRangeSettings": {
"min": "50",
"max": "300",
"step": "10"
}
}
}
],
"filterTotalResults": 8
},
"carTeaserLinkDropdown": {
"label": "Choose car brand",
"selectedIndex": "0",
"links": [
{
"href": "#",
"text": "All"
},
{
"href": "#",
"text": "Audi"
},
{
"href": "#",
"text": "Hyundai"
},
{
"href": "#",
"text": "Jaguar"
},
{
"href": "#",
"text": "Kia"
},
{
"href": "#",
"text": "Land Rover"
},
{
"href": "#",
"text": "Mercedes"
},
{
"href": "#",
"text": "Mini"
},
{
"href": "#",
"text": "Mitsubishi"
},
{
"href": "#",
"text": "Nissan"
},
{
"href": "#",
"text": "Peugeot"
},
{
"href": "#",
"text": "Renault"
}
]
},
"carTeaserFilterEmptyMessage": "No results found.",
"carTeaserFilterResultsStrings": [
"car",
"cars"
],
"carTeasers": [
{
"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
}
},
{
"teaserImage": {
"url": "/temp/car-teaser-2.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/car-teaser-2.jpg"
},
{
"url": "/temp/car-teaser-2@2x.jpg"
}
]
},
"teaserHeading": "BMW i3",
"teaserCarProperties": {
"brand": "BMW",
"type": "electric",
"range": 150,
"seats": 4,
"leasing": true
},
"teaserUrl": "#",
"teaserCtaLabel": "More info"
},
{
"teaserImage": {
"url": "/temp/car-teaser-3.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/car-teaser-3.jpg"
},
{
"url": "/temp/car-teaser-3@2x.jpg"
}
]
},
"teaserHeading": "KIA Niro",
"teaserCarProperties": {
"brand": "KIA",
"type": "electric",
"range": 200,
"seats": 8,
"leasing": false
},
"teaserUrl": "#",
"teaserCtaLabel": "More info"
},
{
"teaserImage": {
"url": "/temp/car-teaser-4.jpg",
"width": 318,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/car-teaser-4.jpg"
},
{
"url": "/temp/car-teaser-4@2x.jpg"
}
]
},
"teaserHeading": "BMW i8",
"teaserCarProperties": {
"brand": "BMW",
"type": "electric",
"range": 250,
"seats": 2,
"leasing": true
},
"teaserUrl": "#",
"teaserCtaLabel": "More info"
},
{
"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"
}
]
}
Purpose: Lets the user filter the results in the grid. Option sets should be defined by the data, eg the starting point on the range slider should be whatever is the lowest value in the data.
Required: Yes
Adjustments: Change wording from “Number of seats” to “Minimum number of seats” to ensure user understands they’re just selecting the minimum requirement
Purpose: Used to illustrate a specific car model.
Required: Yes
Recommendations: Image aspect ratio should be 1x1
Purpose: Used to indicate a specific car model. Correlates with the Product detail heading.
Required: Yes
Purpose: Reflect the main aspects of each car by reflecting the data defined options from the filter.
Required: Yes
Adjustments: Remove ‘Available for leasing’ if data not available