<header class="article-header">
  <div class="article-header__inner">
    <div class="article-header__title">
      <h1 class="headline headline--1">Ich bin die Hauptheadline</h1>
    </div>
    <div class="article-header__text">
      <p>Diese neue Art des Bauens eröffnet neue Potentiale und ist klima- wie ressourcenschonend. Entwickelt wurde das Verfahren im Rahmen eines unserer Programme.</p>
    </div>
    <div class="article-header__meta">
      <div class="article-header__meta-item"><svg class="icon icon--calendar" viewBox="0 0 200 200">
          <use xlink:href="#icon-calendar"></use>
        </svg><span>12.10.</span></div>
      <div class="article-header__meta-item"><svg class="icon icon--location" viewBox="0 0 200 200">
          <use xlink:href="#icon-location"></use>
        </svg><span>Stuttgart</span></div>
    </div>
    <div class="article-header__meta-text">
      <p>text: Rolf Metzger</p>
    </div>
    <div class="article-header__share">
      <div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-share"></use>
          </svg><span class="share__text">Teilen</span></button>
        <div class="share__tooltip" aria-hidden="true">
          <ul class="share__list">
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
                  <use xlink:href="#icon-facebook"></use>
                </svg><span class="share__label">Facebook</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
                  <use xlink:href="#icon-x"></use>
                </svg><span class="share__label">X</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
                  <use xlink:href="#icon-xing"></use>
                </svg><span class="share__label">Xing</span></a></li>
            <li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
                  <use xlink:href="#icon-mail-fill"></use>
                </svg><span class="share__label">E-Mail</span></a></li>
            <li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &amp;#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
                  <use xlink:href="#icon-copy"></use>
                </svg><span class="share__label">Link kopieren</span></button></li>
          </ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
              <use xlink:href="#icon-close"></use>
            </svg></button>
          <div class="share__arrow"></div>
        </div>
      </div>
    </div>
    <div class="article-header__figure">
      <figure class="figure" aria-labelledby="figure-898a-label">
        <div class="figure__media" data-gallery="lightbox-376e">
          <div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><button class="copyright js-tooltip figure__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
              <use xlink:href="#icon-copyright"></use>
            </svg></button>
        </div>
      </figure>
    </div>
  </div>
</header>

{
  "headline": {
    "size": 1,
    "level": 1,
    "text": "Ich bin die Hauptheadline"
  },
  "text": [
    "p Diese neue Art des Bauens eröffnet neue Potentiale und ist klima- wie ressourcenschonend. Entwickelt wurde das Verfahren im Rahmen eines unserer Programme.\n"
  ],
  "metaText": [
    "p text: Rolf Metzger\n"
  ],
  "share": true,
  "figure": true,
  "title": "Ein Roboter, der Häuser strickt",
  "meta": [
    {
      "icon": "calendar",
      "text": "12.10."
    },
    {
      "icon": "location",
      "text": "Stuttgart"
    }
  ]
}

<header class="article-header article-header--left">
  <div class="article-header__inner">
    <div class="article-header__date-text"><time datetime="2022-09-28">28.09.2022</time></div>
    <div class="article-header__title">
      <h1 class="headline headline--1">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h1>
    </div>
    <div class="article-header__text">
      <p>Diese neue Art des Bauens eröffnet neue Potentiale und ist klima- wie ressourcenschonend. Entwickelt wurde das Verfahren im Rahmen eines unserer Programme.</p>
    </div>
    <div class="article-header__meta">
      <div class="article-header__meta-item"><svg class="icon icon--calendar" viewBox="0 0 200 200">
          <use xlink:href="#icon-calendar"></use>
        </svg><span>12.10.</span></div>
      <div class="article-header__meta-item"><svg class="icon icon--location" viewBox="0 0 200 200">
          <use xlink:href="#icon-location"></use>
        </svg><span>Stuttgart</span></div>
    </div>
    <div class="article-header__meta-text">
      <p>text: Rolf Metzger</p>
    </div>
    <div class="article-header__share">
      <div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
            <use xlink:href="#icon-share"></use>
          </svg><span class="share__text">Teilen</span></button>
        <div class="share__tooltip" aria-hidden="true">
          <ul class="share__list">
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
                  <use xlink:href="#icon-facebook"></use>
                </svg><span class="share__label">Facebook</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
                  <use xlink:href="#icon-x"></use>
                </svg><span class="share__label">X</span></a></li>
            <li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
                  <use xlink:href="#icon-xing"></use>
                </svg><span class="share__label">Xing</span></a></li>
            <li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
                  <use xlink:href="#icon-mail-fill"></use>
                </svg><span class="share__label">E-Mail</span></a></li>
            <li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &amp;#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
                  <use xlink:href="#icon-copy"></use>
                </svg><span class="share__label">Link kopieren</span></button></li>
          </ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
              <use xlink:href="#icon-close"></use>
            </svg></button>
          <div class="share__arrow"></div>
        </div>
      </div>
    </div>
    <div class="article-header__figure">
      <figure class="figure" aria-labelledby="figure-945f-label">
        <div class="figure__media" data-gallery="lightbox-8b6a">
          <div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><button class="copyright js-tooltip figure__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
              <use xlink:href="#icon-copyright"></use>
            </svg></button>
        </div>
      </figure>
    </div>
  </div>
</header>

{
  "headline": {
    "size": 1,
    "level": 1,
    "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot"
  },
  "text": [
    "p Diese neue Art des Bauens eröffnet neue Potentiale und ist klima- wie ressourcenschonend. Entwickelt wurde das Verfahren im Rahmen eines unserer Programme.\n"
  ],
  "metaText": [
    "p text: Rolf Metzger\n"
  ],
  "share": true,
  "figure": true,
  "dateText": [
    "time(datetime='2022-09-28') 28.09.2022\n"
  ],
  "left": true,
  "title": "Ein Roboter, der Häuser strickt",
  "meta": [
    {
      "icon": "calendar",
      "text": "12.10."
    },
    {
      "icon": "location",
      "text": "Stuttgart"
    }
  ]
}