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.

This hero block was specifically designed with styles for Lens products in mind. As such, it should only be used for Lens pages.

Example

Fields

• Background Image - The image covering the background. Ensure this is a landscape image so that it's not stretched.
• Form - The form that appears when the user clicks the CTA in the top right. Is only used if "Hero Layout" property is set to "Using Form"
• 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.
• Link URL - Link the CTA in the top right uses. Is only used when the "Hero Layout" property is set to "Using CTA".
• Link Text - Text that appears inside the CTA when the "Hero Layout" property is set to "Using CTA".
• Title & Title Bold Text - These two fields combine into one string of text, except the "Title Bold Text" shall of course be in bold. So if you wanted the title to be "The power of Lens Upstream" the fields would contain
  Title: The power of
  Title Bold Text: Lens Upstream
• Subitle - Text that appears below the Title and Title Bold Text

Back To Component Library