Gallery Box - Native
Native Gallery component



































































































Markup: ..\..\styleguide\templates\organisms\gallery.html
<div id="gallery-1" class="gallery rocksite-o-gallery [modifier class]">
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
<div class="rocksite-o-gallery__item">
<figure class="rocksite-m-image-figure -card">
<img width="350" height="350" src="../assets/images/photo-gallery.jpg" class="rocksite-m-image-figure__image" alt="" />
<figcaption class="rocksite-m-image-figure__caption">Try selecting and removing or editing</figcaption>
</figure>
</div>
</div>
../source/scss/components/organisms/_gallery.scss
, line 1