Taxonomic name: M-HERO-SHALLOW
Extension: HEROES
Added on: v4.6.0 (01/02/19)
Updated on: v5.8.0 (15/06/21)

Shallow hero banner

Design and usage

A hero image may be used to communicate personality and add emotional impact, when not needed the background accent colour version can be used.

The banner has a fixed height for each breakpoint.

Structure

Hero component has a fixed height on Desktop of 360px
Hero component has a fixed height on Tablet of 225px
Hero component has a fixed height on Mobile of 200px
Can use either an image or a background colour of #1A61BD
All content is left aligned to the grid and begin in column 1
Heading groups are centred vertically within the hero component on desktop and tablet and on mobile are aligned 20px from the bottom
A breadcrumb sits at the top pf the hero area below the masthead
The heading groups follow the same width rules as standard copy across break points (Desktop: 9 cols, Tablet: 7 cols, Mobile: 4 cols)
Images have an #333 overlay at 30% opacity
Use images with a 16:9 ratio at 3200px x 1800px, the ideal image has its important content centred within the image on the horizontal axis
Images occupy 100% of the browser width and can have a focus point. They can be pinned to the top, middle or bottom of the hero component (set to middle by default)
Keep copy to a minimum in the hero
PROHIBITED: Do not use buttons or links (other than the breadcrumb) in the hero
PROHIBITED: Do not use the video content in the hero
PROHIBITED: Use of background colours that aren't specified above

Content variations

H1 semibold only
H1 semibold and H2 Light
H1 semibold and H3 Light
H1 semibold and H2 Light with breadcrumb
H1 semibold and H3 Light with breadcrumb

Accessibility and screen readers

A gradient is placed behind the breadcrumb to increase the text contrast against the image background in order to preserve legibility; this gradient should be preserved even if an image appears fine, as areas of mixed contrast may become an issue as screen size is reduced. If, however, you are certain that this will not be an issue, then the class .m-hero--no-gradient can be added to drop the gradient.

Examples

Interactive examples

H1 with no image

H1 with image

H1 and H2 combination with image focus top

H1 and H2 combination with image focus bottom

Code example

No image variant

<div class="m-hero-wrapper">
	<div class="m-hero m-hero-shallow m-hero-shallow--no-image t-accent-dark t-accent-dark--1">
		<!-- Insert optional breadcrumb here -->
		<div class="m-hero-message">
			<div class="m-hero-message__text">
				<!-- Insert optional wayfinder here -->
				<h1 class="a-heading a-heading--1 a-heading--semibold">...</h1>
				<p class="a-heading a-heading--2 a-heading--light">...</p>
			</div>
		</div>
	</div>
</div>

In-line image variant (recommended)

<div class="m-hero-wrapper">
	<div class="m-hero m-hero-shallow t-accent-dark m-hero--objectfit [ Modifier ]" data-module="u-objectfit">
		<picture class="m-hero__image">
			<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
			...
			<source type="image/webp" srcset="..." width="..." height="..." />
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
		<!-- Insert optional breadcrumb here -->
		<div class="m-hero-message">
			<div class="m-hero-message__text">
				<!-- Insert optional wayfinder here -->
				<h1 class="a-heading a-heading--1 a-heading--semibold">...</h1>
				<p class="a-heading a-heading--2 a-heading--light">...</p>
			</div>
		</div>
	</div>
</div>

Background image variant

.m-hero--[ hero name ] {
	background-image: url(...);
}

<div class="m-hero-wrapper">
	<div class="m-hero m-hero-shallow t-accent-dark [ Background image class ] [ Modifier ]">
		<!-- Insert optional breadcrumb here -->
		<div class="m-hero-message">
			<div class="m-hero-message__text ">
				<!-- Insert optional wayfinder here -->
				<h1 class="a-heading a-heading--1 a-heading--semibold">...</h1>
				<p class="a-heading a-heading--2 a-heading--light">...</p>
			</div>
		</div>
	</div>
</div>

With breadcrumb

Accessibility and screen readers

A gradient is placed behind the breadcrumb to increase the text contrast against the image background in order to preserve legibility; this gradient should be preserved even if an image appears fine, as areas of mixed contrast may become an issue as screen size is reduced. If, however, you are certain that this will not be an issue, then the class .m-hero--no-gradient can be added to drop the gradient.

With wayfinder - DEPRECATED

Wayfinder has been deprecated and been replaced by a new version of the breadcrumb that should be used at the top of pages in place of the wayfinder and the footer variant of the breadcrumb. This change has been made to help with user orientation whilst navigating Abeille Assurances' websites.

With highlight bar

Structure

The hero lock up consists of a H1 at 42px Desktop, 32px Tablet and 42px Mobile
The hero mirrors the rules of the Framework shallow hero (allowing for molecules such as wayfinder)
The hero lock up also has a yellow bar (#FFD900) which is 24px in height on Desktop and Tablet and 14px high on Mobile
The yellow bar has a fixed width of 180px on Desktop and Tablet and 108px on Mobile

Placement

Sits below the Global nav at the top of the page.

Use case and exception scenarios

Abeille Assurances Business level 1 pages.

Design notes

Yellow bar colour: #FFD900
Yellow bar width: 108px
Yellow bar height: 14px

Development and test

Notes for developers

Images

If using a srcset attribute for images, minimum 16:9 ratio image sizes are as follows;

Mobile - 560px wide x 315px high
Tablet - 1296px wide x 729px high
Desktop - 3200px wide x 1800px high

The default image should always be 3200px x 1800px (using 16:9 ratio) to ensure full browser compatibility.

Message

Always use class .a-heading--1 for the title heading of the shallow hero message.

Lazy loading can be applied to hero banners using inline or background images. For how to do this see the lazy loading page for reference.

Breadcrumb

A gradient is placed behind the breadcrumb to increase the text contrast against the image background in order to preserve legibility; this gradient should be preserved even if an image appears fine, as areas of mixed contrast may become an issue as screen size is reduced. If, however, you are certain that this will not be an issue, then the class .m-hero--no-gradient can be added to drop the gradient.

Extension component

This component forms part of the 'heroes' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/heroes.css" rel="stylesheet" />

Notes for testers

Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
Ensure that when hovering over a link the style changes noticeably.
Ensure that when a link has focus the style changes noticeably.
Ensure that text within links is descriptive of what or where the link is going. Additional descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.
Use a screen reader to confirm that the links are understandable.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.m-hero-wrapper`	Base style wrapping container for a hero banner	Yes	`div`	Fixes the min-height bug in IE10-11
`.m-hero`	Base style for hero banner	Yes	`.m-hero-wrapper > div`	Hero image has centred responsive scaling
`.m-hero--no-gradient`	Modifier to remove the dark gradient from behind the breadcrumb where the hero image offers enough contrast at any screen size		`.m-hero`
`.m-hero-shallow`	Modifier to resize hero to the shallow hero dimensions required	Yes	`.m-hero`
`.m-hero-shallow--no-image`	Modifier to remove grey overlay used to highlight text over an image background		`.m-hero-shallow`	Only to be used in conjunction with the specifified background colour #1A61BD
`.m-hero-shallow--focus-top`	Modifier for pulling image focus to top		`.m-hero-shallow`	Hero image has top aligned responsive scaling
`.m-hero-shallow--focus-top`	Modifier for pulling image focus to top		`.m-hero-shallow`	Hero image has top aligned responsive scaling
`.m-hero-shallow--focus-bottom`	Modifier for pulling image focus to bottom		`.m-hero-shallow`	Hero image has bottom aligned responsive scaling
`.m-hero--objectfit`	Modifier for allowing the use of an inline image as the background for the hero		`.m-hero`
`.m-hero--highlight-bar`	Modifier for adding a yellow highlight bar directly below the H1		`.m-hero`
`.m-hero__image`	Container for inline hero image		`.m-hero--objectfit > div`	Should contain a inline image
`.m-hero-message`	Container for hero content	Yes	`.m-hero > div`
`.m-hero-message__text`	Container for hero message text	Yes	`.m-hero-message > div`

Keyboard operations

TAB: Tabbing to an anchor should make the link clearly visually different so that the focus point on the page is obvious to the user
SPACE or ENTER: With focus on an anchor, pressing SPACE or ENTER will open the relevant page.

Component releases

Added on: v4.6.0 (01/02/19)
Updated on: v5.8.0 (15/06/21)

Latest update:

updated: Support for inclusion of a full breacrumb within the hero area has now been added to maintain cross site navigation consistency when using the a breadcrumb at the top of pages instead of the now deprecated footer variant of the breadcrumb.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team