<div class="accordion">
<div class="accordion__items">
<section class="accordion__item">
<h3 class="accordion__header"><button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="id-3034-content" id="id-3034-headline"><span class="headline headline--4 accordion__toggle-label">Akkordeon Headline 1 geöffnet</span><span class="accordion__toggle-icon"><svg class="icon icon--plus accordion__toggle-icon--down" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg><svg class="icon icon--close accordion__toggle-icon--up" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></span></button></h3>
<div class="accordion__content" id="id-3034-content" aria-labelledby="id-3034-headline">
<div class="accordion__content-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <a class="link" href="#">nonumy eirmod tempor invidunt</a> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
</section>
<section class="accordion__item">
<h3 class="accordion__header"><button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="id-dc1f-content" id="id-dc1f-headline"><span class="headline headline--4 accordion__toggle-label">Akkordeon Headline 2</span><span class="accordion__toggle-icon"><svg class="icon icon--plus accordion__toggle-icon--down" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg><svg class="icon icon--close accordion__toggle-icon--up" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></span></button></h3>
<div class="accordion__content" id="id-dc1f-content" aria-labelledby="id-dc1f-headline">
<div class="accordion__content-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
</section>
<section class="accordion__item">
<h3 class="accordion__header"><button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="id-0b0a-content" id="id-0b0a-headline"><span class="headline headline--4 accordion__toggle-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="accordion__toggle-icon"><svg class="icon icon--plus accordion__toggle-icon--down" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg><svg class="icon icon--close accordion__toggle-icon--up" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></span></button></h3>
<div class="accordion__content" id="id-0b0a-content" aria-labelledby="id-0b0a-headline">
<div class="accordion__content-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Wer sich mit den richtungsweisenden Themen der Gesundheits-IT beschäftigt, kommt an der Telematikinfrastruktur (TI) als das zentrale Netz nicht vorbei: Künftig werden Funktionen wie elektronisches Rezept, der elektronische Medikationsplan oder auch das Versenden sicherer E-Mails via KIM die digitale Patientenversorgung maßgeblich mitbestimmen.</p>
<figure class="figure" aria-labelledby="figure-631a-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
<figcaption class="figure__caption" id="figure-631a-label"><b>Titel des Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>
</div>
</div>
</div>
</section>
</div>
</div>
{
"items": [
{
"headline": {
"tag": "span",
"size": 4,
"text": "Akkordeon Headline 1 geöffnet"
},
"text": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam #[a.link(href='#') nonumy eirmod tempor invidunt] ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n"
}
},
{
"headline": {
"tag": "span",
"size": 4,
"text": "Akkordeon Headline 2"
},
"text": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n"
}
},
{
"headline": {
"tag": "span",
"size": 4,
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
"text": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\np Wer sich mit den richtungsweisenden Themen der Gesundheits-IT beschäftigt, kommt an der Telematikinfrastruktur (TI) als das zentrale Netz nicht vorbei: Künftig werden Funktionen wie elektronisches Rezept, der elektronische Medikationsplan oder auch das Versenden sicherer E-Mails via KIM die digitale Patientenversorgung maßgeblich mitbestimmen.\n+include('@figure--external-video')\n"
}
}
]
}
<div class="accordion">
<div class="accordion__items">
<section class="accordion__item">
<h3 class="accordion__header"><button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="id-73f6-content" id="id-73f6-headline"><span class="headline headline--4 accordion__toggle-label">Akkordeon Headline 1 geöffnet</span><span class="accordion__toggle-icon"><svg class="icon icon--plus accordion__toggle-icon--down" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg><svg class="icon icon--close accordion__toggle-icon--up" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></span></button></h3>
<div class="accordion__content" id="id-73f6-content" aria-labelledby="id-73f6-headline">
<div class="accordion__content-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <a class="link" href="#">nonumy eirmod tempor invidunt</a> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
</section>
<section class="accordion__item">
<h3 class="accordion__header"><button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="id-ec25-content" id="id-ec25-headline"><span class="headline headline--4 accordion__toggle-label">Akkordeon Headline 2</span><span class="accordion__toggle-icon"><svg class="icon icon--plus accordion__toggle-icon--down" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg><svg class="icon icon--close accordion__toggle-icon--up" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></span></button></h3>
<div class="accordion__content" id="id-ec25-content" aria-labelledby="id-ec25-headline">
<div class="accordion__content-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
</section>
<section class="accordion__item">
<h3 class="accordion__header"><button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="id-258a-content" id="id-258a-headline"><span class="headline headline--4 accordion__toggle-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="accordion__toggle-icon"><svg class="icon icon--plus accordion__toggle-icon--down" viewBox="0 0 200 200">
<use xlink:href="#icon-plus"></use>
</svg><svg class="icon icon--close accordion__toggle-icon--up" viewBox="0 0 200 200">
<use xlink:href="#icon-close"></use>
</svg></span></button></h3>
<div class="accordion__content" id="id-258a-content" aria-labelledby="id-258a-headline">
<div class="accordion__content-text">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Wer sich mit den richtungsweisenden Themen der Gesundheits-IT beschäftigt, kommt an der Telematikinfrastruktur (TI) als das zentrale Netz nicht vorbei: Künftig werden Funktionen wie elektronisches Rezept, der elektronische Medikationsplan oder auch das Versenden sicherer E-Mails via KIM die digitale Patientenversorgung maßgeblich mitbestimmen.</p>
<figure class="figure" aria-labelledby="figure-a6b7-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
<figcaption class="figure__caption" id="figure-a6b7-label"><b>Titel des Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>
</div>
</div>
</div>
</section>
</div>
<div class="accordion__button"><a class="button button--primary" href="#"><span class="button__text">Button-Text</span></a></div>
</div>
{
"items": [
{
"headline": {
"tag": "span",
"size": 4,
"text": "Akkordeon Headline 1 geöffnet"
},
"text": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam #[a.link(href='#') nonumy eirmod tempor invidunt] ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n"
}
},
{
"headline": {
"tag": "span",
"size": 4,
"text": "Akkordeon Headline 2"
},
"text": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n"
}
},
{
"headline": {
"tag": "span",
"size": 4,
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
"text": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\np Wer sich mit den richtungsweisenden Themen der Gesundheits-IT beschäftigt, kommt an der Telematikinfrastruktur (TI) als das zentrale Netz nicht vorbei: Künftig werden Funktionen wie elektronisches Rezept, der elektronische Medikationsplan oder auch das Versenden sicherer E-Mails via KIM die digitale Patientenversorgung maßgeblich mitbestimmen.\n+include('@figure--external-video')\n"
}
}
],
"button": true
}