<div class="car-brand-overview">
<div class="car-brand-overview-inner">
<div class="car-brand-overview-column">
<div class="car-brand-overview-column-inner">
<h1 class="heading heading--main visuallyhidden">BMW x Clever</h1>
<div class="car-brand-overview-logo">
<div class="image" style="max-width: 57px;">
<div class="image-inner">
<span style="padding-bottom: 100%;" class="image-placeholder transparent"></span>
<img src="/temp/logo-bmw.png" alt="" srcset="/temp/logo-bmw.png 1x,/temp/logo-bmw@2x.png 2x">
</div>
</div>
<span class="icon icon-x-clever">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186.92 27.99">
<path d="M55.75 20.63c-1.86 1.8-4.38 2.91-7.17 2.91-5.7 0-10.31-4.62-10.31-10.31 0-5.7 4.62-10.31 10.31-10.31 2.73 0 5.21 1.06 7.06 2.8l2.01-2.09A13.091 13.091 0 0048.57 0c-7.3 0-13.22 5.92-13.22 13.22s5.92 13.22 13.22 13.22c3.58 0 6.82-1.42 9.2-3.73l-2.02-2.08zm75.32-12.39l-6.65 13.85-6.65-13.85h-3.15L124.41 28l9.79-19.76h-3.13zm12.42 8.93c0 5.43 3.92 9.28 9.67 9.28 4.38 0 6.83-1.93 7.63-2.77l-1.72-2.1c-.56.49-2.42 2.24-5.88 2.24-3.71 0-6.34-2.17-6.79-5.57h15.62c.04-.35.07-.67.07-1.09 0-5.36-3.82-9.28-9.28-9.28-5.43.01-9.32 3.93-9.32 9.29m2.94-1.3c.53-3.26 3.01-5.36 6.37-5.36 3.4 0 5.88 2.07 6.37 5.36h-12.74zm-59.8 1.3c0 5.43 3.92 9.28 9.67 9.28 4.38 0 6.83-1.93 7.63-2.77l-1.72-2.1c-.56.49-2.42 2.24-5.88 2.24-3.71 0-6.34-2.17-6.79-5.57h15.62c.04-.35.07-.67.07-1.09 0-5.36-3.82-9.28-9.28-9.28-5.43.01-9.32 3.93-9.32 9.29m2.94-1.3c.53-3.26 3.01-5.36 6.37-5.36 3.4 0 5.88 2.07 6.37 5.36H89.57zm97.35-7.7c-.64-.15-1.21-.28-2.28-.28-2.91 0-5.66 2.36-6.61 4.73V8.24h-2.87V26.1h2.87v-7.68c0-4.32 2.32-7.8 6.38-7.8.97 0 1.67.12 2.5.37V8.17zM73.47 26.1H70.6V.36h2.87V26.1zM0 7.602l1.415-1.414 7.07 7.071-1.414 1.414z" />
<path d="M12.726 6.187L14.14 7.6l-7.07 7.07-1.415-1.413z" />
<path d="M14.143 18.831l-1.414 1.414-7.071-7.07 1.414-1.415z" />
<path d="M1.415 20.247L.001 18.833l7.07-7.071 1.415 1.414z" />
</svg>
</span>
</span>
</div>
<div class="car-brand-overview-body">
<p>BMW har indgået et partnerskab med Clever, så alle vores kunder nu kan få Clever Unlimited med ubegrænset opladning hjemme, på arbejdet og på farten til en fast pris om måneden.</p>
</div>
<dl class="specifications">
<div class="specifications-inner">
<div class="specifications-item">
<dt class="specifications-term">Elbil <span class="tooltip js-tooltip">This is a description that is quite long y'know</span></dt>
<dd class="specifications-description">
<span>max</span> 699 <span>kr/md</span>
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">Plugin-hybrid <span class="tooltip js-tooltip">This is a description</span></dt>
<dd class="specifications-description">
<span>max</span> 399 <span>kr/md</span>
</dd>
</div>
</div>
</dl>
<p><small>De anførte abonnementspriser er for Clever Unlimited med hjemmeladeboks. Clever Unlimited uden hjemmeladeboks koster 399 kr/md for BMW elbiler og 199 kr/md for BMW plugin-hybrider.</small></p>
</div>
</div>
<div class="car-brand-overview-column">
<div class="car-brand-overview-components">
<article class="teaser teaser--wide teaser--decorated">
<header class="teaser-header">
<div class="teaser-meta">
<small class="teaser-context">Partner offers</small> <small class="teaser-date">01/14/2019</small>
</div>
<h3 class="heading heading--small teaser-heading"><a href="#">3 years of free electricity for your BMW3</a></h3>
</header>
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 48.18181818181818%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-wide.jpg","alt":"","srcset":"/temp/teaser-wide.jpg 1x,/temp/teaser-wide@2x.jpg 2x"}'></span>
<noscript><img src="/temp/teaser-wide.jpg" alt="" srcset="/temp/teaser-wide.jpg 1x,/temp/teaser-wide@2x.jpg 2x"></noscript>
</div>
</div>
<div class="teaser-cta">
<span class="text">Read more</span>
</div>
</article>
<a href="#newsletter-email" class="cta cta--decorated" data-smooth-anchor="">
<span class="text">Sign up to receive news about new cars and more</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>
</div>
</div>
<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}'>
<section 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>
</section>
</li>
<li class="car-teasers-item" data-car-id="1" data-car-meta='{"brand":"BMW","type":"electric","range":150,"seats":4,"leasing":true}'>
<section 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>
</section>
</li>
<li class="car-teasers-item" data-car-id="2" data-car-meta='{"brand":"KIA","type":"electric","range":200,"seats":8,"leasing":false}'>
<section 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>
</section>
</li>
<li class="car-teasers-item" data-car-id="3" data-car-meta='{"brand":"BMW","type":"electric","range":250,"seats":2,"leasing":true}'>
<section 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>
</section>
</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>
{% for module in pageModules %}
{% include '@' ~ module.type with module.content|merge({ tagName: 'section' }) only %}
{% endfor %}
{
"title": "Clever",
"siteHeader": {
"siteUrl": "../../components/preview/home.html",
"primaryNavigation": {
"primaryNavigationItems": [
{
"title": "Products",
"url": "../../components/preview/products.html"
},
{
"title": "How It Works",
"url": "#",
"selected": true
},
{
"title": "Car Guide",
"url": "../../components/preview/car-guide.html"
},
{
"title": "Customer Service",
"url": "#"
},
{
"title": "Webshop",
"url": "#"
}
],
"primaryNavigationModifiers": [
"selected"
]
}
},
"siteFooter": {
"newsletterSignup": {
"newsletterSignupSubheading": "Join the movement",
"newsletterSignupHeading": "EV's are here to stay",
"newsletterSignupAcceptPolicyText": "Accept af persondatapolitik ifm. nyhedsbreve. <a href=\"#\">Læs mere her</a>",
"newsletterSignupEndpoint": "https://clever-components.fallwinter.dk/.netlify/functions/server/mailchimp"
},
"siteDirectories": [
{
"title": "About Clever",
"url": null,
"children": [
{
"title": "Owners",
"url": "#"
},
{
"title": "Jobs",
"url": "#"
},
{
"title": "Partnerships",
"url": "#"
},
{
"title": "Press",
"url": "#"
},
{
"title": "Persondatapolitik",
"url": "#"
}
]
},
{
"title": "Erhverv",
"url": null,
"children": [
{
"title": "Mindre virksomhed",
"url": "#"
},
{
"title": "Større virksomhed",
"url": "#"
},
{
"title": "Kommune",
"url": "#"
},
{
"title": "Boligforening",
"url": "#"
},
{
"title": "Flådeadministratorer",
"url": "#"
}
]
},
{
"title": "Customer service",
"url": null,
"children": [
{
"title": "Go ladestil",
"url": "#"
},
{
"title": "Lost your card?",
"url": "#"
},
{
"title": "Driftstatus",
"url": "#"
},
{
"title": "Tilmeld betalingsservice",
"url": "#"
},
{
"title": "Local parkingrules",
"url": "#"
}
]
}
],
"socialLinks": [
{
"url": "#",
"icon": "icon-instagram.svg",
"text": "Instagram"
},
{
"url": "#",
"icon": "icon-facebook.svg",
"text": "Facebook"
},
{
"url": "#",
"icon": "icon-linkedin.svg",
"text": "LinkedIn"
}
],
"siteLocales": [
{
"url": "#",
"text": "Swe"
},
{
"url": "#",
"text": "No"
},
{
"url": "#",
"text": "Eng"
},
{
"url": "#",
"text": "Dk",
"active": true
}
]
},
"pageModules": [
{
"type": "car-brand-overview",
"content": {
"carBrandOverviewModifiers": [],
"carBrandOverviewLogo": {
"url": "/temp/logo-bmw.png",
"retina": true,
"width": 57,
"height": 57,
"sizes": [
{
"url": "/temp/logo-bmw.png"
},
{
"url": "/temp/logo-bmw@2x.png"
}
],
"transparent": true,
"contain": true
},
"carBrandOverviewBody": "<p>BMW har indgået et partnerskab med Clever, så alle vores kunder nu kan få Clever Unlimited med ubegrænset opladning hjemme, på arbejdet og på farten til en fast pris om måneden.</p>",
"carBrandOverviewPriceSpecifications": [
{
"term": "Elbil <span class=\"tooltip js-tooltip\">This is a description that is quite long y'know</span>",
"description": "<span>max</span> 699 <span>kr/md</span>"
},
{
"term": "Plugin-hybrid <span class=\"tooltip js-tooltip\">This is a description</span>",
"description": "<span>max</span> 399 <span>kr/md</span>"
}
],
"carBrandOverviewLegalese": "De anførte abonnementspriser er for Clever Unlimited med hjemmeladeboks. Clever Unlimited uden hjemmeladeboks koster 399 kr/md for BMW elbiler og 199 kr/md for BMW plugin-hybrider.",
"carBrandOverviewComponents": [
{
"type": "teaser",
"content": {
"teaserModifiers": [
"wide",
"decorated"
],
"teaserImage": {
"url": "/temp/teaser-wide.jpg",
"width": 660,
"height": 318,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/teaser-wide.jpg"
},
{
"url": "/temp/teaser-wide@2x.jpg"
}
]
},
"teaserContext": "Partner offers",
"teaserDate": "01/14/2019",
"teaserHeading": "3 years of free electricity for your BMW3",
"teaserUrl": "#"
}
},
{
"type": "call-to-action",
"content": {
"url": "#newsletter-email",
"text": "Sign up to receive news about new cars and more",
"classes": [
"cta--decorated"
],
"attributes": {
"data-smooth-anchor": null
}
}
}
]
}
},
{
"type": "car-teaser-grid",
"content": {
"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"
}
]
}
}
],
"pageModifiers": []
}
No notes defined.