HTML-Prototype von TUM Campus Heilbronn

<!-- Grid/ Element container-->
<div class="frame frame-type-ce_persons frame-space-before-none" id="c9001">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Kontakt</h2>
  </header>
  <div class="c-persons-wrapper [modifier class]">
    <div class="c-persons">
      <div class="c-persons__image">
        <picture><img src="https://placeholder2.in2code.de/images/university/4/600/385" alt="" loading="lazy" width="600" height="385"/></picture>
      </div>
      <div class="c-persons__content">
        <p class="c-persons__name">Natalia Pokhyliuk</p>
        <p class="c-persons__position">Program Managerin</p>
        <ul class="c-persons__list">
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone"></use>
            </svg><a href="tel:+49713126418311">+49 (0)7131 26418-311</a>
          </li>
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-mail"></use>
            </svg><a href="mailto:info.hn@chn.tum.de">Mail schreiben</a>
          </li>
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-up-right"></use>
            </svg><a href="#">Mehr zu Natalia Pokhyliuk</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="c-persons">
      <div class="c-persons__image">
        <picture><img src="https://placeholder2.in2code.de/images/university/5/600/385" alt="" loading="lazy" width="600" height="385"/></picture>
      </div>
      <div class="c-persons__content">
        <p class="c-persons__name">Max Mustermann</p>
        <p class="c-persons__position">Wissenschaftlicher Mitarbeiter</p>
        <ul class="c-persons__list">
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone"></use>
            </svg><a href="tel:+49713126418311">+49 (0)7131 26418-311</a>
          </li>
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-mail"></use>
            </svg><a href="mailto:info.hn@chn.tum.de">Mail schreiben</a>
          </li>
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-up-right"></use>
            </svg><a href="#">Mehr zu Max Mustermann</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="c-persons">
      <div class="c-persons__image">
        <picture><img src="https://placeholder2.in2code.de/images/university/6/600/385" alt="" loading="lazy" width="600" height="385"/></picture>
      </div>
      <div class="c-persons__content">
        <p class="c-persons__name">Erika Musterfrau</p>
        <p class="c-persons__position">Leitung Studierendenservice</p>
        <ul class="c-persons__list">
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone"></use>
            </svg><a href="tel:+49713126418311">+49 (0)7131 26418-311</a>
          </li>
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-mail"></use>
            </svg><a href="mailto:info.hn@chn.tum.de">Mail schreiben</a>
          </li>
          <li class="c-persons__item">
            <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-up-right"></use>
            </svg><a href="#">Mehr zu Erika Musterfrau</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>