mod-build 4.0.6 → 4.0.7

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

@@ -0,0 +1,112 @@
+{{#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="/resources/scripts/mod-utils/modutils-15069d7b728a555fb3f7.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="/resources/scripts/callrail/callrail-5c7c537f04af468600cf.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="/resources/scripts/mod-form/form/homeowner-62292fdc874b2d2f5c82.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="/resources/scripts/footer/footer-component-7b5e263f64568573ecc0.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

@@ -0,0 +1,2 @@
+<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

@@ -0,0 +1,4 @@
+<!-- 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

@@ -0,0 +1,187 @@
+<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="/resources/scripts/mod-alytics/modalytics-0ac7d7a5a72ea67a0f47.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

@@ -0,0 +1,289 @@
+$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-family: inherit !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-family: $call-button-font-family;
+		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

@@ -0,0 +1,66 @@
+<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>