Product header

Design and usage

The button and strap-line / secondary heading are optional.

Note: Must not be used on dark accent colours.

Examples

Standard product header

Interactive example

Code example

<div class="m-product-header [ modifiers ]">
	<div class="m-product-header__headings">
		<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
		<p class="a-heading a-heading--2 a-heading--light">...</p>
	</div>
	<p class="m-product-header__button"><a href="..." class="a-button a-button--primary">...</a></p>
</div>

Offer product header

Interactive example

Code example

<div class="m-product-header m-product-header--offer [ modifiers ]">
	<div class="m-product-header__headings">
		<h2 class="a-heading a-heading--1">...</h2>
		<p class="a-heading a-heading--3 a-heading--light">...</p>
	</div>
	<p class="m-product-header__button"><a href="..." class="a-button a-button--primary">...</a></p>
</div>

Development and test

Notes for developers

The heading type used within the product header should be appropriate to the page's heirarchy.

To highlight a portion of the offer strap-line, use the strong tag.

The text within the button must be descriptive of where the link is going; if there are multiple buttons on the page with the same visible text, ensure there is appropriate visually hidden text to differentiate the links.

Extension component

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

<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/portal.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/portal-unmq.css" rel="stylesheet" />
<![endif]-->
<!--[if IE 9]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/portal-ie9.css" rel="stylesheet" />
<![endif]-->

If using the product tabs that were available prior to v3.5.0 use the following stylesheets:

<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/extension-myaviva.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/extension-myaviva-unmq.css" rel="stylesheet" />
<![endif]-->

Classes overview

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

Class	Outcome	Required	Applied to
`.m-product-header`	Container the header	Yes	`div`
`.m-product-header--first`	Modifier to remove top border from the product header or extra margin if offer header		`.m-product-header`
`.m-product-header--offer`	Modifier to the header for use with offer content		`.m-product-header`
`.m-product-header__headings`	Base style for the container holding the heading and strap-line	Yes	`.m-product-header > div`
`.m-product-header__button`	Base style for the paragraph containing the primary CTA for the offer	Yes	`.m-product-header > p`

Component releases

Added on: v3.0.0 (15/09/17)
Removed on: v5.0.0 (05/10/20)

Latest update:

Component removed to make way for a more modular design and allow the MyAviva project to build, maintain and evolve the design as required.

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