<!-- make dynamic, almost the same as locations organism -->
<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>Studie in cijfers</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">
<div class="c-card__content c-card__content--number">
<div>
<div class="u-heading">
<span class="c-card__big-text u-h0">4.1</span><span class="c-card__small-text u-h2">/5</span>
</div>
<div class="c-card__subtext">
studenttevredenheid
</div>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme">
<div class="c-card__content c-card__content--number">
<div>
<div class="u-heading">
<span class="c-card__big-text u-h0">79%</span><span class="c-card__small-text u-h2"></span>
</div>
<div class="c-card__subtext">
stroomt door naar het tweede jaar
</div>
</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 class="o-retain o-retain--default">
<p>
<a type="button" href="#" class="c-button c-button--flat c-button--has-icon ">
<span class="c-button__inner">
<span class="c-button__label " data-module-bind="btn-label">
Download de factsheet
</span>
<span class="c-button__wrap-icon">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-download" />
</svg>
</span>
</span>
</a>
</p>
</div>
</div>
</div>
</section>
<!-- make dynamic, almost the same as locations organism -->
<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>Studie in cijfers</h3>
</div>
</div>
{{ render '@molecules-card-slider' cards }}
<div class="o-retain o-retain--default">
<p>
{{ render '@atoms-button--download' }}
</p>
</div>
</div>
</div>
</section>
{
"cards": {
"items": [
{
"isTypeNumber": true,
"bigText": "4.1",
"smallText": "/5",
"subText": "studenttevredenheid"
},
{
"isTypeNumber": true,
"bigText": "79%",
"subText": "stroomt door naar het tweede jaar"
}
]
}
}
No notes defined.