<div class="product-card product-card--full-width product-card--dynamic-height ">
<div class="product-card-inner">
<div class="product-card-media">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 89.71428571428571%;" class="image-placeholder" data-img-attr='{"src":"/temp/product-card.jpg","alt":"","srcset":"/temp/product-card.jpg 1x,/temp/product-card@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/product-card.jpg" alt="" srcset="/temp/product-card.jpg 1x,/temp/product-card@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
<div class="product-card-content">
<div class="product-card-content-inner">
<header class="product-card-header">
<h3 id="product-card-sub-heading" class="heading heading--category product-card-subheading">Fast pris & fri strøm</h3>
<h2 id="product-card-heading" class="heading heading--secondary product-card-heading">Abonnement</h2>
</header>
<div class="product-card-body">
<p>Lad på Danmarks stærkeste netværk og få en personlige ladeboks installeret hvis du har din egen private parkeringsplads.</p>
</div>
<div class="product-card-components">
<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</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>
<a href="#" class="cta">
<span class="text">Læs mere og bestil</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>
{% set productCardHeadingId = productCardId|default('product-card') ~ '-heading' %}
{% set productCardSubheadingId = productCardId|default('product-card') ~ '-sub-heading' %}
<div class="product-card{% if productCardModifiers is defined and productCardModifiers|length %} product-card--{{ productCardModifiers|join(' product-card--') }}{% endif %} {% if dynamicHeight is defined %} product-card--dynamic-height {% endif %}">
<div class="product-card-inner">
{% if productCardMedia %}
<div class="product-card-media">
{% include ('@' ~ productCardMedia.type) with productCardMedia.content|merge(
{ attributes: {
'data-object-fit': 'cover',
'data-object-position': 'center center',
} }
) only %}
</div>
{% endif %}
<div class="product-card-content">
<div class="product-card-content-inner">
{% if productCardHeading or productCardSubheading %}
<header class="product-card-header">
{% if productCardSubheading %}
<{{ subHeadingLevel|default('h3') }} id="{{productCardSubheadingId}}" class="heading heading--category product-card-subheading">{{ productCardSubheading }}</{{ subHeadingLevel|default('h3') }}>
{% endif %}
{% if productCardHeading %}
<{{ headingLevel|default('h2') }} id="{{productCardHeadingId}}" class="heading heading--secondary product-card-heading">{{ productCardHeading }}</{{ headingLevel|default('h2') }}>
{% endif %}
</header>
{% endif %}
{% if productCardBody %}
<div class="product-card-body">
{{ productCardBody }}
</div>
{% endif %}
{% set childComponentBlock = block('childComponents') %}
{% if childComponents or childComponentBlock|trim is not empty %}
<div class="product-card-components">
{% if childComponentBlock %}
{{ childComponentBlock|raw }}
{% endif %}
{% for component in childComponents %}
{% include '@' ~ component.type with component.content only %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{
"dynamicHeight": false,
"productCardModifiers": [
"full-width"
],
"productCardHeading": "Abonnement",
"productCardSubheading": "Fast pris & fri strøm",
"productCardBody": "<p>Lad på Danmarks stærkeste netværk og få en personlige ladeboks installeret hvis du har din egen private parkeringsplads.</p>",
"childComponents": [
{
"type": "specifications",
"content": {
"specifications": [
{
"term": "Elbil <span class=\"tooltip js-tooltip\">This is a description</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>"
}
]
}
},
{
"type": "call-to-action",
"content": {
"url": "#",
"text": "Læs mere og bestil"
}
}
],
"productCardMedia": {
"type": "image",
"content": {
"url": "/temp/product-card.jpg",
"width": 525,
"height": 471,
"lazyload": true,
"retina": true,
"sizes": [
{
"url": "/temp/product-card.jpg"
},
{
"url": "/temp/product-card@2x.jpg"
}
]
}
}
}