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 you would like to use as the page title.
• SuperTitle - A string of text that will appear above the page 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
• Hero Layout - Use to swap between whether the CTA in the top right is a link, or opens a form.
• Subtitle - Text displayed below the main page title.
• Light Subtitle - Additional text displayed below the subtitle.
• Link URL - Link the CTA in the top right uses.
• Link Text - Text displayed on the CTA button.
• Hero Height - Choose between Standard and Thin. Thin reduces the amount of padding at the top of the hero as shown in the second example at the top of the page. The first example at the top of the page uses the Standard configuration.
• Divider Position - Choose from Above Title, Below Title or None. The first example on this page uses the Above Title setting, and the second uses Below Title.
• Divider Colour - Choose from Blue or Yellow. The first example on this page uses Yellow, and the second uses Blue.

Back To Component Library