Reka

Code markup preview:

<div class="accordion ">
                        <div class="accordion__item" data-category-name="Meist gestellte Fragen" data-anchor="meist-gestellte-fragen" data-category-url="http://0.0.0.0:9009/helpcenter.html">
                            <div class="accordion__item__header text text--h6 color color--blue" accordion-header="" tracking="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
                                <span class="accordion__header__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                                <span class="accordion__item__icon">
                                    <div class="accordion__icon__wrapper">
                                        <span class="accordion__icon accordion__icon--open">
                                            <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
                                              <g fill="none" fill-rule="evenodd">
                                                <g transform="rotate(180 17 17.5)" stroke="#113180">
                                                  <rect class="accordion__icon__rect" transform="rotate(90 9 9.75)" x=".5" y="9.5" width="17" height="1" rx=".5"/>
                                                  <rect class="accordion__icon__rect" x=".5" y="9.5" width="17" height="1" rx=".5"/>
                                                </g>
                                              </g>
                                            </svg>
                                        </span>                    <span class="accordion__icon accordion__icon--close">
                                            <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
                                              <g fill="none" fill-rule="evenodd">
                                                <rect class="accordion__icon__rect" x=".5" y="9.5" width="17" height="1" rx=".5" transform="rotate(180 17 17.5)" stroke="#113180"/>
                                              </g>
                                            </svg>
                                        </span>                </div>
                                </span>
                            </div>
                            <div class="accordion__item__body" accordion-body="">
                                <div class="accordion__item__content">
                                    <ul><li>test 1</li><li>test 2</li><li>test 3</li></ul>
                                    <ol><li>test 2</li><li>test 3</li></ol>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <p>
                                        <a href="#" class="article-link color color--blue button--arrow no-margin">Link zum Content
                                            <span>
                                                        <svg width="33" height="10" xmlns="http://www.w3.org/2000/svg"><g stroke="#113180" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M0 5h31.773"/><path stroke-linejoin="bevel" d="M27.234 9l4.539-4-4.539-4"/></g></svg>
                                                    </span>
                                        </a>
                                    </p>
                                </div>
                            </div>
                    
                        </div>
                        <div class="accordion__item" data-category-name="Reka-Ferien" data-anchor="reka-ferien" data-category-url="http://0.0.0.0:9009/helpcenter.html">
                            <div class="accordion__item__header color color--blue text text--h6" accordion-header="" tracking="Suspendisse vel tincidunt leo">
                                <span class="accordion__header__content">Suspendisse vel tincidunt leo</span>
                                <span class="accordion__item__icon">
                                    <div class="accordion__icon__wrapper">
                                        <span class="accordion__icon accordion__icon--open">
                                            <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
                                              <g fill="none" fill-rule="evenodd">
                                                <g transform="rotate(180 17 17.5)" stroke="#113180">
                                                  <rect class="accordion__icon__rect" transform="rotate(90 9 9.75)" x=".5" y="9.5" width="17" height="1" rx=".5"/>
                                                  <rect class="accordion__icon__rect" x=".5" y="9.5" width="17" height="1" rx=".5"/>
                                                </g>
                                              </g>
                                            </svg>
                                        </span>                    <span class="accordion__icon accordion__icon--close">
                                            <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
                                              <g fill="none" fill-rule="evenodd">
                                                <rect class="accordion__icon__rect" x=".5" y="9.5" width="17" height="1" rx=".5" transform="rotate(180 17 17.5)" stroke="#113180"/>
                                              </g>
                                            </svg>
                                        </span>                </div>
                                </span>
                            </div>
                            <div class="accordion__item__body" accordion-body="">
                                <div class="accordion__item__content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion__item" data-category-name="Reka-Lunch" data-anchor="reka-lunch" data-category-url="http://0.0.0.0:9009/helpcenter.html">
                            <div class="accordion__item__header color color--blue text text--h6"  accordion-header="" tracking="Maecenas malesuada diam quam">
                                <span class="accordion__header__content">Maecenas malesuada diam quam</span>
                                <span class="accordion__item__icon">
                                    <div class="accordion__icon__wrapper">
                                        <span class="accordion__icon accordion__icon--open">
                                            <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
                                              <g fill="none" fill-rule="evenodd">
                                                <g transform="rotate(180 17 17.5)" stroke="#113180">
                                                  <rect class="accordion__icon__rect" transform="rotate(90 9 9.75)" x=".5" y="9.5" width="17" height="1" rx=".5"/>
                                                  <rect class="accordion__icon__rect" x=".5" y="9.5" width="17" height="1" rx=".5"/>
                                                </g>
                                              </g>
                                            </svg>
                                        </span>                    <span class="accordion__icon accordion__icon--close">
                                            <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
                                              <g fill="none" fill-rule="evenodd">
                                                <rect class="accordion__icon__rect" x=".5" y="9.5" width="17" height="1" rx=".5" transform="rotate(180 17 17.5)" stroke="#113180"/>
                                              </g>
                                            </svg>
                                        </span>                </div>
                                </span>
                            </div>
                            <div class="accordion__item__body" accordion-body="">
                                <div class="accordion__item__content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                </div>
                            </div>
                        </div>
                    </div>

Accordion

Accordion - mobile only

Suspendisse vel tincidunt leo

Suspendisse vel tincidunt leo

M5.8.2. Single Accordeon Link

Code markup preview: