<div class="testimonial">
<article class="card card--full-bleed-media card--reversed" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-media">
<div class="image image--decorated">
<div class="image-inner">
<span style="padding-bottom: 125%;" class="image-placeholder" data-img-attr='{"src":"/temp/testimonial.jpg","alt":"","srcset":"/temp/testimonial.jpg 1x,/temp/testimonial@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
<noscript><img src="/temp/testimonial.jpg" alt="" srcset="/temp/testimonial.jpg 1x,/temp/testimonial@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
</div>
</div>
</div>
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-0-sub-heading" class="heading heading--category card-subheading">City commute</h3>
<h2 id="card-0-heading" class="heading heading--secondary card-heading">It was a natural step for us moving out of the city, for our new commute</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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
<div class="child-components">
<dl>
<div>
<dt>Home type</dt>
<dd>Private house</dd>
</div>
<div>
<dt>Living area</dt>
<dd>Hvidovre, Copenhagen</dd>
</div>
<div>
<dt>Average commute</dt>
<dd>75 kvm</dd>
</div>
<div>
<dt>Charging solution</dt>
<dd>Clever All-in-One</dd>
</div>
</dl>
<a href="#" class="cta">
<span class="text">Read full story</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>
</article>
</div>
<div class="testimonial">
{% embed '@card' with {
cardModifiers: [
'full-bleed-media',
]|merge(testimonialModifiers|default([])),
cardMedia: testimonialMedia,
cardHeading: testimonialHeading,
cardSubheading: testimonialSubheading,
cardBody: testimonialBody,
} %}
{% block childComponents %}
{% if testimonialInfo %}
<dl>
{% for info in testimonialInfo %}
<div>
<dt>{{ info.term }}</dt>
<dd>{{ info.description }}</dd>
</div>
{% endfor %}
</dl>
{% endif %}
{% if testimonialCta %}
{% include '@call-to-action' with testimonialCta %}
{% endif %}
{% endblock %}
{% endembed %}
</div>
{
"cardId": "card-0",
"testimonialMedia": {
"type": "image",
"content": {
"url": "/temp/testimonial.jpg",
"width": 720,
"height": 900,
"lazyload": true,
"retina": true,
"sizes": [
{
"url": "/temp/testimonial.jpg"
},
{
"url": "/temp/testimonial@2x.jpg"
}
],
"classes": [
"image--decorated"
]
}
},
"testimonialHeading": "It was a natural step for us moving out of the city, for our new commute",
"testimonialSubheading": "City commute",
"testimonialBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>",
"testimonialInfo": [
{
"term": "Home type",
"description": "Private house"
},
{
"term": "Living area",
"description": "Hvidovre, Copenhagen"
},
{
"term": "Average commute",
"description": "75 kvm"
},
{
"term": "Charging solution",
"description": "Clever All-in-One"
}
],
"testimonialCta": {
"url": "#",
"text": "Read full story"
},
"testimonialModifiers": [
"reversed"
]
}