The Hero Banner is a page title component for Panel pages. It outputs a <h1> element for the page title overlaying an image, and can optionally have 1-3 action buttons. Only one Hero Banner should be used per page and it should ideally be the first component on the page.


Step 1

Hover the mouse pointer over the right-hand corner of the hero banner pane to display the Edit cog (Edit menu icon). Click the icon to display the menu and click Edit to open.

edit hero banner

Step 2

The configuration form for the hero banner component displays.  

  1. Title - the title of the home page can contain a message.  Words on hero banners on other panel pages should be minimised to one single words where possible.
  2. Image - the minimum image dimensions should be 2560px X 560px.
  3. Caption - for the purposes of attributing the image as per the copyright of the image.
  4. Layout - select between the default and thin banner
  5. Theme (tint) - choose between none, dark or light tint to overlay the image.
  6. Text - depending on the selected tint, choose the text light or dark to ensure sufficient contrast between the text and image to improve legibility.

Edit the hero banner

  1. Links - insert relative path links when linking to content on the site. If required, select between 1, 2 or 3 links.
  2. Save the changes.

save hero banner

Step 1

Click Customize this page to start adding components to a panel page.

Customise this page

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Click plus to add a component

Step 3

The available components display. Click on the UQ category and then select the Hero Banner component to open the configuration form.

Select Hero Banner from the UQ Content types category

Step 4

The configuration form for the Hero Banner displays.  Complete the fields before clicking Finish.

  1. Title - insert a title for the component
  2. Image - select an upload an image from your computer

configure hero banner 1-2


  1. Layout - retain the default banner or select a thinner banner.
  2. Theme - retain the theme or add a dark or light tint.
  3. Text - retain light text or change to dark text

dark theme light text

  1. If the Hero banner has three links, insert the title and URL for the links and click Finish.

Tip:  Use a relative reference when linking to content on your website.

Configure hero links

Step 5

The system returns to the panel page In-Place Editor.  Click Save to complete process of adding the component.

Save panel page changes


The completed component displays.

completed hero banner