HTML-Prototype von DZNE

<div class="c-masonry">
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
  <div class="c-masonry__item"><a class="c-masonry__imagewrap" href="#"><img src="https://picsum.photos/id/2/500/333" width="500" height="333" alt="#" loading="lazy"/></a>
    <ul class="c-taglist">
      <li><a class="c-tag " href="#Grafik">Grafik</a>
      </li>
      <li><a class="c-tag " href="#Foto">Foto</a>
      </li>
      <li><a class="c-tag " href="#Diagramm">Diagramm</a>
      </li>
      <li><a class="c-tag " href="#Organigramm">Organigramm</a>
      </li>
    </ul>
  </div>
</div>