Material @list-item-material

Abgenommen

Default @list-item-material

Vorschau in eignem Tab anzeigen
 
<!-- Default -->
<article class="list-item list-item--material">
  <div class="list-item__content">
    <ul class="list-item__list">
      <li class="list-item__list-item">
        <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>
      </li>
    </ul>
  </div>
</article>

Intern @list-item-material--intern

Vorschau in eignem Tab anzeigen
 
<!-- Intern -->
<article class="list-item list-item--material">
  <div class="list-item__content">
    <ul class="list-item__list">
      <li class="list-item__list-item">
        <article class="material">
          <div class="material__thumbnail">
            <figure class="figure js-figure" aria-labelledby="figure-4fa5-label">
              <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&amp;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-4fa5-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>
      </li>
    </ul>
  </div>
</article>

External @list-item-material--external

Vorschau in eignem Tab anzeigen
 
<!-- External -->
<article class="list-item list-item--material">
  <div class="list-item__content">
    <ul class="list-item__list">
      <li class="list-item__list-item">
        <article class="material">
          <div class="material__thumbnail">
            <figure class="figure js-figure" aria-labelledby="figure-e981-label">
              <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&amp;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-e981-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>
      </li>
    </ul>
  </div>
</article>

Minimal @list-item-material--minimal

Vorschau in eignem Tab anzeigen
 
<!-- Minimal -->
<article class="list-item list-item--material">
  <div class="list-item__content">
    <ul class="list-item__list">
      <li class="list-item__list-item">
        <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>
      </li>
    </ul>
  </div>
</article>