<div class="section position-relative">
<div class="section__content position-absolute padding-x-sm">
<header>
<h2>
Id quam optio debitis consequatur iste cum.
</h2>
</header>
<p>Inventore et cupiditate quo voluptatem soluta recusandae nam doloribus error. Omnis facere quos. In placeat cupiditate repellat.</p>
<ul class="elementButtonList list--reset">
<li>
<a href="/" class="elementButton">
<span class="elementButton-title">Click me!</span>
</a>
</li>
</ul>
</div>
<picture>
<source media="(max-width: 19.9375rem)" srcset="https://picsum.photos/459/400">
<source media="(max-width: 28.6875rem)" srcset="https://picsum.photos/767/500">
<source media="(max-width: 47.9375rem)" srcset="https://picsum.photos/1023/550">
<img src="https://picsum.photos/1920/600" alt="" class="section__image" />
</picture>
</div>
<div class="section position-relative">
{{#if outsideGrid}}
<div class="row">
<div class="col-12">
<div class="section__content position-absolute">
{{> section-content}}
</div>
</div>
</div>
{{else}}
<div class="section__content position-absolute padding-x-sm">
{{> section-content}}
</div>
{{/if}}
<picture>
<source media="(max-width: {{breakpoint.sm}})"
srcset="https://picsum.photos/{{dimension.WidthSm}}/{{dimension.HeightSm}}">
<source media="(max-width: {{breakpoint.md}})"
srcset="https://picsum.photos/{{dimension.WidthMd}}/{{dimension.HeightMd}}">
<source media="(max-width: {{breakpoint.lg}})"
srcset="https://picsum.photos/{{dimension.WidthLg}}/{{dimension.HeightLg}}">
<img src="https://picsum.photos/{{dimension.WidthXl}}/{{dimension.HeightXl}}" alt="" class="section__image" />
</picture>
</div>
{{#*inline "section-content"}}
<header>
<h2>
{{title}}
</h2>
</header>
<p>{{text}}</p>
{{#>@button}}{{/@button}}
{{/inline}}
{
"title": "Id quam optio debitis consequatur iste cum.",
"text": "Inventore et cupiditate quo voluptatem soluta recusandae nam doloribus error. Omnis facere quos. In placeat cupiditate repellat.",
"breakpoint": {
"sm": "19.9375rem",
"md": "28.6875rem",
"lg": "47.9375rem"
},
"dimension": {
"WidthSm": 459,
"HeightSm": 400,
"WidthMd": 767,
"HeightMd": 500,
"WidthLg": 1023,
"HeightLg": 550,
"WidthXl": 1920,
"HeightXl": 600
},
"button": {
"text": "Click me!"
},
"outsideGrid": false
}
No notes defined.