1. Home
  2. Playbook: UI components

Image

The image component is used to display images with rounded corners and in different sizes.

Image variations

The image component has three size variations:

  • half content width
  • content width
  • page width
This is an example caption.
This is an example caption.
This is an example caption.

Image specifications

Images used in the image component should:

  • meet the recommendations of WorkSafe's digital style guide
  • be of high quality
  • be in 4x3 ratio 
  • be at least 1000px wide 

Tip: Use a good image compression tool to reduce the file size that produces a lossless version before uploading.

Improving accessibility

Images are used as decorative or informative elements and should not contain any embedded text. 

A descriptive caption and alt text must be added to the image asset. Where the caption and the alt text are the same, alt text can be omitted.