<section>
<div class="o-layer o-layer--large">
<div class="o-flow">
<div class="o-retain o-retain--default">
<div class="t-color--light">
<h3>Gerelateerde opleidingen</h3>
</div>
</div>
<div>
<card-slider>
<div class="c-slider">
<div class="o-retain o-retain--default ">
<div class="o-flow">
<div class="swiper c-slider__container" data-module-bind="slider">
<ul class="swiper-wrapper o-list-clean c-slider__wrapper">
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Applied geo-information science
</a>
</h3>
<div class="c-card__subheading">
<dl>
<div title="Type opleiding" class="c-card__meta-list-item">
<dt class="u-visually-hidden">Type opleiding</dt>
<dd>Hbo Bachelor</dd>
</div>
<div title="Locatie" class="c-card__meta-list-item">
<dt class="u-visually-hidden">Locatie</dt>
<dd>Den Bosch en Venlo</dd>
</div>
<div title="Duur" class="c-card__meta-list-item">
<dt class="u-visually-hidden">Duur</dt>
<dd>4 jaar</dd>
</div>
</dl>
</div>
<p>Jij maakt het straks mogelijk om ruimtelijke vraagstukken rondom actuele onderwerpen zoals verstedelijking, wateroverlast en biodiversiteit inzichtelijk te maken.</p>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Bedrijfskunde en agribusiness
</a>
</h3>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Bedrijfskunde en foodbusiness
</a>
</h3>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Food innovation
</a>
</h3>
</div>
</div>
</article>
</li>
</ul>
</div>
<div class="o-layout o-layout--gap-base o-layout--align-block-center t-color--light" hidden data-card-slider-controls>
<div class="o-layout__fill">
<progress data-slider-progress class="c-progress" max="1" value="0"></progress>
</div>
<div class="o-layout__fit">
<button type="button" class="o-button-clean c-slider__button-clean" data-button-prev>
<span class="u-visually-hidden">Vorige</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-arrow-left" />
</svg>
</button>
</div>
<div class="o-layout__fit">
<button type="button" class="o-button-clean c-slider__button-clean" data-button-next>
<span class="u-visually-hidden">Volgende</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</card-slider>
</div>
</div>
</div>
</section>
<section>
<div class="o-layer o-layer--large">
<div class="o-flow">
<div class="o-retain o-retain--default">
<div class="t-color--light">
<h3>Gerelateerde opleidingen</h3>
</div>
</div>
{{ render '@molecules-card-slider' cards }}
</div>
</div>
</section>
{
"cards": {
"items": [
{
"heading": "Applied geo-information science",
"courseMeta": {
"items": [
{
"dt": "Type opleiding",
"dd": "Hbo Bachelor"
},
{
"dt": "Locatie",
"dd": "Den Bosch en Venlo"
},
{
"dt": "Duur",
"dd": "4 jaar"
}
]
},
"intro": "Jij maakt het straks mogelijk om ruimtelijke vraagstukken rondom actuele onderwerpen zoals verstedelijking, wateroverlast en biodiversiteit inzichtelijk te maken."
},
{
"heading": "Bedrijfskunde en agribusiness"
},
{
"heading": "Bedrijfskunde en foodbusiness"
},
{
"heading": "Food innovation"
}
]
}
}
No notes defined.