<div>
<tab-navigation>
<span hidden id="label-locations">Locaties</span>
<div class="o-flow">
<div class="t-color--light">
<div class="c-tabs__tablist" role="tablist" aria-labelledby="label-locations">
<button class="c-tabs__tab" role="tab" aria-selected="true" aria-controls="location-panel-1" id="location-tab-1" tabindex="0">
Den Bosch
</button>
<button class="c-tabs__tab" role="tab" aria-selected="false" aria-controls="location-panel-2" id="location-tab-2" tabindex="-1">Venlo
</button>
</div>
</div>
<div role="tabpanel" id="location-panel-1" tabindex="0" aria-labelledby="location-tab-1">
<div class="c-accordeon ">
<details class="c-accordeon__item">
<summary class="c-accordeon__summary">
<span class="o-layout o-layout--gap-tiny o-layout--fit o-layout--justify o-layout--nowrap">
<span>
<span class="u-heading u-h4">Accordeon item 1</span>
</span>
<span>
<span class="c-accordeon__plus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-plus" />
</svg>
</span>
<span class="c-accordeon__minus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-minus" />
</svg>
</span>
</span>
</span>
</summary>
<div class="c-accordeon__content">
<div class="o-flow">
<div class="o-layout o-layout--gap-base">
<div class="u-colspan-12 u-colspan-8@lap">
<div class="o-flow c-editor c-readable-text">
<h3 class="u-h5">Kennismaking en brede basis </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
<a class="c-button c-button--small c-button--has-icon ">
<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>
</div>
</div>
<div class="u-colspan-12 u-colspan-4@lap">
<picture>
<img class="c-img lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" width="600" height="400">
</picture>
</div>
</div>
<div class="o-flow c-editor c-readable-text">
<article class="o-flow c-summary-pricing c-readable-text">
<dl class="c-list-pricing">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Aanvangsdatum
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
9 juni 2022
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Duur
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
3 maanden
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Investering
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
€ 1.414,00
</div>
<div class="c-list-pricing__caption">
excl.btw*
</div>
</dd>
</div>
</dl>
<h4 class="u-h5">Prijsspecificaties</h4>
<dl class="c-list-pricing">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Aanvangsdatum
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
9 juni 2022
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Duur
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
3 maanden
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Investering
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
€ 1.414,00
</div>
<div class="c-list-pricing__caption">
excl.btw*
</div>
</dd>
</div>
</dl>
</article>
</div>
</div>
</div>
</details>
<details class="c-accordeon__item">
<summary class="c-accordeon__summary">
<span class="o-layout o-layout--gap-tiny o-layout--fit o-layout--justify o-layout--nowrap">
<span>
<span class="u-heading u-h4">Accordeon item 2</span>
</span>
<span>
<span class="c-accordeon__plus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-plus" />
</svg>
</span>
<span class="c-accordeon__minus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-minus" />
</svg>
</span>
</span>
</span>
</summary>
<div class="c-accordeon__content">
<div class="o-flow">
<div class="o-layout o-layout--gap-base">
<div class="u-colspan-12 u-colspan-8@lap">
<div class="o-flow c-editor c-readable-text">
<h3 class="u-h5">Kennismaking en brede basis </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
<a class="c-button c-button--small c-button--has-icon ">
<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>
</div>
</div>
<div class="u-colspan-12 u-colspan-4@lap">
<picture>
<img class="c-img lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" width="600" height="400">
</picture>
</div>
</div>
</div>
</div>
</details>
<details class="c-accordeon__item">
<summary class="c-accordeon__summary">
<span class="o-layout o-layout--gap-tiny o-layout--fit o-layout--justify o-layout--nowrap">
<span>
<span class="u-heading u-h4">Accordeon item 3</span>
</span>
<span>
<span class="c-accordeon__plus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-plus" />
</svg>
</span>
<span class="c-accordeon__minus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-minus" />
</svg>
</span>
</span>
</span>
</summary>
<div class="c-accordeon__content">
<div class="o-flow">
<div class="o-layout o-layout--gap-base">
<div class="u-colspan-12 u-colspan-8@lap">
<div class="o-flow c-editor c-readable-text">
<h3 class="u-h5">Kennismaking en brede basis </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
<a class="c-button c-button--small c-button--has-icon ">
<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>
</div>
</div>
<div class="u-colspan-12 u-colspan-4@lap">
<picture>
<img class="c-img lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" width="600" height="400">
</picture>
</div>
</div>
</div>
</div>
</details>
</div>
</div>
<div role="tabpanel" id="location-panel-2" tabindex="0" aria-labelledby="location-tab-2" hidden>
<h1>Content for the second panel</h1>
<div class="c-accordeon ">
<details class="c-accordeon__item">
<summary class="c-accordeon__summary">
<span class="o-layout o-layout--gap-tiny o-layout--fit o-layout--justify o-layout--nowrap">
<span>
<span class="u-heading u-h4">Accordeon item 1</span>
</span>
<span>
<span class="c-accordeon__plus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-plus" />
</svg>
</span>
<span class="c-accordeon__minus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-minus" />
</svg>
</span>
</span>
</span>
</summary>
<div class="c-accordeon__content">
<div class="o-flow">
<div class="o-layout o-layout--gap-base">
<div class="u-colspan-12 u-colspan-8@lap">
<div class="o-flow c-editor c-readable-text">
<h3 class="u-h5">Kennismaking en brede basis </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
<a class="c-button c-button--small c-button--has-icon ">
<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>
</div>
</div>
<div class="u-colspan-12 u-colspan-4@lap">
<picture>
<img class="c-img lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" width="600" height="400">
</picture>
</div>
</div>
<div class="o-flow c-editor c-readable-text">
<article class="o-flow c-summary-pricing c-readable-text">
<dl class="c-list-pricing">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Aanvangsdatum
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
9 juni 2022
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Duur
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
3 maanden
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Investering
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
€ 1.414,00
</div>
<div class="c-list-pricing__caption">
excl.btw*
</div>
</dd>
</div>
</dl>
<h4 class="u-h5">Prijsspecificaties</h4>
<dl class="c-list-pricing">
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Aanvangsdatum
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
9 juni 2022
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Duur
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
3 maanden
</div>
<div class="c-list-pricing__caption">
</div>
</dd>
</div>
<div class="o-layout o-layout--fit o-layout--gap-tiny o-layout--justify c-list-pricing__item">
<dt>
Investering
</dt>
<dd class="o-list-clean__item">
<div class="c-list-pricing__value">
€ 1.414,00
</div>
<div class="c-list-pricing__caption">
excl.btw*
</div>
</dd>
</div>
</dl>
</article>
</div>
</div>
</div>
</details>
<details class="c-accordeon__item">
<summary class="c-accordeon__summary">
<span class="o-layout o-layout--gap-tiny o-layout--fit o-layout--justify o-layout--nowrap">
<span>
<span class="u-heading u-h4">Accordeon item 2</span>
</span>
<span>
<span class="c-accordeon__plus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-plus" />
</svg>
</span>
<span class="c-accordeon__minus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-minus" />
</svg>
</span>
</span>
</span>
</summary>
<div class="c-accordeon__content">
<div class="o-flow">
<div class="o-layout o-layout--gap-base">
<div class="u-colspan-12 u-colspan-8@lap">
<div class="o-flow c-editor c-readable-text">
<h3 class="u-h5">Kennismaking en brede basis </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
<a class="c-button c-button--small c-button--has-icon ">
<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>
</div>
</div>
<div class="u-colspan-12 u-colspan-4@lap">
<picture>
<img class="c-img lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" width="600" height="400">
</picture>
</div>
</div>
</div>
</div>
</details>
<details class="c-accordeon__item">
<summary class="c-accordeon__summary">
<span class="o-layout o-layout--gap-tiny o-layout--fit o-layout--justify o-layout--nowrap">
<span>
<span class="u-heading u-h4">Accordeon item 3</span>
</span>
<span>
<span class="c-accordeon__plus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-plus" />
</svg>
</span>
<span class="c-accordeon__minus">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-minus" />
</svg>
</span>
</span>
</span>
</summary>
<div class="c-accordeon__content">
<div class="o-flow">
<div class="o-layout o-layout--gap-base">
<div class="u-colspan-12 u-colspan-8@lap">
<div class="o-flow c-editor c-readable-text">
<h3 class="u-h5">Kennismaking en brede basis </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum ipsum iste itaque magnam sit tenetur totam vero voluptas. Asperiores commodi cumque cupiditate doloremque illo natus odio odit rerum voluptatem.</p>
<a class="c-button c-button--small c-button--has-icon ">
<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>
</div>
</div>
<div class="u-colspan-12 u-colspan-4@lap">
<picture>
<img class="c-img lazyautosizes lazyloaded" data-srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&height=400&rnd=133046109807100000" width="600" height="400">
</picture>
</div>
</div>
</div>
</div>
</details>
</div>
</div>
</div>
</tab-navigation>
</div>
<div>
<tab-navigation>
<span hidden id="label-locations">Locaties</span>
<div class="o-flow">
<div class="t-color--light">
<div class="c-tabs__tablist" role="tablist" aria-labelledby="label-locations">
<button
class="c-tabs__tab"
role="tab"
aria-selected="true"
aria-controls="location-panel-1"
id="location-tab-1"
tabindex="0"
>
Den Bosch
</button>
<button
class="c-tabs__tab"
role="tab" aria-selected="false" aria-controls="location-panel-2"
id="location-tab-2" tabindex="-1">Venlo
</button>
</div>
</div>
<div role="tabpanel" id="location-panel-1" tabindex="0" aria-labelledby="location-tab-1">
{{ render '@molecules-accordeon' }}
</div>
<div role="tabpanel" id="location-panel-2" tabindex="0" aria-labelledby="location-tab-2"
hidden>
<h1>Content for the second panel</h1>
{{ render '@molecules-accordeon' }}
</div>
</div>
</tab-navigation>
</div>
/* No context defined. */
/* =========================================================================
Components.Molecules.Tabs
========================================================================= */
/* =========================================================================
Block
========================================================================= */
.c-tabs {
// empty for reference
}
/* Elements
========================================================================= */
.c-tabs__tablist {
display: inline-flex;
background-color: var(--color-white);
color: var(--page-theme-dark);
border-radius: var(--space-base);
padding-inline: calc(var(--space-tiny) / 2);
padding-block: calc(var(--space-tiny) / 2);
}
.c-tabs__tab {
border-radius: var(--space-base);
padding-block: var(--space-tiny);
padding-inline: var(--space-small);
&[aria-selected='true'] {
background-color: var(--page-theme);
color: var(--color-white);
}
}
No notes defined.