This is a hero block. This block introduces the content below, and in some cases offers the option to display forms, or link users to other content.

Heroes should only ever be used at the top of the page, and there should be no more than one of this block type on a page.

Fields

• Title - The copy that you would like to use for the page title.
• SuperTitle - A string of text that will display above the title.
• Background Image - The image covering the background. Ensure this is a landscape image so that it's not stretched.
• Hero Background Image Scheme - Defines what colour styles the text will use. Make sure to use the scheme that will contrast best with the background image.
  • Dark = White Text
  • Light = Black Text
• Form - The form that appears when the user clicks the CTA in the top right.
• Subitle - Text that appears below the Title text.
• Light Subitle - Text that displays below the Subtitle text.
• Callout Text - Text that will appear within the grey section at the bottom of the hero banner
• Text above button - Area for introductory text above the CTA button in the grey section at the bottom of the banner.
• Button Link - Link used by the CTA in the grey section at the bottom of the banner.
• Hero Height - Choose between Standard and Thin. Thin cuts some padding at the top of the hero banner, as seen in the second example at the top of this page. Both of the other examples use the Standard height.
• Divider Position - Choose between Above Title, Below Title and None. This defines where the divider appears within the banner. The first example on this page uses Below Title, the second example uses Above Title, and the third example uses None.
• Divider Colour - Choose between Blue and Yellow. Either colour is available if the divider is displayed Above Title or Below Title.
• If all of the fields that would appear in the grey section are left empty (i.e. Callout Text, Button Link and Text Above Button) then the grey section will not appear on the banner, as shown in the third example at the top of the page.

Back To Component Library