<section class="hero hero--no-media">
<div class="hero-content">
<div class="card" aria-labelledby="card-heading">
<div class="card-inner">
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-sub-heading" class="heading heading--category card-subheading">Lorem ipsum dolor sit amet</h3>
<h2 id="card-heading" class="heading heading--secondary card-heading">Lorem ipsum dolor sit amet</h2>
</header>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam.</p>
<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<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 – Car Guide",
"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": "hero",
"content": {
"heroModifiers": [
"no-media"
],
"heroSubheading": "Lorem ipsum dolor sit amet",
"heroHeading": "Lorem ipsum dolor sit amet",
"heroBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n\t\t<p>Ut enim ad minim veniam.</p>\n\t\t<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>"
}
},
{
"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.