<section>
<div class="o-retain o-retain--default o-retain--no-padding">
<div class="t-themed-section">
<div class="c-last-cta">
<div class="c-last-cta__visual">
<picture>
<img class="c-img lazyload " srcset="https://via.placeholder.com/750x422 750w, https://via.placeholder.com/1280x720 1280w, https://via.placeholder.com/1920x1080 1920w, " src="https://via.placeholder.com/750x422" alt="" sizes="auto" width="1920" height="1080">
</picture>
</div>
<div class="c-last-cta__content t-color--light">
<div class="o-layer o-layer--huge">
<div class="o-retain o-retain--inset">
<div class="o-layout o-layout--gap-inline-base">
<div class="u-colspan-4@desk">
<div class="o-flow">
<h2 class="u-h1">Interesse in deze opleiding?</h2>
<ul class="o-list-clean">
<li>
<a href="#" class="c-button c-button--contrast c-button--has-icon c-button--full-width">
<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>
</li>
<li>
<a href="#" class="c-button c-button--has-icon c-button--full-width">
<span class="c-button__inner">
<span class="c-button__label " data-module-bind="btn-label">
Inschrijven
</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>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="o-retain o-retain--default o-retain--no-padding">
<div class="t-themed-section">
<div class="c-last-cta">
<div class="c-last-cta__visual">
{{ render '@atoms-image' visual }}
</div>
<div class="c-last-cta__content t-color--light">
<div class="o-layer o-layer--huge">
<div class="o-retain o-retain--inset">
<div class="o-layout o-layout--gap-inline-base">
<div class="u-colspan-4@desk">
<div class="o-flow">
<h2 class="u-h1">Interesse in deze opleiding?</h2>
<ul class="o-list-clean">
<li>
{{ render '@atoms-button' cta1 }}
</li>
<li>
{{ render '@atoms-button' cta2 }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{
"cta1": {
"element": "a",
"href": "#",
"label": "Kom sfeer proeven",
"modifier": "contrast",
"isFullWidth": true,
"icon": "arrow-right"
},
"cta2": {
"element": "a",
"href": "#",
"label": "Inschrijven",
"isFullWidth": true,
"icon": "arrow-right"
},
"visual": {
"alt": "",
"src": "https://via.placeholder.com/750x422",
"lazy": false,
"width": 1920,
"height": 1080,
"srcset": [
{
"src": "https://via.placeholder.com/750x422",
"width": 750
},
{
"src": "https://via.placeholder.com/1280x720",
"width": 1280
},
{
"src": "https://via.placeholder.com/1920x1080",
"width": 1920
}
]
}
}
/* =========================================================================
Components.Last-CTA
========================================================================= */
/* Block
========================================================================= */
.c-last-cta {
display: grid;
> * {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
}
No notes defined.