Hero Image Inspirational

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

Overview / Hero - AF

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.

Left aligned

Center aligned