Customer portal product headers

Taxonomic name: PRODUCT-HEADER

Extension: PORTAL

v.4.1.0 - Updated 14/08/18. Archives

Molecule

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

Note: Must not be used on dark accent colours.

Examples

Standard

Mercedes-Benz E-Class

SBA 1234 A

Renew your motor insurance for Mercedes-Benz E-Class (SBA 1234 A)

Vivamus ultricies dui sed lacus rhoncus rhoncus. Nunc vel odio ac nunc imperdiet cursus a eu velit. Maecenas lorem dolor, efficitur vel leo non, fringilla sagittis diam. Curabitur tempor eu tellus eu maximus. Nulla ac nisi et orci elementum volutpat. Pellentesque iaculis, metus ut dictum porta, felis orci gravida nibh, id fringilla risus urna eget nunc. Aliquam non euismod quam. Morbi congue fringilla elit non sollicitudin. Sed lobortis lectus sit amet tortor fringilla, quis tincidunt erat commodo. Mauris in dictum turpis, sed vulputate velit. Etiam sed ullamcorper dui, aliquam volutpat orci. Curabitur aliquet iaculis lorem, id hendrerit sapien fermentum a. Quisque vitae mi molestie justo porta cursus eget id mauris. Donec arcu risus, aliquet et dignissim sit amet, vulputate vitae lorem.

Renault Clio

SBA 5678 A

Vivamus ultricies dui sed lacus rhoncus rhoncus. Nunc vel odio ac nunc imperdiet cursus a eu velit. Maecenas lorem dolor, efficitur vel leo non, fringilla sagittis diam. Curabitur tempor eu tellus eu maximus. Nulla ac nisi et orci elementum volutpat. Pellentesque iaculis, metus ut dictum porta, felis orci gravida nibh, id fringilla risus urna eget nunc. Aliquam non euismod quam. Morbi congue fringilla elit non sollicitudin. Sed lobortis lectus sit amet tortor fringilla, quis tincidunt erat commodo. Mauris in dictum turpis, sed vulputate velit. Etiam sed ullamcorper dui, aliquam volutpat orci. Curabitur aliquet iaculis lorem, id hendrerit sapien fermentum a. Quisque vitae mi molestie justo porta cursus eget id mauris. Donec arcu risus, aliquet et dignissim sit amet, vulputate vitae lorem.

Offer

Private medical insurance

As an existing customer you save 15%

Get a health insurance quote

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 v.3.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]-->

Code Examples

Standard

Mercedes-Benz E-Class

SBA 1234 A

Renew your motor insurance for Mercedes-Benz E-Class (SBA 1234 A)

Vivamus ultricies dui sed lacus rhoncus rhoncus. Nunc vel odio ac nunc imperdiet cursus a eu velit. Maecenas lorem dolor, efficitur vel leo non, fringilla sagittis diam. Curabitur tempor eu tellus eu maximus. Nulla ac nisi et orci elementum volutpat. Pellentesque iaculis, metus ut dictum porta, felis orci gravida nibh, id fringilla risus urna eget nunc. Aliquam non euismod quam. Morbi congue fringilla elit non sollicitudin. Sed lobortis lectus sit amet tortor fringilla, quis tincidunt erat commodo. Mauris in dictum turpis, sed vulputate velit. Etiam sed ullamcorper dui, aliquam volutpat orci. Curabitur aliquet iaculis lorem, id hendrerit sapien fermentum a. Quisque vitae mi molestie justo porta cursus eget id mauris. Donec arcu risus, aliquet et dignissim sit amet, vulputate vitae lorem.

Renault Clio

SBA 5678 A

Vivamus ultricies dui sed lacus rhoncus rhoncus. Nunc vel odio ac nunc imperdiet cursus a eu velit. Maecenas lorem dolor, efficitur vel leo non, fringilla sagittis diam. Curabitur tempor eu tellus eu maximus. Nulla ac nisi et orci elementum volutpat. Pellentesque iaculis, metus ut dictum porta, felis orci gravida nibh, id fringilla risus urna eget nunc. Aliquam non euismod quam. Morbi congue fringilla elit non sollicitudin. Sed lobortis lectus sit amet tortor fringilla, quis tincidunt erat commodo. Mauris in dictum turpis, sed vulputate velit. Etiam sed ullamcorper dui, aliquam volutpat orci. Curabitur aliquet iaculis lorem, id hendrerit sapien fermentum a. Quisque vitae mi molestie justo porta cursus eget id mauris. Donec arcu risus, aliquet et dignissim sit amet, vulputate vitae lorem.

<div class="m-product-header m-product-header--offer">
	<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

Private medical insurance

As an existing customer you save 15%

Get a health insurance quote

<div class="m-product-header m-product-header--offer">
	<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>

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