<div class="testimonial">
<article class="card card--full-bleed-media" aria-labelledby="card-0-sub-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>
</header>
<div class="card-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua.</p>
<footer>
- <cite>Kåre Albrechtsen</cite>
</footer>
</blockquote>
</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": null,
"testimonialSubheading": "City commute",
"testimonialBody": "\n\t\t\t\t\t<blockquote>\n\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua.</p>\n\t\t\t\t\t\t<footer>\n\t\t\t\t\t\t\t- <cite>Kåre Albrechtsen</cite>\n\t\t\t\t\t\t</footer>\n\t\t\t\t\t</blockquote>\n\t\t\t\t",
"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"
}
}