Images
Helper classes
The only constraints by default (with no classnames added to img element) are that its border is none and height is auto. Adding the classname zo-img would constrain its max-width to 100%.
With the classname zo-img--block, its display would be set to block. With .zo-img--fill, its width would be set to 100%.
Figures
Images can be organized in figures. They can have different shapes, be inline or block, or be arranged in grids.
Note: for the figure element to work correctly in IE 8 and below, you would consider using some JavaScript.
<div class="zo-g zo-g--fill">
<div class="zo-g__col zo-g__col--s4">
<div class="zo-g__content">
<figure class="zo-figure zo-figure--block">
<img src="/images/zoadoc/test.jpg" class="zo-img zo-img--block zo-img--fill" />
<figcaption class="zo-figure__caption">I am caption</figcaption>
</figure>
</div>
</div>
<div class="zo-g__col zo-g__col--s4">
<div class="zo-g__content">
<div class=" zo-figure zo-figure--block zo--radius">
<img src="/images/zoadoc/test.jpg" class="zo-img zo-img--block zo-img--fill" />
</div>
</div>
</div>
<div class="zo-g__col zo-g__col--s4">
<div class="zo-g__content">
<div class=" zo-figure zo-figure--block zo--round">
<img src="/images/zoadoc/test.jpg" class="zo-img zo-img--block zo-img--fill zo--round" />
</div>
</div>
</div>
</div>