Migration guide for releases between v2.1.0 and v4.0.0

Any code changes required to move between releases of the front-end Framework successfully are detailed below:

Moving from v3.4.0 to v4.0.0

CSS file updates

The CSS files have moved location and also been renamed and re-organised. Some components have been split out from the main/core CSS files to allow for better page optimisation; developers will now be able to load in a more streamlined core CSS and just the additional CSS files required for their page. For a full breakdown of which components are in which CSS files, see the component categorisation page.

To load in just just the core of Framework, use the following:

<link media="all" href="[ CDN Folder Path ]/css/vendor/normalize/normalize.css" rel="stylesheet" />
<!--[if !IE | gt IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split2.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split.css" rel="stylesheet" />
	<!--[ Insert extension and custom css for all browsers apart from IE8 here ]-->
<!--<![endif]-->
<!--[if IE 9]-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/ie9.css" rel="stylesheet" />
	<!--[ Insert custom IE9 fixes here ]-->
<!--[endif]-->
<!--[if lte IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split2.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split.css" rel="stylesheet" />
	<!--[ Insert extension and custom IE8 styles and fixes here ]-->
<!--[endif]--><link media="print" href="[ CDN Folder Path ]/css/customer/print.css" rel="stylesheet" />
<!--[ Insert custom print styles here ]-->

While assessing which extensions are required for particular pages, developers may wish to load all extensions in order to replicate the v3.X.X setup. To do so, include the following:

<link media="all" href="[ CDN Folder Path ]/css/vendor/normalize/normalize.css" rel="stylesheet" />
<!--[if !IE | gt IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split2.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/additional-help.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/cards-extended.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/cards-functional.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/charts.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-a.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/heros.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/hidden-help.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/media.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/payments.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/quotes.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/reviews.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/supporting-navigation.css" rel="stylesheet" />
	<!--[ Insert custom css for all browsers apart from IE8 here ]-->
<!--[endif]-->
<!--[if IE 9]-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/ie9.css" rel="stylesheet" />
	<!--[ Insert custom IE9 fixes here ]-->
<!--[endif]-->
<!--[if lte IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split2.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/additional-help.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/cards-extended-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/cards-functional-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/charts-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-a-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/heros-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/hidden-help-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/media-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/payments-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/quotes-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/reviews-unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/supporting-navigation-unmq.css" rel="stylesheet" />
	<!--[ Insert custom IE8 styles and fixes here ]-->
<!--[endif]--><link media="print" href="[ CDN Folder Path ]/css/customer/print.css" rel="stylesheet" />
<!--[ Insert custom print styles here ]-->

JavaScript library updates

To ensure that all the latest security fixes are applied to Abeille Assurances websites, we have updated all available vendor libraries to their latest versions. The following table provides a list of the vendor libraries which have been updated, what version they have moved between and any further details required to be able to upgrade smoothly.

Library	Old version	New version	Further notes
jQuery	2.2.2	3.3.1	See the jQuery core 3.0 Upgrade Guide for a details on how to update your JavaScript
jQuery UI	1.12.0	1.12.1	Removed jquery-1-7.js from file
jQuery custom scrollbar	3.1.3	3.1.5	No changes required
Moment	2.14.1	2.22.1	No changes required
Modernizr	3.3.1	3.6.0	No changes required

We recommend upgrading from the following approach of extending the Frameworks require.js config, as the previous version had a potential race condition. Change from:

<script>
	document.addEventListener( 'requireready', function onRequireReady() {
		// Your custom Require config which will be merged with the Frameworks config
		require.config({
			// ...
		});		// Then you can use Require as normal for more flexibility
		require( [ 'jquery' ], function ( $ ) {
			// ...
		});
	});
</script>

Move to the new approach:

<script>
	window.requireExtend = {
		paths : {
			//... custom paths
		},
		// ...
	};
</script>
<script async id="js-init" src="[ CDN Folder Path ]/js/init.js"></script>

Potential breaking change

For those using unobtrusive and/or validator in v3 (and previous); v4 now includes default error placement to match the Frameworks markup. If you have used these previously please check they still work as expected.

Javascript modules removed

a-list-faq
a-autojump
m-agent-callback

CSS class name changes

A few components have had their class names updated to match with our coding standards. The following table provides a mapping for the class names within components.

Component	Original class	New class
Button	a-button__icon a-button__icon--[ Modifier ]	a-button--[ Modifier ]
Full bleed cards	m-card--full-bleed m-card--full-bleed--[ Modifier ]	m-card-full-bleed m-card-full-bleed--[ Modifier ]
Heading group	m-heading-group-underline	m-heading-group--underline
Links	.a-link-icon--document-after .a-link-icon--download-after .a-link-icon--edit-after .a-link-icon--message-after	.a-link-icon--document .a-link-icon--download .a-link-icon--edit .a-link-icon--message
Lists	.a-list-ordered--small	.a-list-ordered
Heading groups	.m-heading-group-underline	.m-heading-group--underline

Icon URL changes

Payment icons have now been moved to being within the icon library and being provided as both PNG and SVG. The URLs have changed from [ CDN Folder Path ]/images/icons/payment-types/... to //cdn.abeille-assurances.fr/static/core/icons/v1/functional/payment-types/[ png or svg ]/...

Component spacing

Many of the components within Framework have had the spacing above and below adjusted to ensure spacing consistency between the individual components.

The main change to note is that the columns layout now by default has a 30px top margin. This can be set to 0 using u-margin--top-none.

Component	Original spacing	New spacing
50:50 split promo	0 above 30px below	30px above 30px below
Audio	0 above 0 below	30px above 30px below
Call us panel	0 above 0 below	30px above (except narrow column variant) 30px below (except narrow column variant)
Cards (all)	0 above 30px below	30px above 30px below
Columns	0 above 30px below	30px above 30px below
Data layout	0 above 40px below	30px above 30px below
Doughnut charts	20px above 20px below	30px above 30px below
Lists	20px above 20px below	30px above 30px below
Frequently Asked Questions panel	0 above 0 below	30px above (except narrow column variant) 30px below (except narrow column variant)
Progress bar	10px above 0 below (15px below if followed by an H2)	15px above 15px below
Quotes	16px above 16px below	30px above 30px below
Show more	0 above 15px below	15px above 15px below
Story deck	20px above 0 below	30px above 30px below
Table	20px above 20px below	30px above 30px below
Tabs (section)	25px above 30px below	30px above 30px below
Video	0 above 0 below	30px above 30px below

Form legends

Form legends were previously often wrapped within a span to assist with floating aditional elements (principally links) to their right; this has found to cause problems with various browsers, so has been altered. Thus:

<span class="a-label"><legend>...</legend></span>

has been replaced by:

<legend class="a-label">...</legend>

Form controls affected by this change may include:

Checkbox groups
Date range
File upload
Checkbox multiselect
Slider range
Textbox group
Wallet - this also needs additional changes, with the .o-wallet__section-heading class moving directly on to the legend tag alongside the .a-label class

Please be sure to check all form controls, as exact use cases may mean that other controls are affected in certain instances.

Plus/Minus number textbox

The data-module="a-plusminus" was previously positioned outside the input element.

<div class="m-form-row__content" data-module="a-plusminus">
	<input type="number" id="..." name="..." class="a-textbox" value="..." min="..." max="..." />
</div>

It is now positioned within the input element to match other JavaScript-enabled components.

<div class="m-form-row__content">
	<input type="number" id="..." name="..." class="a-textbox" value="..." min="..." max="..." data-module="a-plusminus" />
</div>

Segmented controls

Prior to v4.0.0, pictorial segmented controls used individual default and checked background images with CSS class names.

<ul class="m-radio-group m-radio-group--pictorial m-radio-group--3 data-module="m-radio-segmented">
	<li class="m-radio-group__item [ Image class ]">
		<label class="a-radio" for="...">
			<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
			<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
			<span class="a-radio__ui"></span>
		</label>
	</li>
	<li class="m-radio-group__item [ Image class ]">
		<label class="a-radio" for="...">
			<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
			<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
			<span class="a-radio__ui"></span>
		</label>
	</li>
	<li class="m-radio-group__item [ Image class ]">
		<label class="a-radio" for="...">
			<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
			<span class="a-radio__label"><span class="a-radio__label-inner">...</span></span>
			<span class="a-radio__ui"></span>
		</label>
	</li>
</ul>

.m-radio-group--pictorial [ Image class ] .a-radio__input ~ .a-radio__label:after {
	background-image: url(...);
}
.svg .m-radio-group--pictorial [ Image class ] .a-radio__input + .a-radio__label:after {
	background-image: url(...);
}
.m-radio-group--pictorial [ Image class ] .a-radio__input:checked ~ .a-radio__label:after {
	background-image: url(...);
}
.svg .m-radio-group--pictorial [ Image class ] .a-radio__input:checked + .a-radio__label:after {
	background-image: url(...);
}

Inline sprite images are now used within the HTML, reducing page weight and load times.

<ul class="m-radio-group m-radio-group--pictorial m-radio-group--3 data-module="m-radio-segmented"">
	<li class="m-radio-group__item">
		<label class="a-radio" for="...">
			<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
			<span class="a-radio__label">
				<span class="a-radio__label-image">
					<img src="..." alt="" />
				</span>
				<span class="a-radio__label-inner">...</span>
			</span>
			<span class="a-radio__ui"></span>
		</label>
	</li>
	<li class="m-radio-group__item">
		<label class="a-radio" for="...">
			<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
			<span class="a-radio__label">
				<span class="a-radio__label-image">
					<img src="..." alt="" />
				</span>
				<span class="a-radio__label-inner">...</span>
			</span>
			<span class="a-radio__ui"></span>
		</label>
	</li>
	<li class="m-radio-group__item">
		<label class="a-radio" for="...">
			<input class="a-radio__input" type="radio" name="..." id="..." value="..." />
			<span class="a-radio__label">
				<span class="a-radio__label-image">
					<img src="..." alt="" />
				</span>
				<span class="a-radio__label-inner">...</span>
			</span>
			<span class="a-radio__ui"></span>
		</label>
	</li>
</ul>

Social link list

The hit target for each of the social links was increased to improve usage on touch devices, accessibility and comply with WCAG guidelines.

The markup was updated to aid in maintainance following this change. The markup used to be:

<ul class="a-social-links a-list-plain">
	<li><a class="a-social-links__icon [ Modifier ]" href="..." itemprop="sameAs">...</a></li>
	...
</ul>

The markup is now:

<ul class="a-social-links a-list-plain">
	<li><a class="a-social-links__icon [ Modifier ]" href="..." itemprop="sameAs"><span>...</span></a></li>
	...
</ul>

Footer

The hit target for each of the links was increased to improve usage on touch devices, accessibility and comply with WCAG guidelines.

The markup was updated to assist in this update. The markup used to be:

<footer class="m-footer t-accent-dark" role="contentinfo">
	<div class="l-content-container">
		<p class="a-wayfinder a-wayfinder--footer" itemscope itemtype="https://schema.org/BreadcrumbList">
			<span class="u-hidden--visually">You are currently within </span>
			<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="item" itemscope itemtype="https://schema.org/WebPage"><a class="a-wayfinder__link" href="..." itemprop="url"><span class="a-wayfinder__title" itemprop="name">...</span></a></span><meta itemprop="position" content="1" /></span>
			<span class="a-wayfinder__separator">&gt;</span>
			...
			<span class="a-wayfinder__current">Current page</span>
		</p>
		<div class="l-columns l-columns--4-medium l-columns--5-large m-footer__lists">
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--social">
				<ul class="a-list-plain m-footer__list a-social-links">
					<li><a class="a-social-links__icon a-social-links__icon--facebook" href="..." itemprop="sameAs">Facebook</a></li>
					<li><a class="a-social-links__icon a-social-links__icon--twitter" href="..." itemprop="sameAs">Twitter</a></li>
					<li><a class="a-social-links__icon a-social-links__icon--youtube" href="..." itemprop="sameAs">YouTube</a></li>
					<li><a class="a-social-links__icon a-social-links__icon--google" href="..." itemprop="sameAs">Google+</a></li>
					...
				</ul>
			</div>
		</div>
		<div class="l-columns l-columns--1-medium l-columns--1-large m-footer__lists">
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<ul class="a-list-plain m-footer__list m-footer__list--legal">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<ul class="a-list-plain m-footer__list m-footer__list--copyright">
					<li>...</li>
					<li>&copy; Abeille Assurances 2021</li>
				</ul>
			</div>
		</div>
	</div>
</footer>

The markup is now:

<footer class="m-footer t-accent-dark" role="contentinfo">
	<div class="l-content-container">
		<p class="a-wayfinder a-wayfinder--footer" itemscope itemtype="https://schema.org/BreadcrumbList">
			<span class="u-hidden--visually">You are currently within </span>
			<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="item" itemscope itemtype="https://schema.org/WebPage"><a class="a-wayfinder__link" href="..." itemprop="url"><span class="a-wayfinder__title" itemprop="name">...</span></a></span><meta itemprop="position" content="1" /></span>
			<span class="a-wayfinder__separator">&gt;</span>
			...
			<span class="a-wayfinder__current">Current page</span>
		</p>
		<div class="l-columns l-columns--4-medium l-columns--5-large m-footer__lists">
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
				<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--social">
				<ul class="a-list-plain m-footer__list a-social-links">
					<li><a class="a-social-links__icon a-social-links__icon--[ Modifer ]" href="..." itemprop="sameAs"><span>...</span></a></li>
					...
				</ul>
			</div>
		</div>
		<div class="l-columns l-columns--1-medium l-columns--1-large m-footer__lists">
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<ul class="a-list-plain m-footer__list m-footer__list--legal">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<ul class="a-list-plain m-footer__list m-footer__list--copyright">
					<li>...</li>
					<li>&copy; 2021 Aviva</li>
				</ul>
			</div>
		</div>
	</div>
</footer>

Masthead

The markup for links within the mega dropdowns has been updated in readiness for accessibility changes. Markup for the megamenu items used to be:

<!-- Main navigation content start -->
<div class="o-masthead-navigation t-accent-light t-accent-light--white u-clear--inner">
	<div class="l-content-container">
		<!-- Search start -->
		<form id="search" class="m-site-search l-max l-max--8-column-large" action="..." method="get" role="search" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction">
			<fieldset>
				<legend>Search</legend>
				<meta itemprop="target" content="..." />				<label for="q" class="u-hidden--visually">Search site</label>
				<input type="search" name="..." id="..." value="" itemprop="query-input" class="m-site-search__input" placeholder="Type your question here..." />
				<button id="..." type="submit" class="m-site-search__button">Search</button>
			</fieldset>
		</form>
		<!-- Search end -->		<!-- Log in start -->
		<div id="login" class="o-masthead-login l-max l-max--6-column-medium l-max--6-column-large">
			<h2 class="u-hidden--visually">Log in or register</h2>
			<ul class="a-list-plain o-masthead-login__link-list">
				<li><a class="a-button a-button--full-width a-button--primary" href="...">Log in</a></li>
				<li class="o-masthead-login__link-list-divider"><span>or</span></li>
				<li><a class="a-button a-button--full-width" href="...">Register</a></li>
			</ul>
		</div>
		<!-- Log in end -->		<!-- Logged in start -->
		<div id="loggedin" class="o-masthead-logged-in">
			<h2 class="u-hidden--visually">Your account</h2>
			<div class="o-masthead-logged-in__content">
				<p class="o-masthead-logged-in-title"><span class="o-masthead-logged-in-title__name">Hi ...</span><span class="u-hidden--visually">, </span><span class="o-masthead-logged-in-title__application">Your account</span></p>
				<ul class="a-list-plain">
					<li><a href="...">...</a></li>
					...
					<li class="o-masthead-logged-in__logout"><a href="...">Log out</a></li>
				</ul>
			</div>
			<div class="o-masthead-support">
				<div class="o-masthead-support__inner">
					<h4 class="o-masthead-support__heading a-heading a-heading--3">Get support</h4>
					<ul class="o-masthead-support__list a-list-plain">
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact" aria-label="..." ><span>Contact us</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim" aria-label="..." ><span>Make a claim</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq" aria-label="..." ><span>FAQs</span></a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- Logged in end -->		<!-- Primary nav start -->
		<nav id="nav" role="navigation" class="m-primary-navigation">
			<h2 class="u-hidden--visually">Site navigation</h2>
			<!-- Repeatable navigation sections start -->
			<div class="m-primary-navigation__section [ Modifier ]">
				<h3 class="m-primary-navigation__section-heading a-heading a-heading--3"><a href="#example">...</a></h3>
				<div class="l-columns l-columns--3-medium l-columns--5-large">
					<!-- Standard column of links -->
					<div class="l-columns__column m-primary-navigation-sub-section">
						<h4 class="a-heading a-heading--3 m-primary-navigation-sub-section__heading">...</h4>
						<ul class="a-list-plain m-primary-navigation-sub-section__link-list">
							<!-- Optional sub-section description -->
							<li class="m-primary-navigation-sub-section__description">...</li>
							<!-- End optional sub-section description -->
							<li><a href="...">...</a></li>
						</ul>
					</div>					<!-- Optional card column (always last) -->
					<div class="l-columns__column m-card t-accent-light t-accent-light--grey">
						<div class="m-card-content">
							<div class="m-card-content__inner m-card-content__inner--top">
								<h4 class="a-heading a-heading--3 a-heading--semibold">...</h4>
								<p>...</p>
							</div>
							<div class="m-card-content__inner m-card-content__inner--bottom">
								<p><a class="a-button a-button--primary" href="...">...</a></p>
							</div>
						</div>
					</div>
				</div>
				<a class="m-primary-navigation-sub-section__link" href="...">View all ... products</a>
				<div class="o-masthead-support">
					<div class="o-masthead-support__inner">
						<h4 class="o-masthead-support__heading a-heading a-heading--3">Get support</h4>
						<ul class="o-masthead-support__list a-list-plain">
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact" aria-label="..." ><span>Contact us</span></a></li>
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim" aria-label="..." ><span>Make a claim</span></a></li>
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq" aria-label="..." ><span>FAQs</span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- Repeatable navigation sections end -->
			<div class="o-masthead-support">
				<div class="o-masthead-support__inner">
					<h3 class="o-masthead-support__heading a-heading a-heading--3">Get support</h3>
					<ul class="o-masthead-support__list a-list-plain">
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact"><span>Contact us</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim"><span>Make a claim</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq"><span>FAQs</span></a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- Primary nav end -->	</div>
</div>
<!-- Main navigation content end -->

Markup is now:

<!-- Main navigation content start -->
<div class="o-masthead-navigation u-clear--inner">
	<div class="l-content-container">
		<!-- Search start -->
		<form id="search" class="m-site-search l-max l-max--8-column-large" action="..." method="get" role="search" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction">
			<fieldset>
				<legend>Search</legend>
				<meta itemprop="target" content="..." />				<label for="q" class="u-hidden--visually">Search site</label>
				<input type="search" name="..." id="..." value="" itemprop="query-input" class="m-site-search__input" placeholder="Type your question here..." />
				<button id="..." type="submit" class="m-site-search__button">Search</button>
			</fieldset>
		</form>
		<!-- Search end -->		<!-- Logged in start -->
		<div id="loggedin" class="o-masthead-logged-in">
			<h2 class="u-hidden--visually">Your account</h2>
			<div class="o-masthead-logged-in__content">
				<p class="o-masthead-logged-in-title"><span class="o-masthead-logged-in-title__name">Hi ...</span><span class="u-hidden--visually">, </span><span class="o-masthead-logged-in-title__application">Your account</span></p>
				<ul class="a-list-plain">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
					...
					<li class="o-masthead-logged-in__logout"><a href="...">Log out</a></li>
				</ul>
			</div>
			<div class="o-masthead-support">
				<div class="o-masthead-support__inner">
					<h4 class="o-masthead-support__heading a-heading a-heading--3">Get support</h4>
					<ul class="o-masthead-support__list a-list-plain">
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact" aria-label="..." ><span>Contact us</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim" aria-label="..." ><span>Make a claim</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq" aria-label="..." ><span>FAQs</span></a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- Logged in end -->		<!-- Primary nav start -->
		<nav id="nav" role="navigation" class="m-primary-navigation">
			<h2 class="u-hidden--visually">Site navigation</h2>
			<!-- Repeatable navigation sections start -->
			<div class="m-primary-navigation__section">
				<h3 class="m-primary-navigation__section-heading a-heading a-heading--3"><a href="#example">...</a></h3>
				<div class="l-columns l-columns--3-medium l-columns--5-large">
					<!-- Standard column of links -->
					<div class="l-columns__column m-primary-navigation-sub-section">
						<h4 class="a-heading a-heading--3 m-primary-navigation-sub-section__heading">...</h4>
						<ul class="a-list-plain m-primary-navigation-sub-section__link-list">
							<!-- Optional sub-section description -->
							<li class="m-primary-navigation-sub-section__description">...</li>
							<!-- End optional sub-section description -->
							<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
						</ul>
					</div>					<!-- Optional card column (always last) -->
					<div class="l-columns__column m-card t-accent-light t-accent-light--3">
						<div class="m-card-content">
							<div class="m-card-content__inner m-card-content__inner--top">
								<h4 class="a-heading a-heading--3 a-heading--semibold">...</h4>
								<p>...</p>
							</div>
							<div class="m-card-content__inner m-card-content__inner--bottom">
								<p><a class="a-button a-button--primary" href="...">...</a></p>
							</div>
						</div>
					</div>
				</div>
				<a class="m-primary-navigation-sub-section__link a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">View all ... products</span></a>
				<div class="o-masthead-support">
					<div class="o-masthead-support__inner">
						<h4 class="o-masthead-support__heading a-heading a-heading--3">Get support</h4>
						<ul class="o-masthead-support__list a-list-plain">
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact" aria-label="..." ><span>Contact us</span></a></li>
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim" aria-label="..." ><span>Make a claim</span></a></li>
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq" aria-label="..." ><span>FAQs</span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- Repeatable navigation sections end -->
			<div class="o-masthead-support">
				<div class="o-masthead-support__inner">
					<h3 class="o-masthead-support__heading a-heading a-heading--3">Get support</h3>
					<ul class="o-masthead-support__list a-list-plain">
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact"><span>Contact us</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim"><span>Make a claim</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq"><span>FAQs</span></a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- Primary nav end -->	</div>
</div>
<!-- Main navigation content end -->

Moving from v3.1.0 to v3.2.0

There are some additional settings that can be added to the base template to improve page performance.

Add in relevant DNS prefetch domains before the favicon tag. The minimum prefetch tag is shown below, for further details on the others that should be included please see the base template reference.

<!-- DNS prefetch -->
<link rel="dns-prefetch" href="https://cdn.abeille-assurances.fr/" />

The async attribute should be set on the script tags loading in Modernizr and init.

<script async src="[ CDN Folder Path ]/js/vendor/core/modernizr.js"></script>

<script async id="js-init" src="[ CDN Folder Path ]/js/init.js"></script>

Moving from v3.0.0 to v3.1.0

The core CSS has had to be split into three files to maintain support for older browsers.

<link media="all" href="[ CDN Folder Path ]/css/vendor/normalize/normalize.css" rel="stylesheet" />
<!--[if !IE | gt IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/postcss-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/postcss-split.css" rel="stylesheet" />
	<!--[ Insert custom css for all browsers apart from IE8 here ]-->
<!--[endif]-->
<!--[if IE 9]-->
	<link media="all" href="[ CDN Folder Path ]/css/ie9.css" rel="stylesheet" />
	<!--[ Insert custom IE9 fixes here ]-->
<!--[endif]-->
<!--[if lte IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq-split.css" rel="stylesheet" />
	<!--[ Insert custom IE8 styles and fixes here ]-->
<!--[endif]--><link media="print" href="[ CDN Folder Path ]/css/print.css" rel="stylesheet" />
<!--[ Insert custom print styles here ]-->

Changes to:

<link media="all" href="[ CDN Folder Path ]/css/vendor/normalize/normalize.css" rel="stylesheet" />
<!--[if !IE | gt IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/postcss-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/postcss-split2.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/postcss-split.css" rel="stylesheet" />
	<!--[ Insert custom css for all browsers apart from IE8 here ]-->
<!--[endif]-->
<!--[if IE 9]-->
	<link media="all" href="[ CDN Folder Path ]/css/ie9.css" rel="stylesheet" />
	<!--[ Insert custom IE9 fixes here ]-->
<!--[endif]-->
<!--[if lte IE 8]-->
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq-split2.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq-split.css" rel="stylesheet" />
	<!--[ Insert custom IE8 styles and fixes here ]-->
<!--[endif]--><link media="print" href="[ CDN Folder Path ]/css/print.css" rel="stylesheet" />
<!--[ Insert custom print styles here ]-->

To improve the accessibility of the Abeille Assurances logo link the code can be changed from:

<a class="o-masthead-logo__link" href="..."><img class="o-masthead-logo__image" src="./assets/images/logo/aviva-logo.png" alt="AVIVA" /></a>

to:

<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./assets/images/logo/aviva-logo.png" alt="AVIVA" /></a>

Moving from Beta v2.1.0 to v3.0.0

CSS class name changes

Many components have had their class names updated to match with our coding standards. The following table provides a mapping for the class names within components.

Component	Original class	New class
Base template - v3	whole-page	l-whole-page
Body copy - v3	text-highlight text-highlight--[ Modifier ] text-icon text-icon--[ Modifier ] dividing-text	a-text-highlight a-text-highlight--[ Modifier ] a-text-icon a-text-icon--[ Modifier ] a-text-dividing
Breadcrumb - v3	breadcrumb breadcrumb__link breadcrumb__current breadcrumb__gt	a-breadcrumb a-breadcrumb__link a-breadcrumb__current a-breadcrumb__separator
Buttons and button groups - v3	btn btn--[ Modifier ] btn--input__inner btn-group btn-group--[ Modifier ] btn-group__item btn-group__item--prev	a-button a-button--[ Modifier ] a-button__inner m-button-group m-button-group--[ Modifier ] m-button-group__item m-button-group__item--previous
Cards agent - v3	agent-profile agent-profile--last agent-profile__section-1 agent-profile__job-title agent-profile__rating agent-profile__review-link agent-profile__section-2 agent-profile__image agent-profile__btn agent-profile__section-3 agent-profile__section-4	m-agent-profile m-agent-profile--last m-agent-profile__section-1 m-agent-profile__job-title m-agent-profile__rating m-agent-profile__review-link m-agent-profile__section-2 m-agent-profile__image m-agent-profile__button m-agent-profile__section-3 m-agent-profile__section-4
Cards agent callback - v3	agent-callback-wrapper agent-callback agent-callback--open agent-callback__close-btn	m-agent-callback-wrapper m-agent-callback m-agent-callback--open m-agent-callback__close-button
Cards download - v3	m-card--download--list download-list download-list--[ Modifier ] download-list-item download-list-item__inner	m-card--download-list m-card-download-list m-card-download-list--[ Modifier ] m-card-download-list-item m-card-download-list-item__inner
Cards icon - v3	m-card-icon	m-card--icon
Cards notification - v3	m-card--notification m-card--notification-[ Modifier ]	m-card-notification m-card-notification--[ Modifier ]
Contextual help - v3	contextual-help contextual-help--[ Modifier ] contextual-help-group-heading contextual-help-group-heading__option contextual-help__group contextual-help__content	o-contextual-help o-contextual-help--[ Modifier ] o-contextual-help-group-heading o-contextual-help-group-heading__option o-contextual-help__group o-contextual-help__content
Customer portal product tabs - v3	product-tabs product-tabs--four product-tabs__tab product-tabs__group-heading product-tab-category product-tab-category--[ Modifier ] product-tab-category__heading product-tab-category__description product-tab-category__link product-tab-category__label product-tab-category__tab-content	o-product-tabs o-product-tabs--four o-product-tabs__tab o-product-tabs__group-heading o-product-tab-category o-product-tab-category--[ Modifier ] o-product-tab-category__heading o-product-tab-category__description o-product-tab-category__link o-product-tab-category__label o-product-tab-category__tab-content
Customer portal product headers - v3	product-header product-header--[ Modifier ] product-header__headings product-header__btn	m-product-header m-product-header--[ Modifier ] m-product-header__headings m-product-header__button
Data layout - v3	data-group data-group--2col data-group--4col data-group-item data-group-item__title data-group-item__data	m-data-group m-data-group--2-column m-data-group--4-column m-data-group-item m-data-group-item__title m-data-group-item__data
FAQ question list - v3	faq-list faq-list__question faq-list__answer faq-list-back-link	a-list-faq a-list-faq__question a-list-faq__answer a-list-faq-back-link
File upload - v3	a-form-file-upload a-form-file-upload__input a-form-upload__label	a-file-upload a-file-upload__input a-upload__label
Headings - v3	heading heading--heavy heading-icon heading-icon--[ Modifier ]	a-heading a-heading--semibold a-heading-icon a-heading-icon--[ Modifier ]
Links - v3	link-icon link-icon__inner link-icon--[ Modifier ]	a-link-icon a-link-icon__inner a-link-icon--[ Modifier ]
Lists - v3	ordered-list ordered-list--[ Modifier ] unordered-list unordered-list__item--tick unordered-list__item--cross plain-list definition-list opening-times opening-times__days opening-times__hours	a-list-ordered a-list-ordered--[ Modifier ] a-list-unordered a-list-unordered__item--tick a-list-unordered__item--cross a-list-plain a-list-definition a-list-opening-times a-list-opening-times__days a-list-opening-times__hours
Linear navigation - v3	m-linear-navigation m-linear-navigation__heading m-linear-navigation__list m-linear-navigation__current	m-navigation-linear m-navigation-linear__heading m-navigation-linear__list m-navigation-linear__current
Loading indicator - v3	loader loader--small loader-container loader__message	a-loading-indicator a-loading-indicator--small a-loading-indicator-container a-loading-indicator__message
Masthead - v3	page-wrapper	l-page-wrapper
Maximum width container - v3	l-max--2-col-small l-max--4-col-medium l-max--4-col-medium l-max--4-col-large l-max--6-col-large l-max--8-col-large l-max--10-col-large	l-max--2-column-small l-max--4-column-medium l-max--4-column-medium l-max--4-column-large l-max--6-column-large l-max--8-column-large l-max--10-column-large
Modal - v3	modal__content-container modal__content-container--promo modal__content-container--hero-promo	o-modal__content-container o-modal__content-container--promo o-modal__content-container--hero-promo
Non linear navigation - v3	m-non-linear-navigation m-non-linear-navigation__current	m-navigation-non-linear m-navigation-non-linear__current
Pagination - v3	pagination pagination__list pagination__list-item pagination__list-item--[ Modifier ] pagination__previous pagination__next	a-pagination a-pagination-list a-pagination-list__item a-pagination-list__item--[ Modifier ] a-pagination__previous a-pagination__next
Payment option list - v3	payment-options-list payment-options-list__item	a-list-payment-options a-list-payment-options__item
Product heading - v3	product-header__btn	m-product-header__button
Quote - v3	blockquote blockquote--[ Modifier ] blockquote__cite	a-quote a-quote--[ Modifier ] a-quote__citation
Show/hide - v3	showhide showhide--transcript showhide__heading showhide__content js-showhide-open	m-showhide m-showhide--transcript m-showhide__heading m-showhide__content js-m-showhide-open
Social - v3	social-list social-list__icon social-list__icon--[ Modifier ]	a-social-links a-social-links__icon a-social-links__icon--[ Modifier ]
Results filter - v3	filter filter__item filter__input filter__label	a-results-filter a-results-filter__item a-results-filter__input a-results-filter__label
Table - v3	table table--comparison icon icon--tick icon--cross	m-table m-table--comparison m-table__icon m-table__icon--tick m-table__icon--cross
Video - v3	media-player-download media-player-download__image media-player-download__text	m-media-player-download m-media-player-download__image m-media-player-download__text

data-module name changes

In sync with the css class name changes, several components have their javascript data-module names updated to match with our coding standards. The following table provides a mapping for the data-module names within components.

Component	Original data-module	New data-module
Cards agent callback - v3	agent-callback	m-agent-callback
Card carousel - v3	card-carousel	o-card-carousel
Contextual help - v3	contextual-help	o-contextual-help
Customer portal product tabs - v3	product-tabs	m-product-tabs
FAQ question list - v3	faq-list	a-list-faq
Modal - v3	modal-window	o-modal
Show/hide - v3	showhide	m-showhide
Table (comparison table) - v3	comparison-table	m-comparison-table
Video - v3 and audio - v3	media	m-media-player

Agent profile card and agent profile call back

The agent profile card and agent profile call back have been removed from the core styles and are now available as an extension that should to be loaded as required. To do this include the following stylesheets:

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

Customer portal tabs and headers

The customer portal tabs and headers have been removed from the core styles and are now available as an extension that should be loaded as required. To do this include the following stylesheets:

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

Base template

Removed requirement for ie8-below.css to be loaded in as it is now included as part of postcss.unmq-split.css

Additional schema markup added.

<body>

Changes to:

<body itemscope itemtype="https://schema.org/WebSite">
	<meta itemprop="name" content="[ Website name ]" />
	<meta itemprop="url" content="[ Root website URL ]" />

Loading indicator

Large

<div class="a-loading-indicator-container"><div class="a-loading-indicator"><span class="a-loading-indicator__message">...</span></div></div>

Changes to:

<div class="a-loading-indicator-container"><div class="a-loading-indicator" role="alert"><span class="a-loading-indicator__message">...</span></div></div>

Small

<div class="a-loading-indicator a-loading-indicator--small"></div>

Changes to:

<div class="a-loading-indicator a-loading-indicator--small" role="alert"><span class="a-loading-indicator__message">...</span></div>

Footer

Old .footer has been replaced by new .m-footer to conform with the latest design standards

<footer class="footer t-accent-dark" role="contentinfo" data-module="footer">
	<div class="l-content-container">
		<ul class="a-list-plain footer__link-list">
			<li><a href="...">...</a></li>
			...
		</ul>
		<ul class="a-list-plain footer__link-list">
			<li><a href="...">...</a></li>
			...
		</ul>
		<ul class="a-list-plain footer__link-list">
			<li><a href="...">...</a></li>
			...
		</ul>
		<ul class="a-list-plain footer__link-list">
			<li><a href="...">...</a></li>
			...
		</ul>
		<ul class="a-list-plain footer__link-list">
			<li><a href="...">...</a></li>
			...
		</ul>
		<ul class="a-list-plain a-social-links">
			<li><a class="a-social-links__icon a-social-links__icon--facebook" href="...">Facebook</a></li>
			<li><a class="a-social-links__icon a-social-links__icon--twitter" href="...">Twitter</a></li>
			<li><a class="a-social-links__icon a-social-links__icon--youtube" href="...">YouTube</a></li>
			<li><a class="a-social-links__icon a-social-links__icon--google" href="...">Google+</a></li>
		</ul>
		<p class="footer__copyright">
			<span class="footer__datecode">...</span>
			<span class="footer__copyright__text">© 2017 Aviva</span>
		</p>
	</div>
</footer>

Changes to:

<footer class="m-footer t-accent-dark" role="contentinfo">
	<div class="l-content-container">
		<div class="l-columns l-columns--4-medium l-columns--5-large m-footer__lists">
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<p class="m-footer__list-heading">...</p>
				<ul class="a-list-plain m-footer__list">
					<li><a href="..." class="a-link-icon a-link-icon--external"><span class="a-link-icon__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--social">
				<ul class="a-list-plain m-footer__list a-social-links">
					<li><a class="a-social-links__icon a-social-links__icon--facebook" href="..." itemprop="sameAs">Facebook</a></li>
					<li><a class="a-social-links__icon a-social-links__icon--twitter" href="..." itemprop="sameAs">Twitter</a></li>
					<li><a class="a-social-links__icon a-social-links__icon--youtube" href="..." itemprop="sameAs">YouTube</a></li>
					<li><a class="a-social-links__icon a-social-links__icon--google" href="..." itemprop="sameAs">Google+</a></li>
				</ul>
			</div>
		</div>
		<div class="l-columns l-columns--1-medium l-columns--1-large m-footer__lists">
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<ul class="a-list-plain m-footer__list m-footer__list--legal">
					<li><a href="...">...</a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<ul class="a-list-plain m-footer__list m-footer__list--copyright">
					<li>...</li>
					<li>&copy; 2021 Aviva</li>
				</ul>
			</div>
		</div>
	</div>
</footer>

Image repository

Some image repository locations have changed to match with our coding standards. The following examples provides details of old and new file locations.

Payment option list icons

<img src="[ CDN Folder Path ]/images/forms/... />

Changes to:

<img src="[ CDN Folder Path ]/images/icons/payment-types/..." />