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