Faculty/Staff Search

OR

Department/Unit Search

  1. Home
  2. Digital Resources
  3. Cascade Design Library
  4. Hero Banners

Hero Banners

Homepage    Full width    Left Navigation    News Article

Hero banners create a strong visual impact with bold imagery and caption, reinforcing the theme of its content. Hero banners can be used on all page types, with separate mobile specific images ensuring an optimized responsive experience.
Example image of the hero banner component
Image Banner Live Example Video Banner Live Example

Homepage Dimensions:

  • Desktop: 1920 x 600 pixels
  • Mobile: 800 x 800 pixels
  • Image crop: position subjects in the centre of the image, to ensure the focal point of the image is visible when scaled to different screen sizes

Interior Page Dimensions:

  • Desktop: 1920 x 450 pixels
  • Mobile: 800 x 800 pixels
  • Image crop: position subjects in the centre of the image, to ensure the focal point of the image is visible when scaled to different screen sizes