<section>
<div class="o-layer o-layer--large">
<div class="o-flow">
<div class="o-retain o-retain--inset">
<h3>Locatie</h3>
</div>
<div>
<card-slider>
<div class="c-slider">
<div class="o-retain o-retain--default o-retain--inset">
<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>
<details-modal controls="dialog-location-1">
<dialog class="c-modal" id="dialog-location-1">
<header class="c-modal__header">
<div class="o-layout o-layout--fit o-layout--justify">
<h3>Den Bosch</h3>
<button type="button" class="o-button-clean" data-modal-close aria-controls="dialog-location-1">
<span class="u-visually-hidden">Sluiten</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-close" />
</svg>
</button>
</div>
</header>
<main class="c-modal__content">
<p>Some content about this location. 1</p>
</main>
</dialog>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<button type="button" class="o-button-clean o-clickable__element" aria-controls="dialog-location-1">
Den Bosch
</button>
</h3>
<p>Open dag:
<time datetime="2022-06-01">1 juni 2022</time>
<br>
Meelopen:
<time datetime="2022-06-2022">3 juni 2022</time>
</p>
<p>
<span 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">
Locatie
</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>
</span>
</p>
</div>
</div>
</details-modal>
</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>
<details-modal controls="dialog-location-2">
<dialog class="c-modal" id="dialog-location-2">
<header class="c-modal__header">
<div class="o-layout o-layout--fit o-layout--justify">
<h3>Venlo</h3>
<button type="button" class="o-button-clean" data-modal-close aria-controls="dialog-location-2">
<span class="u-visually-hidden">Sluiten</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-close" />
</svg>
</button>
</div>
</header>
<main class="c-modal__content">
<p>Some content about this location. 2</p>
</main>
</dialog>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<button type="button" class="o-button-clean o-clickable__element" aria-controls="dialog-location-2">
Venlo
</button>
</h3>
<p>Open dag:
<time datetime="2022-06-01">1 juni 2022</time>
<br>
Meelopen:
<time datetime="2022-06-2022">3 juni 2022</time>
</p>
<p>
<span 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">
Locatie
</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>
</span>
</p>
</div>
</div>
</details-modal>
</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--inset">
<h3>Locatie</h3>
</div>
{{ render '@molecules-card-slider--inset' cards merge=true }}
</div>
</div>
</section>
{
"cards": {
"items": [
{
"heading": "Den Bosch",
"isLocation": true,
"href": null,
"index": 1,
"hasModal": true
},
{
"heading": "Venlo",
"isLocation": true,
"href": null,
"index": 2,
"hasModal": true
}
]
}
}
No notes defined.