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.

Image

Example

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

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

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 //-->