Hero - Overview

Purpose

The Hero Section is a prominent, visually engaging component used to introduce key content or messaging at the top of a page. Maintaining consistent hero sections across the site helps reinforce brand identity and ensures a cohesive user experience.

Anatomy

The Hero Section can be broken down into the following elements -

1. Section Heading
   Flexible content options to capture attention and communicate the page’s primary message.

2. Supporting image
   Depending on the type of Hero this is either an image alongside the content, a background image, or an image as part of a carousel.

Variants & States

• Breakpoints: Mobile, Desktop

• Type: Text, Standard (Centre and Left Alignment), Split (Left and Right Alignment), Carousel, Immersive

• Scrim: On, Off

Mobile - Standard

Desktop - Standard