HTML-Prototype von in2code

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium frame--full frame--background frame--blue" id="c23861">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Accordion</h2>
  </header>
  <div class="c-accordion">
    <div class="c-accordion__item">
      <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-c1" id="c-accordion__id-c1"><span class="c-accordion__item-title h6">Accordion Title</span><span class="c-accordion__item-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg></span></button>
      <div class="c-accordion__item-panel" id="c-accordion__sect-c1" role="region" aria-labelledby="c-accordion__id-c1">
        <div>
          <div class="rte-content">
            <ul>
              <li><a href="#">Campus Heilbronn</a>
                <ul>
                  <li><a href="#">Test</a></li>
                </ul>
              </li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a>
                <ol>
                  <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
                </ol>
              </li>
              <li><a href="#">Alumni</a></li>
            </ul>
            <p><strong>Strong is used to indicate strong importance.</strong>&nbsp;<a href="#">This is a text link.</a>&nbsp;<em>This text has added emphasis.</em>&nbsp;<strong><a href="#">This is a bold text link.</a></strong>&nbsp;<em><a href="#">This text link has added emphasis.</a></em></p>
            <ul class="ul-style-check">
              <li><a href="#">Campus Heilbronn</a>
                <ul>
                  <li><a href="#">Test</a></li>
                </ul>
              </li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a></li>
              <li><a href="#">Alumni</a>
                <ol>
                  <li><a href="#">Test 1</a></li>
                  <li><a href="#">Test 2</a></li>
                </ol>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="c-accordion__item">
      <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-c2" id="c-accordion__id-c2"><span class="c-accordion__item-title h6">Accordion Title</span><span class="c-accordion__item-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
          </svg></span></button>
      <div class="c-accordion__item-panel" id="c-accordion__sect-c2" role="region" aria-labelledby="c-accordion__id-c2">
        <div>
          <div class="rte-content">
            <ul>
              <li><a href="#">Campus Heilbronn</a></li>
              <li><a href="#">Student Services</a></li>
              <li><a href="#">Explore Heilbronn</a></li>
              <li><a href="#">Alumni</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>