HTML-Prototype der OTH-Regensburg

<div class="c-contactbox c-contactbox--square-image">
  <picture class="c-contactbox__image">
    <!-- START RENDER SQUARE CONTACT BOX IMAGE IN SIDEBAR WITH SMALLER IMAGE DIMENSION-->
    <!-- START RENDER SQUARE CONTACT BOX IMAGE IN MAIN CONTENT WITH LARGER IMAGE DIMENSION-->
    <source srcset="https://picsum.photos/id/1040/904/904" media="(min-width:768px)"/>
    <source srcset="https://picsum.photos/id/1040/768/768" media="(min-width:0)"/><img src="https://picsum.photos/id/1040/904/904" width="904" height="904" alt="#" loading="lazy"/>
    <!-- END RENDER SQUARE CONTACT BOX IMAGE IN MAIN CONTENT WITH LARGER IMAGE DIMENSION-->
  </picture>
  <div class="c-contactbox__content">
    <div class="c-contactbox__information">
      <h3 class="c-contactbox__title">Prof. Dr.-Ing. Hans-Peter Rabl</h3>
      <div class="c-contactbox__description">
        <p>Zusätzliche Beschreibung (optional) Cum sociis natoque penatibus et magnis</p>
      </div>
      <ul class="c-contactbox__list o-list-bare">
        <li class="c-contactbox__list-item">
          <svg class="c-contactbox__icon" viewBox="0 0 36 36">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-university"></use>
          </svg><span class="c-contactbox__list-text">Fakultät Maschinenbau</span>
        </li>
        <li class="c-contactbox__list-item">
          <svg class="c-contactbox__icon" viewBox="0 0 38.774 38">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-location"></use>
          </svg><span class="c-contactbox__list-text">Galgenbergstraße 30, Raum D111</span>
        </li>
        <li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="mailto:studienberatung@oth-regensburg.de">
            <svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-letter-black"></use>
            </svg><span class="c-contactbox__list-text">studienberatung@oth-regensburg.de</span></a>
        </li>
        <li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="www.vorname-nachname.de">
            <svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-world"></use>
            </svg><span class="c-contactbox__list-text">www.vorname-nachname.de</span></a>
        </li>
        <li class="c-contactbox__list-item"><a class="c-contactbox__list-link" href="tel:+499419439710">
            <svg class="c-contactbox__icon" viewBox="0 0 38 38.816">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-black"></use>
            </svg><span class="c-contactbox__list-text">+49 (0)941 / 943 - 9710</span></a>
        </li>
        <li class="c-contactbox__list-item">
          <svg class="c-contactbox__icon" viewBox="0 0 36 36">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-time"></use>
          </svg><span class="c-contactbox__list-text">Mo bis Fr 08:30 - 12:00 Uhr<br>Di und Do 13:00 - 15:00 Uhr</span>
        </li>
      </ul>
    </div><span class="c-contactbox__cta">Alle Infos zur Person
      <svg viewBox="0 0 36 36.111" role="img" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
      </svg></span>
  </div><a class="c-contactbox__link" href="#container" title="Alle Informationen zu &quot;Prof. Dr.-Ing. Hans-Peter Rabl&quot;"></a>
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",
      "givenName": "Hans-Peter",
      "familyName": "Rabl",
      "honorificPrefix": "Prof. Dr.-Ing.",
      "affiliation": "Fakultät Maschinenbau",
      "email": "studienberatung@oth-regensburg.de ",
      "telephone": "+4994194302",
      "image": "http://photourl",
      "address": "Galgenbergstraße 30, Raum D111",
      "worksFor": "OTH Regensburg"
    }
  </script>
</div>