<article class="card" aria-labelledby="card-0-heading">
<div class="card-inner">
<div class="card-media">
<div class="video-embed js-video-embed">
<a href="https://youtu.be/r3-Y31ONZuI" class="video-embed-btn" target="_blank">
<span class="icon icon-toggle-video">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.3 56">
<path d="M2 56c-.6 0-1.3-.3-1.6-.9-.3-.3-.4-.7-.4-1.1V2C0 .9.9 0 2 0c.4 0 .8.1 1.1.4l37.3 26c.9.6 1.1 1.9.5 2.8-.1.2-.3.4-.5.5l-37.3 26c-.3.2-.7.3-1.1.3zM2 2v52l37.3-26L2 2z" />
</svg>
</span>
</span>
</a>
<div class="video-embed-poster">
<picture class="image">
<div class="image-inner">
<span style="padding-bottom: 105.29850746268656%;" class="image-placeholder"></span>
<img src="/temp/card-image-example.jpg" alt="">
</div>
<figcaption class="image-caption">This is an image caption.</figcaption>
</picture>
</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">Lorem ipsum dolor sit amet</h3>
<h2 id="card-0-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>
</article>
{% set cardHeadingId = cardId|default('card') ~ '-heading' %}
{% set cardSubheadingId = cardId|default('card') ~ '-sub-heading' %}
<{{ tagName|default('article') }} class="card{% if cardModifiers is defined and cardModifiers|length %} card--{{ cardModifiers|join(' card--') }}{% endif %}" aria-labelledby="{{ cardHeading ? cardHeadingId : cardSubheadingId}}">
<div class="card-inner">
{% if cardMedia %}
<div class="card-media">
{% include ('@' ~ cardMedia.type) with cardMedia.content|merge(
{ attributes: {
'data-object-fit': 'cover',
'data-object-position': 'center center',
} }
) only %}
</div>
{% endif %}
{% if cardComponents %}
<div class="card-components">
{% for component in cardComponents %}
{% include '@' ~ component.type with component.content only %}
{% endfor %}
</div>
{% endif %}
<div class="card-content">
<div class="card-content-inner">
{% if cardHeading or cardSubheading %}
<header class="card-header">
{% if cardSubheading %}
<{{ subHeadingLevel|default('h3') }} id="{{cardSubheadingId}}" class="heading heading--category card-subheading">{{ cardSubheading }}</{{ subHeadingLevel|default('h3') }}>
{% endif %}
{% if cardHeading %}
<{{ headingLevel|default('h2') }} id="{{cardHeadingId}}" class="heading heading--secondary card-heading">{{ cardHeading }}</{{ headingLevel|default('h2') }}>
{% endif %}
</header>
{% endif %}
{% if cardBody %}
<div class="card-body">
{{ cardBody }}
</div>
{% endif %}
{% set childComponentBlock = block('childComponents') %}
{% if childComponents or childComponentBlock|trim is not empty %}
<div class="child-components">
{% if childComponentBlock %}
{{ childComponentBlock|raw }}
{% endif %}
{% for component in childComponents %}
{% include '@' ~ component.type with component.content only %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% if cardGallery %}
<aside class="card-aside">
{% for col in cardGallery %}
<div class="card-aside-column">
{% for block in col %}
{% include ('@' ~ block.type) with block.content|merge({
classes: [
'small-' ~ min(block.columnSize + 4, 12),
'medium-' ~ min(block.columnSize + 2, 12),
'large-' ~ min(block.columnSize, 12),
],
}) only %}
{% endfor %}
</div>
{% endfor %}
</aside>
{% endif %}
</div>
</{{ tagName|default('article') }}>
{
"cardId": "card-0",
"cardMedia": {
"type": "video-embed",
"content": {
"poster": {
"url": "/temp/card-image-example.jpg",
"width": 1340,
"height": 1411,
"caption": "This is an image caption."
},
"url": "https://youtu.be/r3-Y31ONZuI",
"classes": []
}
},
"cardHeading": "Lorem ipsum dolor sit amet",
"cardSubheading": "Lorem ipsum dolor sit amet",
"cardBody": "<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>"
}
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: No
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: No
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: No
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the content below.
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: No
Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1
Purpose: Lets the user specify a specific car model and direct the user to the appropriate page in the webshop. Option sets in the dropdowns should be defined by the available car data.
Required: Yes
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: No
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a video.
Required: Yes
Recommendations: Image or video aspect ratio should be close to 1x1
Purpose: Used to describe the image/video.
Required: Yes
Recommendations: Keep max to about 120 characters (including spaces)
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: No
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1,25
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the content below. In this case it illustrates relevant data.
Required: Yes
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a videos.
Required: Yes
Recommendations: Big image or video aspect ration should be close to 1x1,1. Tall image or video aspect ratio should be close to 1x1,5. Horizontal image or video aspect ratio should be close to 1,5:1
Purpose: Acts as a supporting headline above.
Required: No
Recommendations: Keep max to about 30 characters (including spaces)
Purpose: Used as the main headline to set context for the copy underneath.
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to expand on the main headline.
Required: Yes
Purpose: Used to illustrate the content. Can also be a videos.
Required: Yes
Recommendations: Big image or video aspect ration should be close to 1x1,1. Tall image or video aspect ratio should be close to 1x1,5. Horizontal image or video aspect ratio should be close to 1,5:1