HTML-Prototype von in2code

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium" id="c53245">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Downloads</h2>
  </header>
  <div class="c-downloads">
    <ul class="flex">
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-arrivals-winter-semester-2023.pdf" target="_blank">Titel des Downloads in kleiner &Uuml;berl&auml;nge</a>
          <p class="c-downloads__item-type">pdf, 126 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-press-mindshift-magazine-second-edition-english.pdf" target="_blank">tum-campus-heilbronn-press-mindshift-magazine-second-edition-english.pdf</a>
          <p class="c-downloads__item-type">pdf, 2 MB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-press-mindshift-magazine-second-edition-german.pdf" target="_blank">tum-campus-heilbronn-press-mindshift-magazine-second-edition-german.pdf</a>
          <p class="c-downloads__item-type">pdf, 2 MB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-student-handbook.pdf" target="_blank">tum-campus-heilbronn-student-handbook.pdf</a>
          <p class="c-downloads__item-type">pdf, 908 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-tum-talk-2023-chn-de.pdf" target="_blank">tum-campus-heilbronn-tum-talk-2023-chn-de.pdf</a>
          <p class="c-downloads__item-type">pdf, 114 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
      <li class="c-downloads__item flex__sm-6 flex__lg-4 flex__xl-3">
        <div>
          <p class="c-downloads__item-lang">en</p><a class="c-downloads__item-link" href="/fileadmin/chn.tum.de/Download_Center/tum-campus-heilbronn-tum-talk-2023-chn-en.pdf" target="_blank">tum-campus-heilbronn-tum-talk-2023-chn-en.pdf</a>
          <p class="c-downloads__item-type">pdf, 109 KB</p>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
        </svg>
      </li>
    </ul>
  </div>
</div>