Teaser-Grid @teaser-grid

Design
Vorschau in eignem Tab anzeigen
 
<div class="teaser-grid">
  <div class="teaser-grid__inner">
    <div class="teaser-grid__item">
      <article class="teaser">
        <div class="teaser__content">
          <div class="teaser__media">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
          </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
            <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
          </a>
        </div>
      </article>
    </div>
    <div class="teaser-grid__item">
      <article class="teaser">
        <div class="teaser__content">
          <div class="teaser__media">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
          </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
            <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
          </a>
        </div>
      </article>
    </div>
    <div class="teaser-grid__item">
      <article class="teaser">
        <div class="teaser__content">
          <div class="teaser__media">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
          </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
            <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
          </a>
        </div>
      </article>
    </div>
    <div class="teaser-grid__item">
      <article class="teaser">
        <div class="teaser__content">
          <div class="teaser__media">
            <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="400" src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/600x400/F5F5F5/28281a.png?text=600x400" width="600" height="400" alt="Teaser Thumb" /></div>
          </div><a class="teaser__content-headline" href="#" data-overlay-target="teaser__content">
            <h3 class="headline headline--5"><span class="f-w-normal">Lorem ipsum dolor</span><span class="u-hidden-visually">:</span><br />Diam voluptua at vero</h3>
          </a>
        </div>
      </article>
    </div>
  </div>
</div>