Images
For page performance, all images (including background images) should be set for lazy loading. See code example.
<div class="on-display">
<div class="on-display-images">
<div class="img">
<img data-src="images/surfing_1.jpg" alt="surfing image" class="lazyload">
</div>
<div class="img">
<img data-src="images/surfing_2.jpg" alt="surfing image" class="lazyload">
</div>
<div class="img">
<img data-src="images/surfing_3.jpg" alt="surfing image" class="lazyload">
</div>
</div>
</div>Images - Circle .img-circle
Images - Rounded .img-rounded
Options | Inside .flex-column-*
Images placed inside of a Flex column will automatically align to the left.
.align-center
Aligns image in the center.
.align-right
Aligns image to the right.
<div class="flex-row">
<div class="flex-column-50">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload align-center">
</div>
<div class="flex-column-50 align-right">
<img data-src="images/surfing_2.jpg" alt="surfing" class="lazyload align-right">
</div>
</div>