Artikel-Header @article-header
Standard @article-header
<!-- Standard -->
<header class="article-header">
<div class="article-header__inner">
<div class="article-header__head">
<div class="article-header__logo">
<div class="image loading" style="padding-top: 37.5%;">
<noscript>
<img class="image__fallback" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="120" src="/images/dummy-images/320x120.png" width="320" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/320x120.png" width="320" height="120" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." />
</div>
</div>
<div class="article-header__headline">
<h1 class="headline headline--2"><span class="headline__kicker-line"><span class="headline__kicker">Optionale Spitzmarke<span class="u-hidden-visually">: </span></span>
</span>Hier steht der Titel der Artikelseite und er kann auch über mehrere Zeilen gehen</h1>
</div>
<div class="article-header__tags">
<div class="group">
<ul class="group__list">
<li class="group__item">
<a class="tag tag--primary" href="#">Forschung</a>
</li>
<li class="group__item">
<a class="tag tag--primary" href="#">Publikation</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Naturwissenschaften</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Biologie</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Zoologie</a>
</li>
</ul>
</div>
</div>
</div>
<div class="article-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 class="article-header__intro">
<div class="text text--intro">
<p>Optionaler Introtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
</div>
</header>{
"logo": {
"src": "/images/dummy-images/320x120.png",
"src2x": null,
"copyright": null,
"width": 320,
"height": 120
},
"date": null,
"headline": {
"kicker": "Optionale Spitzmarke",
"text": "Hier steht der Titel der Artikelseite und er kann auch über mehrere Zeilen gehen",
"size": 2,
"level": 1
},
"tags": true,
"tools": true,
"image": null,
"text": {
"content": "p Optionaler Introtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
}
}
Meldung @article-header--news
<!-- Meldung -->
<header class="article-header">
<div class="article-header__inner">
<div class="article-header__head">
<div class="article-header__date f-dateline">
<time datetime="2018-03-25">25. März 2018</time><span class="article-header__number"></span></div>
<div class="article-header__headline">
<h1 class="headline headline--2">Hier steht der Titel der Artikelseite und er kann auch über mehrere Zeilen gehen</h1>
</div>
<div class="article-header__tags">
<div class="group">
<ul class="group__list">
<li class="group__item">
<a class="tag tag--primary" href="#">Forschung</a>
</li>
<li class="group__item">
<a class="tag tag--primary" href="#">Publikation</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Naturwissenschaften</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Biologie</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Zoologie</a>
</li>
</ul>
</div>
</div>
</div>
<div class="article-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 class="article-header__intro">
<div class="text text--intro">
<p>Optionaler Introtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
</div>
</header>{
"logo": null,
"date": "2018-03-25",
"headline": {
"kicker": null,
"text": "Hier steht der Titel der Artikelseite und er kann auch über mehrere Zeilen gehen",
"size": 2,
"level": 1
},
"tags": true,
"tools": true,
"image": null,
"text": {
"content": "p Optionaler Introtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
}
}
Presse-Meldung @article-header--news-pr
<!-- Presse-Meldung -->
<header class="article-header">
<div class="article-header__inner">
<div class="article-header__head">
<div class="article-header__date f-dateline">
<time datetime="2018-03-25">25. März 2018</time><span class="article-header__number">| Nummer 120/2019</span></div>
<div class="article-header__headline">
<h1 class="headline headline--2">Hier steht der Titel der Artikelseite und er kann auch über mehrere Zeilen gehen</h1>
<div class="headline__subline">
<h2 class="headline headline--5">Unterüberschrift für die Pressemitteilung</h2>
</div>
</div>
</div>
<div class="article-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 class="article-header__image">
<figure class="figure js-figure" aria-labelledby="figure-810d-label">
<div class="figure__media">
<div class="image image--not-responsive">
<img class="image__img" src="/images/slider-images/570x570@1x.jpg" data-srcset="../images/slider-images/570x570@2x.jpg 2x, ../images/slider-images/570x570@1x.jpg 1x" width="570" height="570" alt="Neuen Methode zum Impfen von Pflanzen." />
</div>
</div>
<figcaption class="figure__caption" id="figure-810d-label">Neuen Methode zum Impfen von Pflanzen.<span class="copy">Foto: Romy Berger | Uni Halle</span><span class="cc__caption"><button class="cc js-cc">| ©</button>
<div class="cc__container" role="tooltip">
<a class="cc__link" href="https://creativecommons.org/licenses/by-nc/3.0/de/" rel="noopener noreferrer" target="_blank">
<figure class="figure js-figure" aria-labelledby="figure-8aa3-label">
<div class="figure__media">
<div class="image image--not-responsive">
<img class="image__img" src="/images/commons/by-nc.svg" data-srcset="../images/commons/by-nc.svg 2x, ../images/commons/by-nc.svg 1x" width="20rem" alt="BY NC" />
</div>
</div>
<figcaption class="figure__caption" id="figure-8aa3-label">Namensnennung, nicht kommerzielle Verwendung</figcaption>
</figure>
</a>
</div></span><span class="download__caption"><a class="link link--download" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf">Download (JPG, 12KB, barrierefrei)</a></span></figcaption>
</figure>
</div>
<div class="article-header__intro">
<div class="text text--intro">
<p>Optionaler Introtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
</div>
</header>{
"logo": null,
"date": "2018-03-25",
"headline": {
"kicker": null,
"text": "Hier steht der Titel der Artikelseite und er kann auch über mehrere Zeilen gehen",
"size": 2,
"level": 1,
"subline": "Unterüberschrift für die Pressemitteilung"
},
"tags": null,
"tools": true,
"image": true,
"text": {
"content": "p Optionaler Introtext ipsum dolor sit amet, consetetur sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
},
"number": "| Nummer 120/2019"
}