Material @material
Das Element dient der kompakten Darstellung von Materialien verschiedener Formate, z.B. Bilder, PDFs etc., die verlinkt oder zum Download bereitgestellt werden sollen.
Mit download-Link @material
<!-- Mit download-Link -->
<article class="material">
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
</div>
</article>{
"description": "p Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n",
"headline": {
"text": "Name des Flyers",
"level": 3,
"size": 7
},
"image": null,
"link": {
"download": "download.pdf",
"link": "/images/dummy-downloads/dummy.pdf",
"text": "Download-Link (PDF, 12KB, barrierefrei)"
}
}
Mit internem Link @material--intern
<!-- Mit internem Link -->
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-4be5-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-4be5-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
</div>
</article>{
"description": "p Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n",
"headline": {
"text": "Name des Flyers",
"level": 3,
"size": 7
},
"image": true,
"link": {
"internal": true,
"link": "http://interner-link.com/",
"text": "Interner Link"
}
}
Mit externem Link @material--external
<!-- Mit externem Link -->
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-8954-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-8954-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Bildes</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://theoldpurple.com/" rel="noopener noreferrer" target="_blank"><span class="link-block__icon"><svg class="icon icon--external link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external"></use>
</svg></span><span class="link-block__text">Externer Link</span><span class="link-block__hint"></span></a>
</div>
</article>{
"description": "p Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n",
"headline": {
"text": "Name des Bildes",
"level": 3,
"size": 7
},
"image": true,
"link": {
"external": true,
"link": "http://theoldpurple.com/",
"text": "Externer Link"
}
}
Ohne Link 1 @material--minimal
<!-- Ohne Link 1 -->
<article class="material">
<div class="material__content">
<div class="material__description">
<p>
<i>Advertising and the Transformation of Screen Cultures.</i>
<br> Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).</p>
</div>
</div>
</article>{
"description": "p #[i Advertising and the Transformation of Screen Cultures.]
Amsterdam: Amsterdam University Press, 2019 (in Vorbereitung; Ko-Autorschaft mit Bo Florin und Yvonne Zimmermann).\n"
}
Ohne Link 2 @material--minimal2
<!-- Ohne Link 2 -->
<article class="material">
<div class="material__content">
<div class="material__description">
<p>
<i>Films that Work. Industrial Film and the Productivity of Media.</i>
<br> New York: Columbia University Press, 2012 (Ko-Herausgeber mit Pelle Snickars).</p>
</div>
</div>
</article>{
"description": "p #[i Films that Work. Industrial Film and the Productivity of Media.]
New York: Columbia University Press, 2012 (Ko-Herausgeber mit Pelle Snickars).\n"
}