Homepage Header Image

The homepage banner header appears at the top of the page under the navigation bar as a high-quality background image related to the page's contents. Across OISE websites, their purpose is purely decorative.

In this variant, a call-to-action (CTA) is placed in the content section of the hero banner. The headline should be short and direct, and the CTA should be short and straightforward. There are various background colour and alignment options available for the content section. 

To use this feature, please refrain from using the standard "Page Header" field in the Drupal page editor. Instead, continue scrolling down into the Drupal page's backend until you come across the "Rows" section. From there, please select the "Add Row - One Column, Column 01" dropdown, followed by the "Banner" component.

To ensure proper formatting, it is essential to utilize the "Hide title" function and also ensure that the "Remove Top Padding" and "Remove Container" options are selected in the Row Formatting tab.

Tips & Guidelines

• When to use a Homepage Header Image with a CTA: 
  • To highlight a story, event, program, service, or offering. 
• The recommended character limit for the title is 100 characters (including spaces).  
• The recommended character limit for the CTA is 40 characters (including spaces).
• When choosing a photo you will have the option for your overlapping text box to appear on the left or right side or a notched text box on either side.
• Look for photos where the focal point is balanced with the text area, ensuring that you will not lose any critical visual information by the overlapping or notched text box.