mod-build 4.0.21 → 4.0.22-beta.2

package/src/shared-components/checkbox/_checkbox.scss

@@ -0,0 +1,125 @@
+$checkbox-bg-color: $color-white !default;
+$checkbox-border: 1px solid $color-charcoal1 !default;
+$checkbox-border-radius: 4px !default;
+$checkbox-font-size: 16px !default;
+$checkbox-font-weight: normal !default;
+$checkbox-line-height: 15px !default;
+$checkbox-text-color: $color-charcoal5 !default;
+$checkbox-margin: 15px 0 !default;
+$checkbox-padding: 15px 10px 10px 15px !default;
+$checkbox-text-align: left !default;
+
+$checkbox-label-padding-left: 35px !default;
+$checkbox-label-width: auto !default;
+
+$checkbox-input-bg-color: $color-white !default;
+$checkbox-input-border: 1px solid $color-charcoal1 !default;
+$checkbox-input-border-radius: 2px !default;
+$checkbox-input-box-shadow: inset 0 1px 3px 0 rgba($color-black, .1) !default;
+$checkbox-input-checked-bg-color: $color-blue5 !default;
+$checkbox-input-checked-border: 1px solid $color-blue6 !default;
+$checkbox-input-checked-color: $color-white !default;
+$checkbox-input-checked-before-line-height: 17px !default;
+$checkbox-input-font-size: 18px !default;
+$checkbox-input-position-left: 25px !default;
+$checkbox-input-position-top: -2px !default;
+$checkbox-input-size: 20px !default;
+
+$checkbox-border-margin: 15px 0 !default;
+$checkbox-border-label-padding-left: 26px !default;
+$checkbox-border-input-position-left: 16px !default;
+$checkbox-border-input-position-top: $checkbox-input-position-top !default;
+$checkbox-transition: color .15s ease !default;
+
+$checkbox-img-max-width: 160px !default;
+$checkbox-img-object-fit: scale-down !default;
+$checkbox-img-object-position: center !default;
+
+.checkbox {
+	background-color: transparent;
+	border: 0;
+	border-radius: $checkbox-border-radius;
+	color: $checkbox-text-color;
+	line-height: $checkbox-line-height;
+	margin: $checkbox-margin;
+	padding: 0;
+	text-align: $checkbox-text-align;
+
+	+ .checkbox {
+		margin-top: 0;
+	}
+
+	label {
+		display: inline-block;
+		font-size: $checkbox-font-size;
+		font-weight: $checkbox-font-weight;
+		line-height: $checkbox-line-height;
+		padding-left: $checkbox-label-padding-left;
+		position: relative;
+		width: $checkbox-label-width;
+
+		input[type=checkbox] {
+			background: transparent;
+			border-color: $color-white;
+			border-radius: 0;
+			left: $checkbox-input-position-left;
+			margin-top: 0;
+			position: absolute;
+			top: $checkbox-input-position-top;
+
+			&::before {
+				@include icon-fill;
+				background: $checkbox-input-bg-color;
+				border: $checkbox-input-border;
+				border-radius: $checkbox-input-border-radius;
+				box-shadow: $checkbox-input-box-shadow;
+				color: $checkbox-input-bg-color;
+				content: '\e920';
+				display: block;
+				height: $checkbox-input-size;
+				text-align: center;
+				transition: $checkbox-transition;
+				width: $checkbox-input-size;
+			}
+
+			&:checked::before {  // sass-lint:disable-line
+				background-color: $checkbox-input-checked-bg-color;
+				border: $checkbox-input-checked-border;
+				color: $checkbox-input-checked-color;
+				font-size: $checkbox-input-font-size;
+				line-height: $checkbox-input-checked-before-line-height;
+			}
+		}
+	}
+
+	&.checkbox--border {
+		background-color: $checkbox-bg-color;
+		border: $checkbox-border;
+		margin: $checkbox-margin;
+		padding: $checkbox-padding;
+
+		label {
+			padding-left: $checkbox-border-label-padding-left;
+
+			input[type=checkbox] {
+				left: $checkbox-border-input-position-left;
+				top: $checkbox-border-input-position-top;
+			}
+		}
+	}
+
+	&--img {
+		label {
+			input[type=checkbox] {
+				margin-top: 5px;
+				top: 0;
+
+				+ img {
+					max-width: $checkbox-img-max-width;
+					object-fit: $checkbox-img-object-fit;
+					object-position: $checkbox-img-object-position;
+				}
+			}
+		}
+	}
+}

package/src/shared-components/checkbox/checkbox.html

@@ -0,0 +1,10 @@
+<div class="checkbox{{#if this.field.class}} {{this.field.class}}{{/if}} {{#if this.field.img}}checkbox--img{{/if}}">
+	<label>
+		<input type="checkbox" name="{{this.field.name}}" value="{{this.field.value}}" {{#if this.field.id}} id="{{this.field.id}}"{{/if}}{{#if this.field.checked}} checked="checked"{{/if}} {{#if this.field.saveField}}data-save{{/if}}{{#if this.extraAttributes}}{{#each this.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} {{#if this.field.extraAttributes}}{{#each this.field.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} />
+		{{#if this.field.img}}
+			<img src={{this.field.img.attributes.src}} alt={{this.field.img.attributes.alt}} class="{{#if this.field.img.attributes.class}}{{this.field.img.attributes.class}}{{/if}}" {{#if this.field.img.lazyLoad}}loading="lazy"{{/if}}>
+		{{else}}
+			{{{this.field.text}}}
+		{{/if}}
+	</label>
+</div>

package/src/shared-components/expand-collapse/_expand-collapse.scss

@@ -0,0 +1,93 @@
+$expand-collapse-background-color: transparent !default;
+$expand-collapse-border: 0 !default;
+$expand-collapse-border-radius: 0 !default;
+$expand-collapse-color: $color-charcoal4 !default;
+$expand-collapse-color-hover: $expand-collapse-color !default;
+$expand-collapse-font-size: 16px !default;
+$expand-collapse-font-weight: 300 !default;
+$expand-collapse-letter-spacing: 0 !default;
+$expand-collapse-margin: 0 !default;
+$expand-collapse-padding: 0 !default;
+$expand-collapse-text-transform: none !default;
+$expand-collapse-transition: all .15s ease !default;
+
+$expand-collapse-icon-background-color: $color-white !default;
+$expand-collapse-icon-border: 1px solid $color-charcoal1 !default;
+$expand-collapse-icon-border-top: 0 !default;
+$expand-collapse-icon-border-radius: 100px !default;
+$expand-collapse-icon-color: $expand-collapse-color !default;
+$expand-collapse-icon-display: block !default;
+$expand-collapse-icon-font-size: $expand-collapse-font-size !default;
+$expand-collapse-icon-line-height: 1 !default;
+$expand-collapse-icon-margin: -2px auto 0 !default;
+$expand-collapse-icon-padding: 5px 0 9px !default;
+$expand-collapse-icon-position: relative !default;
+$expand-collapse-icon-width: 60px !default;
+$expand-collapse-icon-z-index: 2 !default;
+
+$expand-collapse-label-display: inline-block !default;
+$expand-collapse-label-margin: 0 !default;
+
+$expand-collapse-target-max-height: 2000px !default;
+$expand-collapse-target-transition: .5s !default;
+
+.expand-collapse {
+	&__toggle {
+		background-color: $expand-collapse-background-color;
+		border: $expand-collapse-border;
+		border-radius: $expand-collapse-border-radius;
+		color: $expand-collapse-color;
+		cursor: pointer;
+		font-size: $expand-collapse-font-size;
+		font-weight: $expand-collapse-font-weight;
+		letter-spacing: $expand-collapse-letter-spacing;
+		margin: $expand-collapse-margin;
+		padding: $expand-collapse-padding;
+		text-transform: $expand-collapse-text-transform;
+		transition: $expand-collapse-transition;
+	}
+
+	&__icon {
+		background-color: $expand-collapse-icon-background-color;
+		border: $expand-collapse-icon-border;
+		border-top: $expand-collapse-icon-border-top;
+		border-bottom-left-radius: $expand-collapse-icon-border-radius;
+		border-bottom-right-radius: $expand-collapse-icon-border-radius;
+		color: $expand-collapse-icon-color;
+		display: $expand-collapse-icon-display;
+		font-size: $expand-collapse-icon-font-size;
+		line-height: $expand-collapse-icon-line-height;
+		margin: $expand-collapse-icon-margin;
+		padding: $expand-collapse-icon-padding;
+		position: $expand-collapse-icon-position;
+		width: $expand-collapse-icon-width;
+		z-index: $expand-collapse-icon-z-index;
+	}
+
+	&__label {
+		display: $expand-collapse-label-display;
+		margin: $expand-collapse-label-margin;
+	}
+
+	&__target {
+		max-height: $expand-collapse-target-max-height;
+		overflow: hidden;
+		transition: $expand-collapse-target-transition;
+
+		&.collapsed {
+			max-height: 0;
+			opacity: 0;
+			visibility: collapse;
+		}
+	}
+}
+
+@include breakpoint-md {
+	.expand-collapse {
+		&__toggle {
+			&:hover {
+				color: $expand-collapse-color-hover;
+			}
+		}
+	}
+}

package/src/shared-components/expand-collapse/expand-collapse.html

@@ -0,0 +1,8 @@
+<button {{#if this.expandCollapse.id}}id="{{this.expandCollapse.id}}"{{/if}} class="expand-collapse__toggle{{#if this.expandCollapse.class}} {{this.expandCollapse.class}}{{/if}}{{#xif 'this.expandCollapse.scrollToTop === true'}} scroll-to-top{{/xif}}" aria-controls="{{this.expandCollapse.targetId}}" aria-expanded="{{#xif 'this.expandCollapse.collapsedByDefault === true'}}false{{else}}true{{/xif}}">
+	{{#if this.expandCollapse.icon}}
+		<span class="expand-collapse__icon">
+			<i class="{{#xif 'this.expandCollapse.collapsedByDefault === true'}}{{this.expandCollapse.icon.collapsed}}{{else}}{{this.expandCollapse.icon.expanded}}{{/xif}}" data-expanded-icon="{{this.expandCollapse.icon.expanded}}" data-collapsed-icon="{{this.expandCollapse.icon.collapsed}}"></i>
+		</span>
+	{{/if}}
+	<span class="expand-collapse__label" data-expanded-label="{{this.expandCollapse.label.expanded}}" data-collapsed-label="{{this.expandCollapse.label.collapsed}}">{{#xif 'this.expandCollapse.collapsedByDefault === true'}}{{this.expandCollapse.label.collapsed}}{{else}}{{this.expandCollapse.label.expanded}}{{/xif}}</span>
+</button>

package/src/shared-components/expand-collapse/expand-collapse.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var expandCollapseToggle = document.querySelectorAll('.expand-collapse__toggle');
+expandCollapseToggle.forEach(function (toggle) {
+  var toggleId = toggle.id,
+    ariaExpanded = toggle.getAttribute('aria-expanded'),
+    ariaControls = toggle.getAttribute('aria-controls'),
+    expandCollapseTarget = document.getElementById(ariaControls),
+    scrollToTop = toggle.classList.contains('scroll-to-top');
+  expandCollapseTarget.classList.add('expand-collapse__target');
+  if (ariaExpanded === 'false' && !expandCollapseTarget.classList.contains('collapsed')) {
+    expandCollapseTarget.classList.add('collapsed');
+  }
+  document.getElementById(toggleId).addEventListener('click', function () {
+    var shouldExpand = this.getAttribute('aria-expanded') !== 'true',
+      expandCollapseLabel = this.querySelector('.expand-collapse__label'),
+      expandCollapseIcon = this.querySelector('.expand-collapse__icon i');
+    this.setAttribute('aria-expanded', shouldExpand);
+    if (expandCollapseLabel) {
+      expandCollapseLabel.innerHTML = expandCollapseLabel.dataset[shouldExpand ? 'expandedLabel' : 'collapsedLabel'];
+    }
+    if (expandCollapseIcon) {
+      expandCollapseIcon.className = expandCollapseIcon.dataset[shouldExpand ? 'expandedIcon' : 'collapsedIcon'];
+    }
+    if (ariaExpanded === 'false' || expandCollapseTarget.classList.contains('collapsed')) {
+      expandCollapseTarget.classList.toggle('collapsed');
+    } else {
+      expandCollapseTarget.classList.add('collapsed');
+    }
+    if (scrollToTop) {
+      var scrollPosition = shouldExpand ? 'start' : 'center';
+      setTimeout(function () {
+        document.getElementById(toggleId).scrollIntoView({
+          behavior: 'smooth',
+          block: scrollPosition
+        });
+      }, 200);
+    }
+  });
+});

package/src/shared-components/expand-collapse/expand-collapse.min.js

@@ -0,0 +1,2 @@
+"use strict";var expandCollapseToggle=document.querySelectorAll(".expand-collapse__toggle");expandCollapseToggle.forEach(function(e){var t=e.id,a=e.getAttribute("aria-expanded"),l=e.getAttribute("aria-controls"),s=document.getElementById(l),o=e.classList.contains("scroll-to-top");s.classList.add("expand-collapse__target"),"false"!==a||s.classList.contains("collapsed")||s.classList.add("collapsed"),document.getElementById(t).addEventListener("click",function(){var e="true"!==this.getAttribute("aria-expanded"),l=this.querySelector(".expand-collapse__label"),c=this.querySelector(".expand-collapse__icon i");if(this.setAttribute("aria-expanded",e),l&&(l.innerHTML=l.dataset[e?"expandedLabel":"collapsedLabel"]),c&&(c.className=c.dataset[e?"expandedIcon":"collapsedIcon"]),"false"===a||s.classList.contains("collapsed")?s.classList.toggle("collapsed"):s.classList.add("collapsed"),o){var d=e?"start":"center";setTimeout(function(){document.getElementById(t).scrollIntoView({behavior:"smooth",block:d})},200)}})});
+//# sourceMappingURL=expand-collapse.min.js.map

package/src/shared-components/expand-collapse/expand-collapse.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["shared-components/expand-collapse/expand-collapse.js"],"names":["expandCollapseToggle","document","querySelectorAll","forEach","toggle","toggleId","id","ariaExpanded","getAttribute","ariaControls","expandCollapseTarget","getElementById","scrollToTop","classList","contains","add","addEventListener","shouldExpand","this","expandCollapseLabel","querySelector","expandCollapseIcon","setAttribute","innerHTML","dataset","className","scrollPosition","setTimeout","scrollIntoView","behavior","block"],"mappings":"YAAA,IAAMA,sBAAuBC,SAASC,iBAAiB,2BACvDF,sBAAqBG,QAAQ,SAAAC,GAC5B,GAAMC,GAAWD,EAAOE,GACvBC,EAAeH,EAAOI,aAAa,iBACnCC,EAAeL,EAAOI,aAAa,iBACnCE,EAAuBT,SAASU,eAAeF,GAC/CG,EAAcR,EAAOS,UAAUC,SAAS,gBAEzCJ,GAAqBG,UAAUE,IAAI,2BACd,UAAjBR,GAA6BG,EAAqBG,UAAUC,SAAS,cACxEJ,EAAqBG,UAAUE,IAAI,aAGpCd,SAASU,eAAeN,GAAUW,iBAAiB,QAAS,WAC3D,GAAMC,GAAsD,SAAvCC,KAAKV,aAAa,iBACtCW,EAAsBD,KAAKE,cAAc,2BACzCC,EAAqBH,KAAKE,cAAc,2BAiBzC,IAfAF,KAAKI,aAAa,gBAAiBL,GAC/BE,IACHA,EAAoBI,UAAYJ,EAAoBK,QAAQP,EAAe,gBAAkB,mBAG1FI,IACHA,EAAmBI,UAAYJ,EAAmBG,QAAQP,EAAe,eAAiB,kBAGtE,UAAjBV,GAA4BG,EAAqBG,UAAUC,SAAS,aACvEJ,EAAqBG,UAAUT,OAAO,aAEtCM,EAAqBG,UAAUE,IAAI,aAGhCH,EAAa,CAChB,GAAMc,GAAiBT,EAAe,QAAU,QAChDU,YAAW,WACV1B,SAASU,eAAeN,GAAUuB,gBACjCC,SAAU,SACVC,MAAOJ,KAEN","file":"expand-collapse.min.js","sourcesContent":["const expandCollapseToggle = document.querySelectorAll('.expand-collapse__toggle');\nexpandCollapseToggle.forEach(toggle => {\n\tconst toggleId = toggle.id,\n\t\tariaExpanded = toggle.getAttribute('aria-expanded'),\n\t\tariaControls = toggle.getAttribute('aria-controls'),\n\t\texpandCollapseTarget = document.getElementById(ariaControls),\n\t\tscrollToTop = toggle.classList.contains('scroll-to-top');\n\n\texpandCollapseTarget.classList.add('expand-collapse__target');\n\tif (ariaExpanded === 'false' && !expandCollapseTarget.classList.contains('collapsed')) {\n\t\texpandCollapseTarget.classList.add('collapsed');\n\t}\n\n\tdocument.getElementById(toggleId).addEventListener('click', function() {\n\t\tconst shouldExpand = this.getAttribute('aria-expanded') !== 'true',\n\t\t\texpandCollapseLabel = this.querySelector('.expand-collapse__label'),\n\t\t\texpandCollapseIcon = this.querySelector('.expand-collapse__icon i');\n\n\t\tthis.setAttribute('aria-expanded', shouldExpand);\n\t\tif (expandCollapseLabel) {\n\t\t\texpandCollapseLabel.innerHTML = expandCollapseLabel.dataset[shouldExpand ? 'expandedLabel' : 'collapsedLabel'];\n\t\t}\n\n\t\tif (expandCollapseIcon) {\n\t\t\texpandCollapseIcon.className = expandCollapseIcon.dataset[shouldExpand ? 'expandedIcon' : 'collapsedIcon'];\n\t\t}\n\n\t\tif (ariaExpanded === 'false' || expandCollapseTarget.classList.contains('collapsed')) {\n\t\t\texpandCollapseTarget.classList.toggle('collapsed');\n\t\t} else {\n\t\t\texpandCollapseTarget.classList.add('collapsed');\n\t\t}\n\n\t\tif (scrollToTop) {\n\t\t\tconst scrollPosition = shouldExpand ? 'start' : 'center';\n\t\t\tsetTimeout(function() {\n\t\t\t\tdocument.getElementById(toggleId).scrollIntoView({\n\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\tblock: scrollPosition\n\t\t\t\t});\n\t\t\t}, 200);\n\t\t}\n\t});\n});\n"]}

package/src/shared-components/featured-block/_featured-block.scss

@@ -0,0 +1,191 @@
+$featured-block-padding-mobile: 50px 0 !default;
+$featured-block-padding-desktop: 40px 0 !default;
+$featured-block-padding-tablet: $featured-block-padding-desktop !default;
+$featured-block-text-align-mobile: center !default;
+$featured-block-text-align-desktop: left !default;
+
+$featured-block-container-align-items: center !default;
+$featured-block-container-display: flex !default;
+
+$featured-block-title-color: $color-charcoal5 !default;
+$featured-block-title-font-size: 26px !default;
+$featured-block-title-font-size-mobile: 20px !default;
+$featured-block-title-font-weight: 700 !default;
+$featured-block-title-line-height: 1.3 !default;
+$featured-block-title-margin: 0 0 10px !default;
+$featured-block-title-text-transform: none !default;
+
+$featured-block-subtitle-color: $color-charcoal5 !default;
+$featured-block-subtitle-font-size: 16px !default;
+$featured-block-subtitle-font-size-mobile: 15px !default;
+$featured-block-subtitle-font-weight: 300 !default;
+$featured-block-subtitle-line-height: 1.5 !default;
+$featured-block-subtitle-margin: 0 !default;
+$featured-block-subtitle-text-transform: none !default;
+
+$featured-block-description-color: $color-charcoal5 !default;
+$featured-block-description-font-size: $featured-block-subtitle-font-size !default;
+$featured-block-description-font-size-mobile: $featured-block-subtitle-font-size-mobile !default;
+$featured-block-description-font-weight: $featured-block-subtitle-font-weight !default;
+$featured-block-description-line-height: $featured-block-subtitle-line-height !default;
+$featured-block-description-margin: $featured-block-subtitle-margin !default;
+$featured-block-description-text-transform: none !default;
+
+$featured-block-partner-margin: 18px 0 !default;
+$featured-block-partner-img-margin: 0 10px !default;
+$featured-block-partner-img-height: auto !default;
+$featured-block-partner-img-width: 100px !default;
+
+$featured-block-img-width: 100% !default;
+
+$featured-block-btn-background: #F6931D !default;
+$featured-block-btn-border: 0 !default;
+$featured-block-btn-border-radius: 100px !default;
+$featured-block-btn-color: $color-white !default;
+$featured-block-btn-display: block !default;
+$featured-block-btn-font-family: $font-primary-regular !default;
+$featured-block-btn-font-size: 15px !default;
+$featured-block-btn-font-weight: 700 !default;
+$featured-block-btn-height: 48px !default;
+$featured-block-btn-line-height: 1.267 !default;
+$featured-block-btn-margin: 28px 0 0 !default;
+$featured-block-btn-max-width: 250px !default;
+$featured-block-btn-padding: 14px 30px 15px !default;
+$featured-block-btn-text-align: center !default;
+$featured-block-btn-text-transform: uppercase !default;
+$featured-block-btn-transition: all .15s ease !default;
+$featured-block-btn-width: 100% !default;
+
+$featured-block-btn-hover-background: #D77909 !default;
+$featured-block-btn-hover-border: 0 !default;
+$featured-block-btn-hover-color: $color-white !default;
+
+$featured-block-btn-with-icon-display: inline-block !default;
+$featured-block-btn-with-icon-padding: 14px 50px 15px 30px !default;
+$featured-block-btn-with-icon-width: auto !default;
+$featured-block-btn-icon-font-size: 19px !default;
+$featured-block-btn-icon-position: absolute !default;
+$featured-block-btn-icon-right: 15px !default;
+$featured-block-btn-icon-top: 14px !default;
+
+.featured-block {
+	padding: $featured-block-padding-mobile;
+	text-align: $featured-block-text-align-mobile;
+
+	&__title {
+		color: $featured-block-title-color;
+		font-size: $featured-block-title-font-size-mobile;
+		font-weight: $featured-block-title-font-weight;
+		line-height: $featured-block-title-line-height;
+		margin: $featured-block-title-margin;
+		text-transform: $featured-block-title-text-transform;
+	}
+
+	&__subtitle {
+		color: $featured-block-subtitle-color;
+		font-size: $featured-block-subtitle-font-size-mobile;
+		font-weight: $featured-block-subtitle-font-weight;
+		line-height: $featured-block-subtitle-line-height;
+		margin: $featured-block-subtitle-margin;
+		text-transform: $featured-block-subtitle-text-transform;
+	}
+
+	&__description {
+		color: $featured-block-description-color;
+		font-size: $featured-block-description-font-size-mobile;
+		font-weight: $featured-block-description-font-weight;
+		line-height: $featured-block-description-line-height;
+		margin: $featured-block-description-margin;
+		text-transform: $featured-block-description-text-transform;
+	}
+
+	&__partners {
+		margin: $featured-block-partner-margin;
+
+		img {
+			display: inline-block;
+			height: $featured-block-partner-img-height;
+			margin: $featured-block-partner-img-margin;
+			vertical-align: middle;
+			width: $featured-block-partner-img-width;
+		}
+	}
+
+	&__image {
+		img {
+			height: auto;
+			width: $featured-block-img-width;
+		}
+	}
+
+	&__btn {
+		background: $featured-block-btn-background;
+		border: $featured-block-btn-border;
+		border-radius: $featured-block-btn-border-radius;
+		color: $featured-block-btn-color;
+		display: $featured-block-btn-display;
+		font-family: $featured-block-btn-font-family;
+		font-size: $featured-block-btn-font-size;
+		font-weight: $featured-block-btn-font-weight;
+		height: $featured-block-btn-height;
+		line-height: $featured-block-btn-line-height;
+		margin: $featured-block-btn-margin;
+		max-width: $featured-block-btn-max-width;
+		padding: $featured-block-btn-padding;
+		text-align: $featured-block-btn-text-align;
+		text-transform: $featured-block-btn-text-transform;
+		transition: $featured-block-btn-transition;
+		width: $featured-block-btn-width;
+
+		&:hover{
+			background: $featured-block-btn-hover-background;
+			border: $featured-block-btn-hover-border;
+			color: $featured-block-btn-hover-color;
+		}
+
+
+		&--with-icon {
+			display: $featured-block-btn-with-icon-display;
+			padding: $featured-block-btn-with-icon-padding;
+			width: $featured-block-btn-with-icon-width;
+
+			i {
+				font-size: $featured-block-btn-icon-font-size;
+				position: $featured-block-btn-icon-position;
+				right: $featured-block-btn-icon-right;
+				top: $featured-block-btn-icon-top;
+			}
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.featured-block {
+		padding: $featured-block-padding-tablet;
+		text-align: $featured-block-text-align-desktop;
+
+		&__content {
+			align-items: $featured-block-container-align-items;
+			display: $featured-block-container-display;
+
+		}
+
+		&__title {
+			font-size: $featured-block-title-font-size;
+		}
+
+		&__subtitle {
+			font-size: $featured-block-subtitle-font-size;
+		}
+
+		&__description {
+			font-size: $featured-block-description-font-size;
+		}
+	}
+}
+
+@include breakpoint-md {
+	.featured-block {
+		padding: $featured-block-padding-desktop;
+	}
+}

package/src/shared-components/featured-block/featured-block.html

@@ -0,0 +1,80 @@
+<div class="featured-block{{#if this.block.class}} {{this.block.class}}{{/if}}"{{#if this.block.id}} id="{{this.block.id}}"{{/if}}>
+	{{#xif "this.block.includeContainerWrapper === true"}}<div class="container">{{/xif}}
+	{{#xif "this.block.columns.length > 1"}}<div class="featured-block__content row">{{/xif}}
+		{{#each this.block.columns}}
+			<div {{#if this.class}}class="{{this.class}}"{{/if}}{{#if this.id}} id="{{this.id}}"{{/if}}{{#if this.extraAttributes}}{{#each this.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>
+				{{#if this.title}}
+					<h2 class="featured-block__title{{#if this.title.class}} {{this.title.class}}{{/if}}"{{#if this.title.extraAttributes}}{{#each this.title.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>{{{this.title.text}}}</h2>
+				{{/if}}
+				{{#if this.subtitle}}
+					<p class="featured-block__subtitle{{#if this.subtitle.class}} {{this.subtitle.class}}{{/if}}"{{#if this.subtitle.extraAttributes}}{{#each this.subtitle.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>{{{this.subtitle.text}}}</p>
+				{{/if}}
+				{{#if this.description}}
+					{{#isArray this.description}}
+						{{#each this}}
+							{{#unless this.placeUnderLogos}}
+								<p class="featured-block__description{{#if this.class}} {{this.class}}{{/if}}"{{#if this.extraAttributes}}{{#each this.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>{{{this.text}}}</p>
+							{{/unless}}
+						{{/each}}
+					{{else}}
+						{{#unless this.placeUnderLogos}}
+							<p class="featured-block__description{{#if this.class}} {{this.class}}{{/if}}"{{#if this.extraAttributes}}{{#each this.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>{{{this.text}}}</p>
+						{{/unless}}
+					{{/isArray}}
+				{{/if}}
+				{{#if this.image}}
+					<div class="featured-block__image">
+						{{#xif "this.image.tag === 'img'"}}
+						<img src="{{#if this.image.localSrc}}{{this.image.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.image.src}}{{/if}}" alt="{{this.image.altText}}"{{#if this.image.class}} class="{{this.image.class}}"{{/if}}{{#xif "this.image.lazyload === true"}} loading="lazy"{{/xif}}{{#if this.image.width}} width="{{this.image.width}}"{{/if}}{{#if this.image.height}} height="{{this.image.height}}"{{/if}}>
+						{{/xif}}
+						{{#xif "this.image.tag === 'picture'"}}
+							<picture>
+								<source srcset="{{#if this.image.localSrcset}}{{this.image.localSrcset}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.image.srcset}}{{/if}}" {{{this.image.pictureSourceAttributes}}}>
+								<img src="{{#if this.image.localSrc}}{{this.image.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.image.src}}{{/if}}" alt="{{this.image.altText}}"{{#if this.image.class}} class="{{this.image.class}}"{{/if}}{{#xif "this.image.lazyload === true"}} loading="lazy"{{/xif}}{{#if this.image.width}} width="{{this.image.width}}"{{/if}}{{#if this.image.height}} height="{{this.image.height}}"{{/if}}>
+							</picture>
+						{{/xif}}
+					</div>
+				{{/if}}
+				{{#if this.customContentTemplate}}
+					{{ fileInclude this.customContentTemplate
+						content = this
+					}}
+				{{/if}}
+				{{#if this.featuredPartnerLogos}}
+					<div class="featured-block__partners">
+						{{#each this.featuredPartnerLogos}}
+							{{#xif "this.tag === 'img'"}}
+								<img src="{{#if this.localSrc}}{{this.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.src}}{{/if}}" alt="{{this.altText}}"{{#if this.class}} class="{{this.class}}"{{/if}}{{#xif "this.lazyload === true"}} loading="lazy"{{/xif}}{{#if this.width}} width="{{this.width}}"{{/if}}{{#if this.height}} height="{{this.height}}"{{/if}}>
+							{{/xif}}
+							{{#xif "this.tag === 'picture'"}}
+								<picture>
+									<source srcset="{{#if this.localSrcset}}{{this.localSrcset}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.srcset}}{{/if}}" {{{this.pictureSourceAttributes}}}>
+									<img src="{{#if this.localSrc}}{{this.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.src}}{{/if}}" alt="{{this.altText}}"{{#if this.class}} class="{{this.class}}"{{/if}}{{#xif "this.lazyload === true"}} loading="lazy"{{/xif}}{{#if this.width}} width="{{this.width}}"{{/if}}{{#if this.height}} height="{{this.height}}"{{/if}}>
+								</picture>
+							{{/xif}}
+						{{/each}}
+					</div>
+				{{/if}}
+				{{#if this.description}}
+					{{#isArray this.description}}
+						{{#each this}}
+							{{#if this.placeUnderLogos}}
+								<p class="featured-block__description{{#if this.class}} {{this.class}}{{/if}}"{{#if this.extraAttributes}}{{#each this.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>{{{this.text}}}</p>
+							{{/if}}
+						{{/each}}
+					{{else}}
+						{{#if this.placeUnderLogos}}
+						<p class="featured-block__description{{#if this.class}} {{this.class}}{{/if}}"{{#if this.extraAttributes}}{{#each this.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>{{{this.text}}}</p>
+						{{/if}}
+					{{/isArray}}
+				{{/if}}
+				{{#if this.button}}
+					<a href="{{this.button.href}}" class="featured-block__btn btn {{#if this.button.class}} {{this.button.class}}{{/if}}{{#if this.button.icon}} featured-block__btn--with-icon{{/if}}"{{#if this.button.extraAttributes}}{{#each this.button.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>
+						{{this.button.text}}{{#if this.button.icon}} <i class="{{this.button.icon}}"></i>{{/if}}
+					</a>
+				{{/if}}
+			</div>
+		{{/each}}
+	{{#xif "this.block.columns.length > 1"}}</div>{{/xif}}
+	{{#xif "this.block.includeContainerWrapper === true"}}</div>{{/xif}}
+</div>