<section>
<div class=" t-bg--gray-light ">
<div class="t-themed-section__subsection">
<div class="o-layer o-layer--large">
<tab-navigation>
<span hidden id="label-{uuid}">Types</span>
<div class="o-flow">
<div class="o-retain o-retain--default">
<div class="t-color--light">
<div class="o-flow">
<h3>#hasStories</h3>
<div class="c-tabs__tablist" role="tablist" aria-labelledby="label-{uuid}">
<button class="c-tabs__tab" role="tab" aria-selected="true" aria-controls="{uuid}-panel-0" id="{uuid}-tab-0" tabindex="0">
nieuws
</button>
<button class="c-tabs__tab" role="tab" aria-selected="false" aria-controls="{uuid}-panel-1" id="{uuid}-tab-1" tabindex="-1">
events
</button>
<button class="c-tabs__tab" role="tab" aria-selected="false" aria-controls="{uuid}-panel-2" id="{uuid}-tab-2" tabindex="-1">
publicaties
</button>
</div>
</div>
</div>
</div>
<div>
<div role="tabpanel" id="{uuid}-panel-0" tabindex="0" aria-labelledby="{uuid}-tab-0">
<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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
Meeloopdag Geo-information science 1 juni in Den Bosch
</a>
</h3>
<dl class="o-layout o-layout--gap-small o-layout--fit">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">Datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny">
<dt>
<span class="u-visually-hidden">Tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
</dd>
</div>
</dl>
</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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
HAS Hogeschool educatiepartner van Dutch Food Week 2022
</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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
Meeloopdag Geo-information science 1 juni in Den Bosch
</a>
</h3>
<dl class="o-layout o-layout--gap-small o-layout--fit">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">Datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny">
<dt>
<span class="u-visually-hidden">Tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
</dd>
</div>
</dl>
</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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
HAS Hogeschool educatiepartner van Dutch Food Week 2022
</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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
Meeloopdag Geo-information science 1 juni in Den Bosch
</a>
</h3>
<dl class="o-layout o-layout--gap-small o-layout--fit">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">Datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny">
<dt>
<span class="u-visually-hidden">Tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
</dd>
</div>
</dl>
</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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
HAS Hogeschool educatiepartner van Dutch Food Week 2022
</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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
Meeloopdag Geo-information science 1 juni in Den Bosch
</a>
</h3>
<dl class="o-layout o-layout--gap-small o-layout--fit">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">Datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny">
<dt>
<span class="u-visually-hidden">Tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
</dd>
</div>
</dl>
</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">
<span class="c-card__label">nieuws</span>
<h3 class="u-h4">
<a href="#">
HAS Hogeschool educatiepartner van Dutch Food Week 2022
</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 role="tabpanel" id="{uuid}-panel-1" tabindex="0" aria-labelledby="{uuid}-tab-1" hidden>
<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">
<span class="c-card__label">event</span>
<h3 class="u-h4">
<a href="#">
Kate en Ronald vroegen zich af of je zout uit de bodem kunt halen.
</a>
</h3>
<dl class="o-layout o-layout--gap-small o-layout--fit">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">Datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny">
<dt>
<span class="u-visually-hidden">Tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
</dd>
</div>
</dl>
</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">
<span class="c-card__label">event</span>
<h3 class="u-h4">
<a href="#">
Eind Event project HNT: Gas erop!
</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 role="tabpanel" id="{uuid}-panel-2" tabindex="0" aria-labelledby="{uuid}-tab-2" hidden>
<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">
<span class="c-card__label">publicatie</span>
<h3 class="u-h4">
<a href="#">
Onderzoeksprogramma's
</a>
</h3>
<dl class="o-layout o-layout--gap-small o-layout--fit">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--align-block-center">
<dt>
<span class="u-visually-hidden">Datum</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-calendar" />
</svg>
</dt>
<dd>
<time datetime="2022-06-01">1 juni 2022</time>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny">
<dt>
<span class="u-visually-hidden">Tijd</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-clock" />
</svg>
</dt>
<dd>
<time datetime="18:00">18:00</time>
</dd>
</div>
</dl>
</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">
<span class="c-card__label">publicatie</span>
<h3 class="u-h4">
<a href="#">
Expertises bij HAS Green Academy
</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>
<div class="o-retain o-retain--default">
<div class="t-color--light">
<p>
<a 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">
Toon alles
</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>
</p>
</div>
</div>
</div>
</tab-navigation>
</div>
</div>
</div>
</section>
<section>
<div class="{{# if cssclass }} {{cssclass}} {{/ if }}">
<div class="t-themed-section__subsection">
<div class="o-layer o-layer--large">
<tab-navigation>
<span hidden id="label-{uuid}">Types</span>
<div class="o-flow">
<div class="o-retain o-retain--default">
<div class="t-color--light">
<div class="o-flow">
<h3>#hasStories</h3>
<div class="c-tabs__tablist" role="tablist" aria-labelledby="label-{uuid}">
{{# each types }}
<button
class="c-tabs__tab"
role="tab"
aria-selected="{{# if @first }}true{{ else }}false{{/ if }}"
aria-controls="{uuid}-panel-{{ @index }}"
id="{uuid}-tab-{{ @index }}"
tabindex="{{# if @first }}0{{ else }}-1{{/if}}"
>
{{ label }}
</button>
{{/each}}
</div>
</div>
</div>
</div>
<div>
{{# each types }}
<div role="tabpanel" id="{uuid}-panel-{{ @index }}" tabindex="0" aria-labelledby="{uuid}-tab-{{ @index }}" {{# unless @first }}hidden{{/unless}}>
{{ render '@molecules-card-slider' cards }}
</div>
{{/each}}
</div>
<div class="o-retain o-retain--default">
<div class="t-color--light">
<p>
{{> '@atoms-button' element='a' label='Toon alles' href='#' icon='arrow-right' modifier='flat' }}
</p>
</div>
</div>
</div>
</tab-navigation>
</div>
</div>
</div>
</section>
{
"cssclass": "t-bg--gray-light",
"types": [
{
"label": "nieuws",
"cards": {
"items": [
{
"label": "nieuws",
"heading": "Meeloopdag Geo-information science 1 juni in Den Bosch",
"datetime": true
},
{
"label": "nieuws",
"heading": "HAS Hogeschool educatiepartner van Dutch Food Week 2022"
},
{
"label": "nieuws",
"heading": "Meeloopdag Geo-information science 1 juni in Den Bosch",
"datetime": true
},
{
"label": "nieuws",
"heading": "HAS Hogeschool educatiepartner van Dutch Food Week 2022"
},
{
"label": "nieuws",
"heading": "Meeloopdag Geo-information science 1 juni in Den Bosch",
"datetime": true
},
{
"label": "nieuws",
"heading": "HAS Hogeschool educatiepartner van Dutch Food Week 2022"
},
{
"label": "nieuws",
"heading": "Meeloopdag Geo-information science 1 juni in Den Bosch",
"datetime": true
},
{
"label": "nieuws",
"heading": "HAS Hogeschool educatiepartner van Dutch Food Week 2022"
}
]
}
},
{
"label": "events",
"cards": {
"items": [
{
"label": "event",
"heading": "Kate en Ronald vroegen zich af of je zout uit de bodem kunt halen.",
"datetime": true
},
{
"label": "event",
"heading": "Eind Event project HNT: Gas erop!"
}
]
}
},
{
"label": "publicaties",
"cards": {
"items": [
{
"label": "publicatie",
"heading": "Onderzoeksprogramma's",
"datetime": true
},
{
"label": "publicatie",
"heading": "Expertises bij HAS Green Academy"
}
]
}
}
]
}
No notes defined.