Hero Split Banner


Inserts a hero image, sometimes called a banner image, along with text and a button to the side

On-page Example

To preview a live example of the component or inspect the code, click the link below

Hero Banner example

Component Specifications

Item/Field Description Required/Optional
Hero Intro Field: Single line text field
Character Recommendation: 35
Wrapping: Wrap to two lines
Size: One- third of s horizontal screen size
Image-Large Aspect Ratio: 4:3
Image Dimensions: 987x738
Size: Two thirds or screen size
Title Title: H1
Character Recommendation: 30
Wrapping: Two lines
Description Field Type: Styled text
Character Recommendation:100
Wrapping: Two lines
Button Text
Button Destination
Field type: Single line text
Character Recommendation: 20
Wrapping: Single line
Number: One button
Mobile Response Image on top NA
Page Placement Full width, page header NA
Accessibility H1 of the page NA

When to Use

  • On a landing page
  • When you have an image that helps brand the topic or subject of the website
  • When you are trying to make a page easier to remember
  • When there is a single news item you would like to highlight

When to Consider Something Else

  • On internal, content heavy pages
  • When there are no distinguishing images available

How to Use

  • Place at the top of your page
  • Optimal Image Dimensions: 987x738  (4:3 aspect ratio)

Accessibility Tips

  • Make sure the link, if used, has text that describes the destination sufficiently, even when out of context.
  • Serves as the H1 of the page