<article class="c-media-experience">
<div class="c-media-experience__image-container">
<picture>
<img class="c-img lazyload c-media-experience__image" data-srcset="https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=375&height=375&rnd=133032324600500000 375w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=767&height=767&rnd=133032324600500000 767w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1280&height=587&rnd=133032324600500000 1280w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1920&height=880&rnd=133032324600500000 1920w, " data-src="https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1920&height=880&rnd=133032324600500000" alt="" sizes="auto" width="1920" height="880">
</picture>
</div>
<div class="c-media-experience__content-box o-flow o-retain o-layer o-layer--large">
<h2 class="c-media-experience__heading">Korte alinea titel met afbeelding</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla odio velit, eu auctor sem dictum vel. Donec porttitor velit in pulvinar malesuada. Sed mattis interdum enim, vel cursus quam.</p>
<a class="c-button c-button--has-icon ">
<span class="c-button__inner">
<span class="c-button__label " data-module-bind="btn-label">
Kom sfeer proeven
</span>
<span class="c-button__wrap-icon">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
</svg>
</span>
</span>
</a>
</div>
</article>
<article class="c-media-experience">
<div class="c-media-experience__image-container">
{{ render '@atoms-image' image }}
</div>
<div class="c-media-experience__content-box o-flow o-retain o-layer o-layer--large">
<h2 class="c-media-experience__heading">{{heading}}</h2>
<p>{{content}}</p>
{{> '@atoms-button' label='Kom sfeer proeven' icon='arrow-right' element='a' }}
</div>
</article>
{
"image": {
"alt": "",
"src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1920&height=880&rnd=133032324600500000",
"lazy": true,
"width": 1920,
"height": 880,
"srcset": [
{
"src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=375&height=375&rnd=133032324600500000",
"width": 375,
"height": 375
},
{
"src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=767&height=767&rnd=133032324600500000",
"width": 767,
"height": 767
},
{
"src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1280&height=587&rnd=133032324600500000",
"width": 1280,
"height": 587
},
{
"src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1920&height=880&rnd=133032324600500000",
"width": 1920,
"height": 880
}
],
"class": "c-media-experience__image"
},
"heading": "Korte alinea titel met afbeelding",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla odio velit, eu auctor sem dictum vel. Donec porttitor velit in pulvinar malesuada. Sed mattis interdum enim, vel cursus quam."
}
/* =========================================================================
Components.Molecules.Media-experience
========================================================================= */
@use 'node_modules/@supple-kit/supple-css/tools/responsive';
/* Block
========================================================================= */
.c-media-experience {
display: grid;
grid-template-columns: 1fr repeat(12, minmax(0, 101px)) 1fr;
}
/* Elements
========================================================================= */
.c-media-experience__image-container {
grid-column: 1 / -1;
position: relative;
}
.c-media-experience__image-container::before {
content: '';
position: absolute;
inset: 0;
}
.c-media-experience__content-box {
background-color: var(--color-white);
}
/* Responsive
========================================================================= */
@include responsive.mq(until-lap) {
.c-media-experience {
background-color: var(--page-theme);
grid-template-rows: auto var(--space-huge) 1fr var(--space-large);
}
.c-media-experience__image-container {
grid-row: 1 / 3;
}
.c-media-experience__image-container::before {
background-image: linear-gradient(0deg, rgba(0 0 0 / 40%), rgba(0 0 0 / 0%));
}
.c-media-experience__content-box {
grid-column: 3 / 13;
grid-row: 2 / 4;
z-index: 1;
}
}
@include responsive.mq(lap) {
.c-media-experience {
position: relative;
}
.c-media-experience__image-container::before {
background-image: linear-gradient(90deg, rgba(0 0 0 / 40%), rgba(20 34 26 / 0%));
}
.c-media-experience__content-box {
grid-column: 3 / 8;
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
}
}
No notes defined.