3.9 #Organisms.MediaGrid Media grid
Media grid organism.
Example
Media grid
Markup: lib/components/styleguide/organisms/media-grid.html
<div class="app-body">
<section class="container paragraph--media-grid pt-medium pb-medium">
<div class="row">
<div class="col-12">
<h2 class="pb-small">Media grid</h2>
<div class="media-grid media-grid--masonry js-gallery">
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/800">
<img src="https://picsum.photos/400/400">
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/450">
<img src="https://picsum.photos/400/225">
</a>
<a href="https://youtu.be/pSehV7SjJQg" class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid">
<img src="http://i.ytimg.com/vi/pSehV7SjJQg/maxresdefault.jpg">
<div class="btn btn--play-video btn--play-video--triangle">
<i class="fa-solid fa-play icon--play-triangle"></i>
</div>
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/600">
<img src="https://picsum.photos/400/300">
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/512">
<img src="https://picsum.photos/400/256">
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/412">
<img src="https://picsum.photos/400/206">
</a>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/media-grid/_media-grid.scss, line 1