Image

This pattern is for displaying an image.

Rules for using images

  • Alternative descriptions must be provided, using the alt attribute, to make the content accessible.
  • Captions should be included where they add context to the image.

More information on image file formats and optimisation is described within image standards.

Options available


Image

Example
Alternative text for this image
Code
<!-- Begin pattern: image //-->
<figure>    
    <img src="../../assets/docs/images/placeholders/360x240.png" alt="Alternative text for this image"/>
</figure>
<!-- End pattern: image //-->

Image with caption

A caption should be used to provide additional context about the image.

Example
Alternative text for this image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.
Code
<!-- Begin pattern: image //-->
<figure>    
    <img src="../../assets/docs/images/placeholders/500x500.jpg" alt="Alternative text for this image"/>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
</figure>
<!-- End pattern: image //-->

Linked image

This example shows a linked image with a caption containing a separate link.

Example
Alternative text for this image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.
Code
<!-- Begin pattern: image //-->
<figure>    
    <a href="#"><img src="../../assets/docs/images/placeholders/750x500.png" alt="Alternative text for this image"/></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec <a href="#">pellentesque hendrerit neque</a> et tincidunt.</figcaption>
</figure>
<!-- End pattern: image //-->