Components

Banner

Banners are a component that score highly in the visual hierarchy, used to convey a message to the user.. They typically consist of an image, with heading, additional information and CTA. The 4 variants are designed with the user experience and accessibility in mind, controlling for various degrees of image exposure and text-to-image contrast ratio. The sizes cover multiple aspect ratios, specifically 3:1 (large), 4:1 (medium) and 5:1 (small).

Do's

  • ensure that the size follows the aspect ratio of 3:1 (large), 4:1 (medium) and 5:1 (small)
  • ensure that the component is optimised for different devices
  • use and indicate appropriate file formats (jpg, png), if restrictions are applied
  • keep in mind the file size as it may affect page loading time
  • indicate file size if restrictions are applied
  • use indicated HTML tags and attributes

Don'ts

  • do not use a size that is larger than the allotted space
  • do not use a size that is not in the correct aspect ratio
  • do not use an inappropriate file format (e.g. gif, tiff)
  • do not use an incorrect file size
  • do not use incorrect HTML tags and attributes for the banner

When to use

  • use on homepage or landing pages to increase the visual hierarchy of a message or page
  • use on pages that are high in the information architecture (usually parent pages) to highlight topics and link to related pages

When not to use

  • do not use for large pieces of content - use Featured item instead