Accordeon

1179 × 333
<section>
    <div class="o-layer  o-layer--large">
        <div class="o-retain  o-retain--inset">
            <div class="o-flow">
                <div class="t-color--light">
                    <h3>Meer over deze opleiding</h3>
                </div>

                <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&amp;height=400&amp;rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;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">&nbsp;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">&nbsp;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&amp;height=400&amp;rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;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&amp;height=400&amp;rnd=133046109807100000 600w," data-src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" sizes="340px" srcset="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000 600w," src="/media/yj5p0d5q/rectangle-36.jpg?width=600&amp;height=400&amp;rnd=133046109807100000" width="600" height="400">
                                        </picture>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </details>
                </div>

                <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>
<section {{#if inDark }}class="t-themed-section"{{/if}}>
  <div class="o-layer  o-layer--large">
    <div class="o-retain  o-retain--inset">
      <div class="o-flow">
        <div class="t-color--light">
          <h3>Meer over deze opleiding</h3>
        </div>

        {{ render '@molecules-accordeon' accordeon merge=true }}

        <p>
          {{ render '@atoms-button--download' }}
        </p>
      </div>
    </div>
  </div>
</section>
/* No context defined. */

No notes defined.