Image

Overview

The image component displays an image on the page. The component can be expanded to include a link that opens a Modal. Images are progressively loaded to minimise initial page download times. Images can be left, centre or right aligned within its container. They can also have a maximum width applied.

Images are loaded using a lazy load library; Lazy Load.

Examples

Default variation

Example
External Link
Placeholder 
<div class="image">
  <div class="image__body">
    <img src="" alt="Placeholder" data-interchange="[http://placehold.it/800x150,http://placehold.it/800x450]" data-myob-image>
  </div>
</div>

Magnify variation

Example
External Link
Placeholder 
<div class="image image--magnify">
  <div class="image__body">
    <img src="" alt="Placeholder" data-interchange="[http://placehold.it/800x150,http://placehold.it/800x450]" data-myob-image>
  </div>
</div>

Usage guidelines

Dos Donts
do iconDo choose an appropriately sized image for its intended use.
do-not iconDon't use a small image that will be enlarged when the page renders, as this will result in a blurry or pixelated rendition.
do iconDo make sure to optimise your images to retain quality but minimise file size as much as possible.
do-not iconDon't exceed a maximum file size of 200Kb (for large images).

Implementation guidelines

Name Class Description
Alignment .image--left .image--center .image--right Change Image alignment within their container.