<!-- Header -->
<header class="profile-header">
  <div class="profile-header__inner">
    <div class="profile-header__content">
      <div class="profile-header__head">
        <div class="profile-header__top">
          <div class="avatar profile-header__avatar">
            <div class="avatar__image">
              <div class="image loading" style="padding-top: 100%;">
                <noscript>
                  <img class="image__fallback" srcset="../images/dummy-images/170x170@2x.png 2x, ../images/dummy-images/170x170.png 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="170" src="/images/dummy-images/170x170.png"
                    width="170" />
                </noscript>
                <img class="image__img js-lazyload" data-src="../images/dummy-images/170x170.png" data-srcset="../images/dummy-images/170x170@2x.png 2x, ../images/dummy-images/170x170.png 1x" srcset="../images/dummy-images/170x170@2x.png 2x, ../images/dummy-images/170x170.png 1x"
                  width="170" height="170" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." />
              </div>
            </div>
            <button class="tooltip js-tooltip avatar__copyright" title="© Vorname Nachname, 2008">©</button>
          </div>
          <ul class="profile-header__contact">
            <li class="profile-header__contact-item">
              <a class="profile-header__contact-link" href="mailto:vorname.nachname@uni-halle.de">
                <svg class="icon icon--mail profile-header__contact-icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-bbc5-title">
                  <title id="icon-bbc5-title">E-Mail</title>
                  <use xlink:href="#icon-mail"></use>
                </svg>
              </a>
            </li>
            <li class="profile-header__contact-item">
              <a class="profile-header__contact-link" href="tel:+493455520">
                <svg class="icon icon--phone profile-header__contact-icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e871-title">
                  <title id="icon-e871-title">Telefon</title>
                  <use xlink:href="#icon-phone"></use>
                </svg>
              </a>
            </li>
          </ul>
        </div>
        <h1 class="headline headline--1 profile-header__headline">Prof. Dr. Vorname Nachname</h1>
      </div>
      <ul class="profile-header__list">
        <li class="profile-header__list-item"><strong class="profile-header__role">#1 Zuständigkeit/Tätigkeit</strong> Bereich/Abteilung</li>
        <li class="profile-header__list-item"><strong class="profile-header__role">#2 Zuständigkeit/Tätigkeit</strong> Bereich/Abteilung</li>
      </ul>
      <div class="group profile-header__tags">
        <ul class="group__list">
          <li class="group__item">
            <a class="tag tag--u-natfak1" href="#">Naturwissenschaften</a>
          </li>
          <li class="group__item">
            <a class="tag tag--u-medfak" href="#">Medizin</a>
          </li>
        </ul>
      </div>
      <div class="profile-header__intro">
        <div class="text text--intro">
          <p>Im Juni 2018 wurde Patrick Vonderau zum W3-Professor für Medien- und Kommunikationswissenschaft an die Martin-Luther-Universität Halle-Wittenberg berufen. Zuvor lehrte er als Professor am Institut für Medienwissenschaft der Universität Stockholm,
            Schweden.</p>
        </div>
      </div>
    </div>
    <div class="profile-header__tools">
      <div class="group group--nowrap group--article-hidden js-group">
        <ul class="group__list">
          <li class="group__item">
            <button class="icon-button icon-button--xlarge icon-button--border group__more" title="Mehr" type="button"><span class="icon-button__label">Mehr</span><span class="icon-button__circle"><svg class="icon icon--ellipsis icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-ellipsis"></use>
</svg></span></button>
          </li>
          <li class="group__item">
            <button class="icon-button icon-button--xlarge icon-button--border js-pdf" title="Seite drucken / PDF" data-url="https://www.uni-halle.de" data-title="Martin-Luther-Universität Halle-Wittenberg" type="button"><span class="icon-button__label">Drucken</span><span class="icon-button__circle"><svg class="icon icon--print icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-print"></use>
</svg></span></button>
          </li>
          <li class="group__item">
            <button class="icon-button icon-button--xlarge icon-button--border js-share" title="Seite teilen" data-url="https://www.uni-halle.de" data-title="Martin-Luther-Universität Halle-Wittenberg" type="button"><span class="icon-button__label">Teilen</span><span class="icon-button__circle"><svg class="icon icon--share icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-share"></use>
</svg></span></button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

{
  "avatar": {
    "image": {
      "src": "/images/dummy-images/170x170.png",
      "src2x": "/images/dummy-images/170x170@2x.png",
      "width": 170,
      "height": 170
    }
  },
  "contact": [
    {
      "icon": {
        "title": "E-Mail",
        "icon": "mail"
      },
      "url": "mailto:vorname.nachname@uni-halle.de"
    },
    {
      "icon": {
        "title": "Telefon",
        "icon": "phone"
      },
      "url": "tel:+493455520"
    }
  ],
  "name": "Prof. Dr. Vorname Nachname",
  "list": [
    {
      "role": "#1 Zuständigkeit/Tätigkeit",
      "department": "Bereich/Abteilung"
    },
    {
      "role": "#2 Zuständigkeit/Tätigkeit",
      "department": "Bereich/Abteilung"
    }
  ],
  "tags": {
    "groupOf": "tag",
    "items": [
      {
        "link": "#",
        "text": "Naturwissenschaften",
        "unit": "natfak1"
      },
      {
        "link": "#",
        "text": "Medizin",
        "unit": "medfak"
      }
    ]
  },
  "tools": true,
  "text": {
    "content": "p Im Juni 2018 wurde Patrick Vonderau zum W3-Professor für Medien- und Kommunikationswissenschaft an die Martin-Luther-Universität Halle-Wittenberg berufen. Zuvor lehrte er als Professor am Institut für Medienwissenschaft der Universität Stockholm, Schweden."
  }
}