HTML-Prototype von Hochschule RheinMain

<div class="c-person-list-item">
  <p class="h3">Dr. Anna Müller</p><small>Professor</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">anna.mueller@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+491234567890</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Max Mustermann</p><small>Associate Professor</small><small>&nbsp;| Engineering Department</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">max.mustermann@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+498765432109</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Maria Schmidt</p><small>Lecturer</small><small>&nbsp;| Marketing Department</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">maria.schmidt@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+447812345678</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Thomas Fischer</p><small>Assistant Professor</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">thomas.fischer@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+447801234567</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Julia Wagner</p><small>Research Fellow</small><small>&nbsp;| Sociology Department</small>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">julia.wagner@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+491231231231</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>
<div class="c-person-list-item">
  <p class="h3">Michael Schneider</p>
  <div class="c-person-list-item__links">
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#e-mail"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">michael.schneider@example.com</span>
      </div>
    </div>
    <div class="o-icon-text">
      <svg class="o-icon-text__icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false" style="pointer-events: none;" width="24px" height="24px">
        <use xlink:href="/Images/svg/sprite.symbol.svg#phone"></use>
      </svg>
      <div class="o-icon-text__content"><span class="o-icon-text__title">+491234567891</span>
      </div>
    </div>
  </div>
  <div class="flex flex--right"><a class="btn btn--right-link" href="#">Zur Person</a></div>
</div>