Recommended image dimensions: 2560px wide by 560px high

Best practice

  • Apply a dark tint to ensure the white text stands out with enough contrast. Dark tint does not need to be a part of the actual image. It is an option when creating the hero banner component.
  • Recommended image size should be adhered to. This will remove the possibility of the image being stretched, which will result in a poor image appearance.
  • If possible, choose an image which is free of other distractions, where the person/object or theme is the focal point.

best practice image

Avoid these mistakes

Too much text

  • Banners should contain a short message that is quick and easy to read. Users are more likely to read the text if your messages are short and succinct.

Image to avoid

    Busy imagery

    • Avoid using banner images that are overly bright, which diminishes the ability of the copy to stand out sufficiently.
    • Avoid using images which have very busy imagery, which may detract further from the banners messaging.

    avoid busy images

    Too small images

    • Images smaller than recommended dimensions will be stretched to fill the space, which will result in a poor image quality.

      avoid small images