<div class="content-blocks">
<section class="content-blocks-inner">
<div class="content-block">
<div class="content-block-media">
<div class="image medium-11 large-9">
<div class="image-inner">
<span style="padding-bottom: 135.78732106339467%;" class="image-placeholder" data-img-attr='{"src":"/temp/content-blocks-1.jpg","alt":"","srcset":"/temp/content-blocks-1.jpg 1x,/temp/content-blocks-1@2x.jpg 2x"}'></span>
<noscript><img src="/temp/content-blocks-1.jpg" alt="" srcset="/temp/content-blocks-1.jpg 1x,/temp/content-blocks-1@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="content-block-content">
<div class="content-block-content-inner">
<h2 class="heading heading--secondary">At home</h2>
<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 consequat</p>
</div>
</div>
</div>
<div class="content-block">
<div class="content-block-media">
<div class="image full-bleed">
<div class="image-inner">
<span style="padding-bottom: 112.99435028248588%;" class="image-placeholder" data-img-attr='{"src":"/temp/content-blocks-2.jpg","alt":"","srcset":"/temp/content-blocks-2.jpg 1x,/temp/content-blocks-2@2x.jpg 2x"}'></span>
<noscript><img src="/temp/content-blocks-2.jpg" alt="" srcset="/temp/content-blocks-2.jpg 1x,/temp/content-blocks-2@2x.jpg 2x"></noscript>
</div>
</div>
</div>
<div class="content-block-content">
<div class="content-block-content-inner">
<h2 class="heading heading--secondary">On the road</h2>
<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 consequat</p>
</div>
</div>
</div>
</section>
</div>
<div class="content-blocks">
<section class="content-blocks-inner">
{% for contentBlock in contentBlocks %}
<div class="content-block">
{% set columnSize = contentBlock.media.columnSize %}
{% if columnSize %}
{% set classes = [
'medium-' ~ min(columnSize + 2, 12),
'large-' ~ min(columnSize, 12),
] %}
{% else %}
{% set classes = ['full-bleed'] %}
{% endif %}
<div class="content-block-media">
{% include ('@' ~ contentBlock.media.type) with contentBlock.media.content|merge({
classes: classes,
}) %}
</div>
<div class="content-block-content">
<div class="content-block-content-inner">
<{{ headingLevel|default('h2') }} class="heading heading--secondary">{{ contentBlock.content.heading }}</{{ headingLevel|default('h2') }}>
{{ contentBlock.content.body }}
</div>
</div>
</div>
{% endfor %}
</section>
</div>
{
"contentBlocks": [
{
"media": {
"type": "image",
"columnSize": 9,
"content": {
"url": "/temp/content-blocks-1.jpg",
"width": 489,
"height": 664,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/content-blocks-1.jpg"
},
{
"url": "/temp/content-blocks-1@2x.jpg"
}
]
}
},
"content": {
"heading": "At home",
"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 consequat</p>"
}
},
{
"media": {
"type": "image",
"columnSize": null,
"content": {
"url": "/temp/content-blocks-2.jpg",
"width": 708,
"height": 800,
"retina": true,
"lazyload": true,
"sizes": [
{
"url": "/temp/content-blocks-2.jpg"
},
{
"url": "/temp/content-blocks-2@2x.jpg"
}
]
}
},
"content": {
"heading": "On the road",
"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 consequat</p>"
}
}
]
}
Purpose: Mainly used to communicate “At home” / “On the road” - but could also be used for other purposes
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: Yes
Purpose: Used to illustrate the content. Can also be videos.
Required: Yes
Recommendations: The 1st (tall) image or video aspect ratio should be close to 1x1,4; The 2nd (full-bleed) image or video aspect ratio should be close to 1:1,1