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%
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:
<link media="all" href="[ CDN Folder Path ]/css/customer/portal.css" rel="stylesheet" />
<!--[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:
<link media="all" href="[ CDN Folder Path ]/css/customer/extension-myaviva.css" rel="stylesheet" />
<!--[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%
<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 |