<section class="product-detail">
<div class="product-detail-content">
<div class="product-detail-intro">
<div class="product-detail-intro-inner">
<h1 class="heading heading--secondary product-detail-heading">KIA Niro</h1>
<div class="product-detail-lede lede">
<p>KIA Niro er den første serieproducerede elbil fra KIA. Bilen er rummelig, har et flot design samt mange praktiske og smarte funktioner.</p>
</div>
</div>
</div>
<div class="product-detail-components">
<div class="product-offer">
<div class="product-offer-inner">
<header class="product-offer-header">
<h2 class="heading heading--small product-offer-heading">Skræddersyet startpakke: Clever Unlimited + Network</h2>
</header>
<div class="product-offer-components">
<div class="product-options js-product-options">
<div class="product-options-inner">
<div class="option-toggles">
<button class="toggle js-toggle active ">
<div class="toggle-inner">
<h5 class="heading heading--context item-heading">Clever<br> Unlimited Network</h5>
<span class="item-subheading">Uden ladeboks</span>
</div>
</button>
<button class="toggle js-toggle ">
<div class="toggle-inner">
<h5 class="heading heading--context item-heading">Clever<br> Unlimited*</h5>
<span class="item-subheading">Med ladeboks</span>
</div>
</button>
</div>
<div class="option-content">
<div class="option-content-inner js-option-container">
<div class="item js-item active ">
<div class="item-details">
<div class="item-header">
<h5 class="heading heading--context item-heading">Clever<br> Unlimited Network</h5>
<span class="item-subheading">Uden ladeboks</span>
</div>
<span class="item-body js-body-container">
<span class="body js-body">
<p>Når du køber bilen fra ny, får du ubegrænset opladning og fuld power på køreglæden fra allerførste kilomtere. Med Clever Unlimited Network får du:</p>
</span>
</span>
<div class="checklist">
<h3 class="heading checklist-heading heading--context ">Clever Unlimited Network<br>indeholder:</h3>
<ul class="checklist-list">
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Ubegrænset opladning på hele Clevers ladenetværk</span>
</li>
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Ladebrik</span>
</li>
</ul>
</div>
</div>
<div class="item-specifications">
<span class="item-price">625</span><span class="suffix">kr/md</span>
<div class="item-price-specification">
</div>
<div class="item-price-specification">
<span>Mindstepris i 6 md. bindningsperiode</span>
<br><strong>3750kr.</strong>
</div>
<div class="item-disclaimer">
<span class="small-text">Abonnement udbydes af Clever A/S. 14 dages fortrydelsesret. Forudsætter BS-betaling. Læs mere: clever.dk/vilkaar.</span>
</div>
</div>
</div>
<div class="item js-item ">
<div class="item-details">
<div class="item-header">
<h5 class="heading heading--context item-heading">Clever<br> Unlimited*</h5>
<span class="item-subheading">Med ladeboks</span>
</div>
<span class="item-body js-body-container">
<span class="body js-body">
<p>Tilvælger du installation af Clevers ladeboks hjemme med Clever Unlimited, kan du vågne hver dag til et fuldt batteri og ny energi.</p>
</span>
</span>
<div class="checklist">
<h3 class="heading checklist-heading heading--context ">Clever Unlimited <br>indeholder:</h3>
<ul class="checklist-list">
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Installation af ladeboks hjemme</span>
</li>
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Ubegrænset opladning hjemme</span>
</li>
</ul>
</div>
</div>
<div class="item-specifications">
<span class="item-price">749</span><span class="suffix">kr/md</span>
<div class="item-price-specification">
<span>Installation af ladeboks</span>
<br><strong>7500kr.</strong>
</div>
<div class="item-price-specification">
<span>Mindstepris i 6 md. bindningsperiode</span>
<br><strong>11994kr.</strong>
</div>
<div class="item-disclaimer">
<span class="small-text">Abonnement udbydes af Clever A/S. 14 dages fortrydelsesret. Forudsætter BS-betaling. Læs mere: clever.dk/vilkaar. Installation af ladeboks: ekstraomk. kan forekomme, fx ved behov for grave- eller stilladsarbejde mv. Inkl. lån af ladeboks på privatadresse (DK). Hvert kvartal tilbagebetales et beløb for den mængde strøm, som er brugt til opladning v/ ladeboksen efter fastsat takst, se clever.dk/tilbagebetaling. </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="disclaimer-list">
<div class="disclaimer-list-inner">
<div class="disclaimer-list-content">
<div class="body-content">
<ul class="disclaimers">
<li>Clever Unlimited: Inkl. lån og installation (værdi 7.500 kr.) af ladeboks på privatadresse (DK), dog kan ekstraomk. forekomme, fx, ved behov for grave- eller stilladsarbejde mv. Hvert kvartal tilbagebetales et beløb før den mængde strøm, som er brugt til opladning v/ ladeboksen efter fastsat takst, se clever.dk/tilbagebetaling</li>
</ul>
</div>
</div>
</div>
</section>
<p class="small-text">Kontakt din bilforhandler for priser og startpakker for Clever Unlimited og Clever Unlimited Network.</p>
<a href="#" class="cta">
<span class="text">Læs mere på Kia.com</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 class="product-specifications">
<div class="product-specifications-inner">
<h2 class="heading heading--context product-specifications-heading">Specifications</h2>
<dl class="specifications">
<div class="specifications-inner">
<div class="specifications-item">
<dt class="specifications-term">EV type</dt>
<dd class="specifications-description">
Electric
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">Range on electricity</dt>
<dd class="specifications-description">
200 km
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">Electricity usage</dt>
<dd class="specifications-description">
14,3 kWh/100 km
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">Cable type</dt>
<dd class="specifications-description">
Type 2
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">Number of seats</dt>
<dd class="specifications-description">
5
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">Battery size</dt>
<dd class="specifications-description">
18,8 kWh
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">CO2-emissions</dt>
<dd class="specifications-description">
0 g/km
</dd>
</div>
<div class="specifications-item">
<dt class="specifications-term">Charging time</dt>
<dd class="specifications-description has-disclaimer">
From 45 min
<br><span class="disclaimer">* med Clever Twin</span>
</dd>
</div>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="product-detail-media">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 101.38888888888889%;" class="image-placeholder" data-img-attr='{"src":"/temp/product-image.jpg","alt":"","srcset":"/temp/product-image.jpg 1x,/temp/product-image@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/product-image.jpg" alt="" srcset="/temp/product-image.jpg 1x,/temp/product-image@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
</section>
<section class="product-detail">
<div class="product-detail-content">
<div class="product-detail-intro">
<div class="product-detail-intro-inner">
<{{ headingLevel|default('h1') }} class="heading heading--secondary product-detail-heading">{{ productDetailHeading }}</{{ headingLevel|default('h1') }}>
{% if productDetailLede %}
<div class="product-detail-lede lede">
{{ productDetailLede }}
</div>
{% endif %}
{{ productDetailBody }}
</div>
</div>
{% if childComponents %}
<div class="product-detail-components">
{% for component in childComponents %}
{% include '@' ~ component.type with component.content only %}
{% endfor %}
</div>
{% endif %}
</div>
{% if productDetailMedia %}
<div class="product-detail-media">
{% include productDetailMedia['type'] is defined and productDetailMedia['type'] == 'video' ? '@video' : '@image' with productDetailMedia|merge(
{ attributes: {
'data-object-fit': 'cover',
'data-object-position': 'center center',
} }
) %}
</div>
{% endif %}
</section>
{
"productDetailHeading": "KIA Niro",
"productDetailLede": "<p>KIA Niro er den første serieproducerede elbil fra KIA. Bilen er rummelig, har et flot design samt mange praktiske og smarte funktioner.</p>",
"productDetailMedia": {
"url": "/temp/product-image.jpg",
"width": 720,
"height": 730,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/product-image.jpg"
},
{
"url": "/temp/product-image@2x.jpg"
}
]
},
"childComponents": [
{
"type": "product-offer",
"content": {
"productOfferHeading": "Skræddersyet startpakke: Clever Unlimited + Network",
"childComponents": [
{
"type": "product-options",
"content": {
"productOptions": [
{
"productOptionHeading": "Clever<br> Unlimited Network",
"productOptionSubHeading": "Uden ladeboks",
"productOptionBody": "<p>Når du køber bilen fra ny, får du ubegrænset opladning og fuld power på køreglæden fra allerførste kilomtere. Med Clever Unlimited Network får du:</p>",
"productOptionPerksHeading": "Clever Unlimited Network<br>indeholder:",
"productOptionPerks": [
"Ubegrænset opladning på hele Clevers ladenetværk",
"Ladebrik"
],
"subscriptionPrice": 625,
"installationHeading": "",
"installationPrice": 0,
"disclaimer": "Abonnement udbydes af Clever A/S. 14 dages fortrydelsesret. Forudsætter BS-betaling. Læs mere: clever.dk/vilkaar."
},
{
"productOptionHeading": "Clever<br> Unlimited*",
"productOptionSubHeading": "Med ladeboks",
"productOptionBody": "<p>Tilvælger du installation af Clevers ladeboks hjemme med Clever Unlimited, kan du vågne hver dag til et fuldt batteri og ny energi.</p>",
"productOptionPerksHeading": "Clever Unlimited <br>indeholder:",
"productOptionPerks": [
"Installation af ladeboks hjemme",
"Ubegrænset opladning hjemme"
],
"subscriptionPrice": 749,
"installationHeading": "Installation af ladeboks",
"installationPrice": 7500,
"disclaimer": "Abonnement udbydes af Clever A/S. 14 dages fortrydelsesret. Forudsætter BS-betaling. Læs mere: clever.dk/vilkaar. Installation af ladeboks: ekstraomk. kan forekomme, fx ved behov for grave- eller stilladsarbejde mv. Inkl. lån af ladeboks på privatadresse (DK). Hvert kvartal tilbagebetales et beløb for den mængde strøm, som er brugt til opladning v/ ladeboksen efter fastsat takst, se clever.dk/tilbagebetaling. "
}
]
}
},
{
"type": "disclaimer-list",
"content": {
"disclaimers": [
"Clever Unlimited: Inkl. lån og installation (værdi 7.500 kr.) af ladeboks på privatadresse (DK), dog kan ekstraomk. forekomme, fx, ved behov for grave- eller stilladsarbejde mv. Hvert kvartal tilbagebetales et beløb før den mængde strøm, som er brugt til opladning v/ ladeboksen efter fastsat takst, se clever.dk/tilbagebetaling"
]
}
},
"<p class=\"small-text\">Kontakt din bilforhandler for priser og startpakker for Clever Unlimited og Clever Unlimited Network.</p>",
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "Læs mere på Kia.com"
}
}
]
}
},
{
"type": "product-specifications",
"content": {
"productSpecificationsHeading": "Specifications",
"productSpecificationsItems": [
{
"term": "EV type",
"description": "Electric"
},
{
"term": "Range on electricity",
"description": "200 km"
},
{
"term": "Electricity usage",
"description": "14,3 kWh/100 km"
},
{
"term": "Cable type",
"description": "Type 2"
},
{
"term": "Number of seats",
"description": "5"
},
{
"term": "Battery size",
"description": "18,8 kWh"
},
{
"term": "CO2-emissions",
"description": "0 g/km"
},
{
"term": "Charging time",
"description": "From 45 min",
"disclaimer": "med Clever Twin"
}
]
}
}
]
}
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 Car teaser heading.
Required: Yes
Purpose: Used to expand on the main headline.
Required: Yes
Recommendations: Keep max to about 250 characters (including spaces)
Required: Yes
Purpose: Used to indicate a specific Clever product.
Required: Yes
Recommendations: Should only contain the title of the Clever product.
Purpose: Used to list the benefits of a specific Clever product.
Required: Yes
Recommendations: Each point should be kept max to about 110 characters (including spaces)
Purpose: Used to indicate a specific Clever product option.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used to indicate a price for the specific Clever product option and the currency.
Required: Yes
Purpose: Used as a disclaimer - indicates that the user should contact the car dealership for further questions regarding the car, as well as request Clever upon purchase.
Required: Yes
Recommendations: Keep max to 70 characters (including spaces)
Purpose: Used to direct the user to the relevant page or action - in this case the relevant car dealership page.
Required: Yes
Recommendations: Keep max to about 25-30 characters (including spaces)
Purpose: Used to indicate the name of this element.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used to define the specific data displayed underneath it.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Data about the specific car.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)