mod-build 4.0.0 → 4.0.1-beta.2

package/src/accessible-components/foot-assets/foot-assets.html

@@ -1,112 +0,0 @@
-{{#unless this.page.footAssetsConfig.disableJquery}}
-	<!-- build:js {{#if this.buildRootPath}}{{this.buildRootPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}scripts/vendor/jquery.js -->
-	<script src="{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{/if}}node_modules/jquery/dist/jquery.js" {{#if this.page.footAssetsConfig.deferJquery}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncJquery}}async{{/if}}></script>
-	<!-- endbuild -->
-{{/unless}}
-
-{{#unless this.page.footAssetsConfig.disableModUtils}}
-	<script src="https://{{nodeEnv}}/quote/resources/mod-utils/modutils.min.js" {{#if this.page.footAssetsConfig.deferModUtils}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncModUtils}}async{{/if}}></script>
-{{/unless}}
-
-<!-- load additionalAssets only from node_modules -->
-{{#unless @root.isVite}}
-	{{#if page.footAssetsConfig.additionalAssets}}
-		{{#each page.footAssetsConfig.additionalAssets}}
-			{{#xif "!this.bundleInAllJSChunk && this.isNodeModule"}}
-				<!-- build:js {{#if this.buildPath}}{{this.buildPath}}{{else}}{{#unless ../this.useRelativeBuildPath}}/{{/unless}}scripts/vendor{{/if}}/{{this.chunkName}} -->
-				<script src="{{#if ../this.nodeModulesPath}}{{../this.nodeModulesPath}}{{/if}}node_modules/{{this.src}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
-				<!-- endbuild -->
-			{{/xif}}
-		{{/each}}
-	{{/if}}
-{{/unless}}
-
-{{#unless this.page.footAssetsConfig.disableModCarousel}}
-	{{#xif " this.path !== 'thankyou' && this.path !== 'sorry' "}}
-		<script src="{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}accessible-components/carousel/carousel.min.js" {{#if this.page.footAssetsConfig.deferModCarousel}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncModCarousel}}async{{/if}}></script>
-	{{/xif}}
-{{/unless}}
-
-{{#if this.page.footAssetsConfig.includeCallrailJs}}
-	<script src="https://{{nodeEnv}}/quote/resources/shared-resources/scripts/callrail/callrail.min.js" defer></script>
-{{/if}}
-
-<!-- load additionalAssets from site-level, CDN or third party CDN -->
-{{#unless @root.isVite}}
-	{{#if page.footAssetsConfig.additionalAssets}}
-		{{#each page.footAssetsConfig.additionalAssets}}
-			{{#xif "!this.bundleInAllJSChunk && !this.isNodeModule"}}
-					<script src="
-					{{#if ../this.isLocal}}
-						{{#if this.localSrc}}
-							{{this.localSrc}}
-						{{else}}
-							{{#if this.useModCdn}}
-								https://{{../nodeEnv}}/{{this.src}}
-							{{else}}
-								{{this.src}}
-							{{/if}}
-						{{/if}}
-					{{else}}
-						{{#if this.useModCdn}}
-							https://{{../nodeEnv}}/{{this.src}}
-						{{else}}
-							{{this.src}}
-						{{/if}}
-					{{/if}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
-			{{/xif}}
-		{{/each}}
-	{{/if}}
-{{/unless}}
-
-{{#unless this.page.footAssetsConfig.disableProgressBarJs}}
-	{{#xif " this.path !== 'thankyou' && this.path !== 'sorry' "}}
-		<script src="{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}accessible-components/progress-bar/progress-bar.min.js" defer></script>
-	{{/xif}}
-{{/unless}}
-
-{{#unless this.page.footAssetsConfig.disableExpandCollapseJs}}
-	{{#xif " this.path !== 'thankyou' && this.path !== 'sorry' "}}
-		<script src="{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}accessible-components/expand-collapse/expand-collapse.min.js" defer></script>
-	{{/xif}}
-{{/unless}}
-
-{{#xif "(this.includeModFormIncludes || (this.path !== 'thankyou' && this.path !== 'sorry'))" }}
-	{{#unless this.page.footAssetsConfig.disableNewModForm}}
-		<script src="https://{{nodeEnv}}/quote/resources/mod-form/form/homeowner.min.js" {{#if this.page.footAssetsConfig.deferNewModForm}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncNewModForm}}async{{/if}}></script>
-	{{/unless}}
-{{/xif}}
-
-<!-- QS white label assets -->
-{{#xif "this.path !== 'thankyou' && this.path !== 'sorry' && this.isQSPage === true" }}
-	<!-- build:js(src) {{#if this.buildRootPath}}{{this.buildRootPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}scripts/components/all.js -->
-	{{#unless this.page.footAssetsConfig.disableFormJs}}
-		<script src="/scripts/components/form.js" defer></script>
-	{{/unless}}
-	{{#if page.footAssetsConfig.additionalAssets}}
-		{{#each page.footAssetsConfig.additionalAssets}}
-			{{#xif "this.bundleInAllJSChunk && !this.isNodeModule"}}
-				<script src="{{this.src}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
-			{{/xif}}
-		{{/each}}
-	{{/if}}
-	<!-- endbuild -->
-{{/xif}}
-
-
-{{#if this.path}}
-	{{#if @root.isVite}}
-		<script type="module" src="/src{{#if this.src}}{{this.src}}{{else}}scripts{{/if}}/{{this.path}}.js"></script>
-	{{else}}
-		<script src="{{#if this.src}}{{this.src}}{{else}}scripts{{/if}}/{{this.path}}.js" defer></script>
-	{{/if}}
-{{/if}}
-
-{{#unless this.page.footAssetsConfig.disableFooter}}
-	<script src="https://{{nodeEnv}}/quote/resources/shared-resources/scripts/footer/footer-component.min.js" data-type="{{#if isQSPage}}qs{{else}}mod{{/if}}" async defer></script>
-{{/unless}}
-
-{{#if this.page.footAssetsConfig.devOpsTrackingId}}
-	<!-- {{uppercase this.page.footAssetsConfig.devOpsTrackingId}} -->
-{{/if}}
-

package/src/accessible-components/footer/footer.html

@@ -1,2 +0,0 @@
-<div id="footer-component" {{#if this.footer}}{{{addAttributes this.footer}}}{{/if}}></div>
-{{{jsonVarScriptTag this.siteData 'siteData'}}}

package/src/accessible-components/gtm-body/gtm-body.html

@@ -1,4 +0,0 @@
-<!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{gtm_container_ID}}"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-<!-- End Google Tag Manager (noscript) -->

package/src/accessible-components/head/head.html

@@ -1,187 +0,0 @@
-<head>
-	{{#unless @root.isVite}}
-		{{#if page.headConfig.useDynamicGtm}}
-			<script>
-				{{ fileInclude 'node_modules/mod-build/src/scripts/has-qs-params.js' }}
-				var gtm_container_ID = window.isQSPage ? '{{qs_gtm_container_ID}}' : '{{gtm_container_ID}}';
-			</script>
-		{{/if}}
-	{{/unless}}
-
-	<!-- assets links afterBegin -->
-	{{#if page.headConfig.useModAnalytics}}
-		<script src="https://{{nodeEnv}}/quote/resources/mod-alytics/modalytics.min.js" {{#if page.headConfig.deferModAnalytics}}defer{{/if}} {{#if page.headConfig.asyncModAnalytics}}async{{/if}}></script>
-	{{/if}}
-
-	{{#unless @root.isVite}}
-		{{#if page.headConfig.additionalAssets.afterBegin}}
-			{{#each page.headConfig.additionalAssets.afterBegin}}
-				{{#xif "this.type === 'style' "}}
-					<link href="{{#if isLocal}}
-						{{#if this.localSrc}}
-							{{this.localSrc}}
-						{{else}}
-							{{#if this.useModCdn}}
-								https://{{../nodeEnv}}/{{this.src}}
-							{{else}}
-								{{this.src}}
-							{{/if}}
-						{{/if}}
-					{{else}}
-						{{#if this.useModCdn}}
-							https://{{../nodeEnv}}/{{this.src}}
-						{{else}}
-							{{this.src}}
-						{{/if}}
-					{{/if}}" rel="stylesheet" type="text/css" />
-				{{/xif}}
-				{{#xif "this.type === 'script' "}}
-					<script
-					src="{{#if isLocal}}
-						{{#if this.localSrc}}
-							{{this.localSrc}}
-						{{else}}
-							{{#if this.useModCdn}}
-								https://{{../nodeEnv}}/{{this.src}}
-							{{else}}
-								{{this.src}}
-							{{/if}}
-						{{/if}}
-					{{else}}
-						{{#if this.useModCdn}}
-							https://{{../nodeEnv}}/{{this.src}}
-						{{else}}
-							{{this.src}}
-						{{/if}}
-					{{/if}}"
-					{{#if this.defer}}defer{{/if}}
-					{{#if this.async}}async{{/if}}
-					></script>
-				{{/xif}}
-			{{/each}}
-		{{/if}}
-	{{/unless}}
-
-	<!-- Include vwo setup -->
-	{{#unless @root.isVite}}
-		{{#xif "this.page.headConfig.vwoSetup.vwoPathArray.indexOf(this.path) > -1" }}
-			<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com">
-			<!-- Do not double hit our analytical resources (Heap/Google Analytics) if the page is going to be redirected by a VWO a/b test-->
-			{{ fileInclude 'node_modules/mod-build/src/templates/_partials/scripts/vwo-redirect-callback.html' }}
-		{{else}}
-			{{ fileInclude 'node_modules/mod-build/src/templates/_partials/scripts/analytics.html' }}
-		{{/xif}}
-	{{/unless}}
-
-
-	<!-- meta tags -->
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="initial-scale=1.0, width=device-width" />
-
-	{{#unless page.headConfig.disableRobots}}
-		<meta name="robots" content="{{#if page.headConfig.robotsCsv}}{{page.headConfig.robotsCsv}}{{else}}noindex,nofollow{{/if}}"/>
-	{{/unless}}
-
-	{{#unless page.headConfig.disableOgTags}}
-		<meta property="og:title" content="{{page.headConfig.title}}" />
-		<meta property="og:description" content="{{page.headConfig.description}}" />
-	{{/unless}}
-
-	<meta name="description" property="description" content="{{page.headConfig.description}}" />
-	<meta name="keywords" property="keywords" content="{{page.headConfig.keywords}}" />
-
-	<!-- preconnect google fonts -->
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	{{#if page.headConfig.preConnect}}
-		{{#each page.headConfig.preConnect}}
-			<link
-			{{#if this.rel}}rel="{{this.rel}}"{{/if}}
-			{{#if this.href}}href="{{this.href}}"{{/if}}
-			{{#if this.as}}as="{{this.as}}"{{/if}}
-			{{#if this.crossorigin}}crossorigin="{{this.crossorigin}}"{{/if}}
-			{{#if this.media}}media="{{this.media}}"{{/if}}
-			{{#if this.type}}type="{{this.type}}"{{/if}}
-			{{#if this.fetchpriority}}fetchpriority="{{this.fetchpriority}}"{{/if}}
-			>
-		{{/each}}
-	{{/if}}
-	<!-- site title -->
-	<title>
-		{{#if page.headConfig.inverseTitle}}
-			{{#unless page.headConfig.hideTitleCompanyName}}{{company_name}} | {{/unless}}
-			{{#if this.pageTitle}}
-				{{this.pageTitle}}
-			{{else}}
-				{{#if page.headConfig.title}}
-					{{page.headConfig.title}}
-				{{/if}}
-			{{/if}}
-		{{else}}
-			{{#if this.pageTitle}}
-				{{this.pageTitle}}
-			{{else}}
-				{{#if page.headConfig.title}}
-					{{page.headConfig.title}}
-				{{/if}}
-			{{/if}}
-			{{#unless page.headConfig.hideTitleCompanyName}} | {{company_name}}{{/unless}}
-		{{/if}}
-	</title>
-
-	{{#if page.headConfig.faviconPath}}
-		<!-- favicon link -->
-		<link href="{{page.headConfig.faviconPath}}" rel="shortcut icon" type="image/x-icon" />
-	{{/if}}
-
-	{{#unless @root.isVite}}
-		{{#if page.headConfig.additionalAssets.beforeEnd}}
-			{{#each page.headConfig.additionalAssets.beforeEnd}}
-				{{#xif "this.type === 'style' "}}
-					<link href="{{#if isLocal}}
-						{{#if this.localSrc}}
-							{{this.localSrc}}
-						{{else}}
-							{{#if this.useModCdn}}
-								https://{{../nodeEnv}}/{{this.src}}
-							{{else}}
-								{{this.src}}
-							{{/if}}
-						{{/if}}
-					{{else}}
-						{{#if this.useModCdn}}
-							https://{{../nodeEnv}}/{{this.src}}
-						{{else}}
-							{{this.src}}
-						{{/if}}
-					{{/if}}" rel="stylesheet" type="text/css" />
-				{{/xif}}
-				{{#xif "this.type === 'script' "}}
-					<script src="{{#if isLocal}}
-						{{#if this.localSrc}}
-							{{this.localSrc}}
-						{{else}}
-							{{#if this.useModCdn}}
-								https://{{../nodeEnv}}/{{this.src}}
-							{{else}}
-								{{this.src}}
-							{{/if}}
-						{{/if}}
-					{{else}}
-						{{#if this.useModCdn}}
-							https://{{../nodeEnv}}/{{this.src}}
-						{{else}}
-							{{this.src}}
-						{{/if}}
-					{{/if}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
-				{{/xif}}
-			{{/each}}
-		{{/if}}
-	{{/unless}}
-
-	<!-- load styles based on path name -->
-	{{#unless @root.isVite}}
-		<link href="{{#if this.src}}{{this.src}}{{else}}{{#unless this.useRelativePath}}/{{/unless}}{{/if}}styles/{{this.path}}.css" rel="stylesheet" type="text/css" />
-	{{/unless}}
-</head>

package/src/accessible-components/header/_header.scss

@@ -1,287 +0,0 @@
-$header-background-color: $color-white !default;
-$header-padding: 10px 0 !default;
-$header-padding-desktop: 15px 0 !default;
-$header-position: relative !default;
-$header-position-top: 0 !default;
-$header-z-index: 2 !default;
-
-$header-container-padding: 0 15px !default;
-
-$header-content-align-items: center !default;
-$header-content-display: flex !default;
-$header-content-justify-content: center !default;
-$header-content-justify-content-desktop: space-between !default;
-
-$header-logo-display: inline-block !default;
-$header-logo-height: auto !default;
-$header-logo-width: 195px !default;
-$header-logo-margin: 0 !default;
-$header-logo-height-desktop: auto !default;
-$header-logo-width-desktop: 245px !default;
-$header-logo-margin-desktop: $header-logo-margin !default;
-$header-logo-vertical-align: middle !default;
-
-$header-secondary-logo-display: $header-logo-display !default;
-$header-secondary-logo-height: auto !default;
-$header-secondary-logo-width: 73px !default;
-$header-secondary-logo-height-desktop: auto !default;
-$header-secondary-logo-width-desktop: 113px !default;
-$header-secondary-logo-vertical-align: middle !default;
-
-$header-secondary-logo-padding-left: 20px !default;
-$header-secondary-logo-padding-left-desktop: 40px !default;
-$header-secondary-logo-divider-background-color: $color-charcoal3 !default;
-$header-secondary-logo-divider-height: calc(100% + 10px) !default;
-$header-secondary-logo-divider-position: absolute !default;
-$header-secondary-logo-divider-position-left: 10px !default;
-$header-secondary-logo-divider-position-left-desktop: 20px !default;
-$header-secondary-logo-divider-width: 1px !default;
-
-$header-back-button-background-color: transparent !default;
-$header-back-button-border-right: 1px solid darken($color-charcoal3, 5%) !default;
-$header-back-button-color: darken($color-charcoal3, 5%) !default;
-$header-back-button-font-size: 1.125rem !default;
-$header-back-button-line-height: 1 !default;
-$header-back-button-padding: 18px 0 !default;
-
-$header-show-button-button-flex: 0 15% !default;
-$header-show-button-logo-flex: 0 85% !default;
-$header-show-button-padding: 0 !default;
-$header-show-button-container-padding: 0 !default;
-$header-show-button-content-min-height: 55px !default;
-
-$header-bbb-logo-height: 30px !default;
-$header-bbb-logo-width: 82.5px !default;
-$header-bbb-logo-height-desktop: 42px !default;
-$header-bbb-logo-width-desktop: 115px !default;
-
-$header-tagline-color: $color-white !default;
-$header-tagline-font-size: 1.125rem !default;
-$header-tagline-font-weight: 700 !default;
-
-$callrail-display: none !default;
-$call-color: $color-black !default;
-$call-font-size: 1.125rem !default;
-$call-font-weight: 400 !default;
-$call-number-font-weight: 700 !default;
-$call-link-color: inherit !default;
-$call-link-text-decoration: none !default;
-$call-icon-width: 12px !default;
-$call-icon-width-desktop: 20px !default;
-
-$call-button-align-self: center !default;
-$call-button-background-color: $color-white !default;
-$call-button-border: 1px solid $call-color !default;
-$call-button-border-radius: 15px !default;
-$call-button-color: $call-color !default;
-$call-button-hover-color: $call-button-color !default;
-$call-button-font-size: .75rem !default;
-$call-button-font-size-desktop: $call-font-size !default;
-$call-button-font-weight: $call-font-weight !default;
-$call-button-margin: 0 0 0 15px !default;
-$call-button-padding: 4px 12px !default;
-$call-button-text-transform: uppercase !default;
-$call-button-transition: $base-transition !default;
-
-.header {
-	background-color: $header-background-color;
-	padding: $header-padding;
-	position: $header-position;
-	top: $header-position-top;
-	z-index: $header-z-index;
-
-	.container {
-		padding: $header-container-padding;
-	}
-
-	&__content {
-		align-items: $header-content-align-items;
-		display: $header-content-display;
-		justify-content: $header-content-justify-content;
-	}
-
-	&__logo {
-		img, svg {
-			display: $header-logo-display;
-			height: $header-logo-height;
-			margin: $header-logo-margin;
-			vertical-align: $header-logo-vertical-align;
-			width: $header-logo-width;
-		}
-	}
-
-	&__secondary-logo {
-		display: $header-secondary-logo-display;
-		padding-left: $header-secondary-logo-padding-left;
-		position: relative;
-		vertical-align: $header-secondary-logo-vertical-align;
-
-		img, svg {
-			height: $header-secondary-logo-height;
-			width: $header-secondary-logo-width;
-		}
-
-		&:before {
-			background-color: $header-secondary-logo-divider-background-color;
-			content: '';
-			height: $header-secondary-logo-divider-height;
-			position: $header-secondary-logo-divider-position;
-			left: $header-secondary-logo-divider-position-left;
-			top: 50%;
-			transform: translateY(-50%);
-			width: $header-secondary-logo-divider-width;
-		}
-	}
-
-	&__bbb-logo {
-		height: $header-bbb-logo-height;
-		width: $header-bbb-logo-width;
-	}
-
-	&__back-button {
-		background-color: $header-back-button-background-color;
-		border: 0;
-		border-right: $header-back-button-border-right;
-		color: $header-back-button-color;
-		display: none;
-		font-size: $header-back-button-font-size;
-		line-height: $header-back-button-line-height;
-		padding: $header-back-button-padding;
-	}
-
-	&__tagline {
-		color: $header-tagline-color;
-		font-size: $header-tagline-font-size;
-		font-weight: $header-tagline-font-weight;
-	}
-
-	&__call {
-		color: $call-color;
-		font-size: $call-font-size;
-		font-weight: $call-font-weight;
-
-		.header__call-icon {
-			width: $call-icon-width-desktop;
-		}
-	}
-
-	&__call-link {
-		color: $call-link-color;
-		text-decoration: $call-link-text-decoration;
-	}
-
-	&__call-number {
-		font-weight: $call-number-font-weight;
-	}
-
-	&__call-icon {
-		width: $call-icon-width;
-	}
-
-	&__call-button {
-		align-self: $call-button-align-self;
-		background-color: $call-button-background-color;
-		border: $call-button-border;
-		border-radius: $call-button-border-radius;
-		color: $call-button-color;
-		font-size: $call-button-font-size;
-		font-weight: $call-button-font-weight;
-		margin: $call-button-margin;
-		padding: $call-button-padding;
-		text-transform: $call-button-text-transform;
-		transition: $call-button-transition;
-
-		&:hover,
-		&:focus {
-			color: $call-button-hover-color;
-		}
-	}
-}
-
-.callNowControls {
-	display: $callrail-display;
-}
-
-@include breakpoint-phone {
-	.header {
-		&--transparent {
-			background-color: transparent;
-		}
-
-		&--show-back-button {
-			padding: $header-show-button-padding;
-
-			.header__content {
-				min-height: $header-show-button-content-min-height;
-			}
-
-			.container {
-				padding: $header-show-button-container-padding;
-			}
-
-			.header__back-button {
-				flex: $header-show-button-button-flex;
-			}
-			.header__logo {
-				flex: $header-show-button-logo-flex;
-				text-align: center;
-			}
-		}
-	}
-
-	.form-in-progress {
-		.header--show-back-button {
-			.header__back-button {
-				display: block;
-			}
-		}
-	}
-}
-
-@include breakpoint-md {
-	.header {
-		padding: $header-padding-desktop;
-
-		&__content {
-			justify-content: $header-content-justify-content-desktop;
-		}
-
-		&__back-button {
-			display: none;
-		}
-
-		&__logo {
-			img, svg {
-				height: $header-logo-height-desktop;
-				margin: $header-logo-margin-desktop;
-				width: $header-logo-width-desktop;
-			}
-		}
-
-		&__secondary-logo {
-			padding-left: $header-secondary-logo-padding-left-desktop;
-
-			img, svg {
-				height: $header-secondary-logo-height-desktop;
-				width: $header-secondary-logo-width-desktop;
-			}
-
-			&:before {
-				left: $header-secondary-logo-divider-position-left-desktop;
-			}
-		}
-
-		&__bbb-logo {
-			height: $header-bbb-logo-height-desktop;
-			width: $header-bbb-logo-width-desktop;
-		}
-	}
-}
-
-@include breakpoint-lg {
-	.header {
-		&__call-button {
-			font-size: $call-button-font-size-desktop;
-		}
-	}
-}

package/src/accessible-components/header/header.html

@@ -1,66 +0,0 @@
-<header class="header{{#if this.header.attributes.class}} {{this.header.attributes.class}}{{/if}}{{#xif 'this.header.includeBackButton === true'}} header--show-back-button{{/xif}}" {{{addAttributes this.header 'class'}}}>
-    <div class="container">
-        <div class="header__content">
-			{{#xif "this.header.includeBackButton === true"}}
-			<button class="header__back-button" data-btn="back">
-				<i class="icon-caret-left">
-					<span class="visually-hidden">Back</span>
-				</i>
-			</button>
-			{{/xif}}
-			{{#if this.header.logo}}
-			<div class="header__logo">
-				{{ fileInclude 'src/accessible-components/picture/picture.html'
-					picture = this.header.logo.picture
-				}}
-				{{#if this.header.logo.secondaryLogo}}
-					<span class="header__secondary-logo">
-						{{ fileInclude 'src/accessible-components/picture/picture.html'
-							picture = this.header.logo.secondaryLogo.picture
-						}}
-					</span>
-				{{/if}}
-			</div>
-			{{/if}}
-			{{#if this.header.callRail}}
-			<div class="callNowControls">
-				{{#if this.header.callRail.showButtonSmallDevices}}
-				<div class="header__call hidden visible-lg-up">
-					{{#if this.header.callRail.picture}}
-						{{ fileInclude 'src/accessible-components/picture/picture.html'
-							picture = this.header.callRail.picture
-							class = 'header__call-icon'
-						}}
-					{{/if}}
-					{{{this.header.callRail.text}}}
-					<a class="header__call-link" href="tel:{{this.header.callRail.phoneNumber}}"><span class="header__call-number">{{formatPhoneNo this.header.callRail.phoneNumber}}</span></a>
-				</div>
-				{{/if}}
-				<a class="header__call-button {{#if this.header.callRail.showButtonSmallDevices}} visible-sm-down visible-md{{/if}}" href="tel:{{this.header.callRail.phoneNumber}}">
-					{{#if this.header.callRail.picture}}
-						{{ fileInclude 'src/accessible-components/picture/picture.html'
-							picture = this.header.callRail.picture
-							class = 'header__call-icon'
-						}}
-					{{/if}}
-					{{{this.header.callRail.mobileText}}}
-				</a>
-			</div>
-			{{/if}}
-			{{#if this.header.additionalLogos}}
-			<div class="header__additional-logos">
-				{{#each this.header.additionalLogos}}
-					{{ fileInclude 'src/accessible-components/picture/picture.html'
-						picture = this.picture
-					}}
-				{{/each}}
-			</div>
-			{{/if}}
-			{{#if this.header.tagline.text}}
-			<p class="header__tagline{{#if this.header.tagline.attributes.class}} {{this.header.tagline.attributes.class}}{{/if}}" {{{addAttributes this.header.tagline 'class'}}}>
-				{{{this.header.tagline.text}}}
-			</p>
-			{{/if}}
-        </div>
-    </div>
-</header>