Hero Image Inspirational

A Hero that can be used as a way to introduce the page content and associated actions.

Hero Image Inspirational - Left aligned

Hero Image Inspirational - Left aligned


Anatomy

Hero Image Inspirational anatomy

Hero Image Inspirational anatomy

#

Element type

Element name

Element description

1

Navigation

Breadcrumb

Shows the user’s location and allows navigation to previous pages.

2

Heading

H1 Title

Main heading that conveys the key message of the page.

3

Button

Primary Button

Optional button encouraging user action.

4

Background

Hero Image

A background image that sets the visual tone.


Types

The Hero Image Inspirational component highlights impactful imagery alongside key content. It comes in two layout types: Left aligned and center aligned. In the center aligned version, a nested component can be placed within the content area, providing additional flexibility for showcasing important elements.

Storybook failed to load. Please connect to the VPN to access.

Left aligned

Storybook failed to load. Please connect to the VPN to access.

Center aligned