• Molecule
  • CORE COMPONENT
  • Taxonomic name: M-HERO
  • Extension: HEROES
  • Added on: v3.0.0 (15/09/17)
  • Updated on: v2023.01 (28/11/23)

Hero banner

Heroes are banner areas at the top of pages which communicate the personality of our brand and can be a good way to add emotional impact. They usually contain images, and may also be used to showcase a particular product or service.

Design and usage

The default image should always be 3200px x 1800px (using 16:9 ratio) to ensure full browser compatibility. The image should have a 30% #333 overlay to ensure that the hero message is clearly legible over the picture.

  • Refer to the latest Abeille Assurances brand photography guidelines for comprehensive visual design rules.
  • Hero images should only be used on higher level pages, such as home pages and landing pages rather than deeper level content pages.
  • Headlines and sub headers become centred at a mobile view.
  • No more than one primary call to action and one secondary call to action (either secondary button or link) should be used within a hero banner.

Examples

Interactive examples

Hero message centre, no image focus

Hero message left, no image focus

Hero message left, image focus right

Hero message right, image focus left

Hero message centre, image focus centre

Hero message left, image focus top right

Hero message right, image focus top left

Hero message centre, image focus top centre

Hero message centre, no image focus, full height on mobile (EUFI theme only)

Code example

In-line image variant (recommended)

<div class="m-hero-wrapper">
	<div class="m-hero 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">
				<h1 class="a-heading a-heading--0 a-heading--semibold">...</h1>
				<p class="a-heading a-heading--2 a-heading--light">...</p>
			</div>
			<div class="m-hero-message__button">
				<ul class="m-button-group"><li class="m-button-group__item">
					<li class="m-button-group__item">
						<button class="a-button a-button--primary">...<span class="u-hidden--visually">...</span></button>
					</li>
					<li class="m-button-group__item">
						<button class="a-button a-button--secondary">...<span class="u-hidden--visually">...</span></button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Background image variant

.m-hero--[ hero name ] {
	background-image: url(...);
}
<div class="m-hero-wrapper">
	<div class="m-hero t-accent-dark [ Background image class ] [ Modifier ]">
		<div class="m-hero-message">
			<div class="m-hero-message__text ">
				<h1 class="a-heading a-heading--0 a-heading--semibold">...</h1>
				<p class="a-heading a-heading--2 a-heading--light">...</p>
			</div>			<!-- Insert optional breadcrumb here -->			<div class="m-hero-message__button">
				<ul class="m-button-group">
					<li class="m-button-group__item">
						<button class="a-button a-button--primary">...<span class="u-hidden--visually">...</span></button>
					</li>
					<li class="m-button-group__item">
						<button class="a-button a-button--secondary">...<span class="u-hidden--visually">...</span></button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Hero 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.

Hero with highlight bar

Structure

  • The hero lock up consists of a H1 at 70px Desktop, 68px Tablet and 42px Mobile
  • The hero mirrors the rules of the Framework hero (allowing for molecules such as; H3s and CTAs etc)
  • 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;
    • Desktop and tablet 180px
    • Mobile 108px
  • Yellow bar height;
    • Desktop and tablet 24px
    • Mobile 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.

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.

Message

Always use class .a-heading--0 for the title heading of the 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.

Visible labels and accessible names

When a button within a hero needs to be more descriptive of what it is or where it is going, but there is a requirement to show simplified text, then an extra span with the class u-hidden--visually is required within the a tag to hold the hidden text required to make the accessible name for the label meaningful to screen readers. The visible label should always come first, with the hidden text following on to extend this by adding meaning and context, for example:

<button class="a-button a-button--primary" href="...">Find out more<span class="u-hidden--visually"> about car insurance</span></button>

This also helps to ensure that all buttons and links are unique through the page, rather than having multiple instances of links simply saying "Read more".

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 with vertically and horizontally centred hero message, no image focus 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--text-align-left Modifier for vertically centred but left aligned hero message, no image focus   .m-hero Hero image has right aligned responsive scaling with no text margins
.m-hero--focus-top-left Modifier for pulling image focus to top left with right aligned hero message   .m-hero Hero image has left aligned responsive scaling with left aligned text margin
.m-hero--focus-left Modifier for pulling image focus to centre left with right aligned hero message   .m-hero Hero image has left aligned responsive scaling with left aligned text margin
.m-hero--focus-bottom-left Modifier for pulling image focus to bottom left with right aligned hero message   .m-hero Hero image has left aligned responsive scaling with left aligned text margin
.m-hero--focus-top-centre Modifier for pulling image focus to top with centrally aligned hero message   .m-hero Hero image has centred responsive scaling with central text margin where available
.m-hero--focus-center Modifier for central image focus with centrally aligned hero message and a   .m-hero Hero image has centred responsive scaling with central text margin where available
.m-hero--focus-bottom-centre Modifier for pulling image focus to bottom with centrally aligned hero message   .m-hero Hero image has centred responsive scaling with central text margin where available
.m-hero--focus-top-right Modifier for pulling image focus to top right with left aligned hero message   .m-hero Hero image has right aligned responsive scaling with right aligned text margin
.m-hero--focus-right Modifier for pulling image focus to centre right with left aligned hero message   .m-hero Hero image has right aligned responsive scaling with right aligned text margin
.m-hero--focus-bottom-right Modifier for pulling image focus to bottom right with left aligned hero message   .m-hero Hero image has right aligned responsive scaling with right aligned text margin
.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 H0   .m-hero  
.m-hero--full-height-mobile Modifier to make the hero banner take up the full height of the screen on mobile   .m-hero Only available with EUFI theme
.m-hero__image Container for inline hero image Yes .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  
.m-hero-message__button Container for buttons to come after the hero message Yes .m-hero-message__text + div Only include if a button is required

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: v3.0.0 (15/09/17)
  • Updated on: v2023.01 (28/11/23)

Latest update:

  • updated: Add a modifier to make the hero banner take up the full height of the screen on mobile, only available with EUFI theme.

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