mod-build 4.0.9 → 4.0.10

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

@@ -0,0 +1,153 @@
+$checkbox-background-color: transparent !default;
+$checkbox-border: 0 !default;
+$checkbox-border-radius: 4px !default;
+$checkbox-color: $color-charcoal8 !default;
+$checkbox-font-size: 1rem !default;
+$checkbox-font-size-desktop: $checkbox-font-size !default;
+$checkbox-font-weight: normal !default;
+$checkbox-line-height: 1 !default;
+$checkbox-margin: 15px 0 !default;
+$checkbox-max-width: 100% !default;
+$checkbox-padding: 0 !default;
+$checkbox-text-align: left !default;
+$checkbox-transition: color .15s ease-in-out !default;
+
+$checkbox-label-margin: 0 !default;
+$checkbox-label-padding-left: 30px !default;
+$checkbox-label-width: auto !default;
+
+$checkbox-input-background-color: $color-white !default;
+$checkbox-input-border: 1px solid $color-charcoal4 !default;
+$checkbox-input-border-radius: 2px !default;
+$checkbox-input-box-shadow: 0 !default;
+$checkbox-input-checked-background-color: $color-charcoal6 !default;
+$checkbox-input-checked-border: 1px solid $checkbox-input-checked-background-color !default;
+$checkbox-input-checked-color: $color-white !default;
+$checkbox-input-cursor: pointer !default;
+$checkbox-input-font-size: 1.125rem !default;
+$checkbox-input-margin: 0 !default;
+$checkbox-input-position-left: 0 !default;
+$checkbox-input-position-top: -2px !default;
+$checkbox-input-size: 1.25rem !default;
+
+$checkbox-disclaimer-color: $checkbox-color !default;
+$checkbox-disclaimer-display: block !default;
+$checkbox-disclaimer-font-size: $checkbox-font-size !default;
+$checkbox-disclaimer-font-size-desktop: $checkbox-font-size-desktop !default;
+$checkbox-disclaimer-font-style: normal !default;
+$checkbox-disclaimer-font-weight: $checkbox-font-weight !default;
+$checkbox-disclaimer-line-height: 1.35 !default;
+$checkbox-disclaimer-margin: 15px 0 0 !default;
+
+// Focus
+$checkbox-focus-outline: 1px solid rgba($color-charcoal4, .5) !default;
+$checkbox-focus-outline-offset: 5px !default;
+
+// Checkbox Group
+$checkbox-group-legend-text-align: center !default;
+$checkbox-group-label-display: block !default;
+$checkbox-group-font-size: $checkbox-font-size !default;
+$checkbox-group-font-size-desktop: $checkbox-group-font-size !default;
+$checkbox-group-max-width: 100% !default;
+
+.checkbox {
+	background-color: $checkbox-background-color;
+	border: $checkbox-border;
+	border-radius: $checkbox-border-radius;
+	color: $checkbox-color;
+	margin: $checkbox-margin;
+	max-width: $checkbox-max-width;
+	padding: $checkbox-padding;
+	text-align: $checkbox-text-align;
+
+	label {
+		display: inline-block;
+		font-size: $checkbox-font-size;
+		font-weight: $checkbox-font-weight;
+		line-height: $checkbox-line-height;
+		margin: $checkbox-label-margin;
+		padding-left: $checkbox-label-padding-left;
+		position: relative;
+		width: $checkbox-label-width;
+
+		&:focus-within {
+			outline: $checkbox-focus-outline;
+			outline-offset: $checkbox-focus-outline-offset;
+		}
+
+		input[type=checkbox] {
+			background: transparent;
+			border-color: $color-white;
+			border-radius: 0;
+			cursor: $checkbox-input-cursor;
+			left: $checkbox-input-position-left;
+			margin: $checkbox-input-margin;
+			position: absolute;
+			top: $checkbox-input-position-top;
+
+			&::before {
+				@include icon-fill;
+				background: $checkbox-input-background-color;
+				border: $checkbox-input-border;
+				border-radius: $checkbox-input-border-radius;
+				box-shadow: $checkbox-input-box-shadow;
+				color: $checkbox-input-background-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-background-color;
+				border: $checkbox-input-checked-border;
+				color: $checkbox-input-checked-color;
+				font-size: $checkbox-input-font-size;
+				line-height: $checkbox-line-height;
+			}
+		}
+	}
+
+	&__disclaimer {
+		color: $checkbox-disclaimer-color;
+		display: $checkbox-disclaimer-display;
+		font-size: $checkbox-disclaimer-font-size;
+		font-style: $checkbox-disclaimer-font-style;
+		font-weight: $checkbox-disclaimer-font-weight;
+		line-height: $checkbox-disclaimer-line-height;
+		margin: $checkbox-disclaimer-margin;
+	}
+
+	&--group {
+		max-width: $checkbox-group-max-width;
+
+		legend {
+			text-align: $checkbox-group-legend-text-align;
+		}
+
+		label {
+			display: $checkbox-group-label-display;
+			font-size: $checkbox-group-font-size;
+		}
+	}
+}
+
+@include breakpoint-md {
+	.checkbox {
+		label {
+			font-size: $checkbox-font-size-desktop;
+		}
+
+		&__disclaimer {
+			font-size: $checkbox-disclaimer-font-size-desktop;
+		}
+
+		&--group {
+			label {
+				font-size: $checkbox-group-font-size-desktop;
+			}
+		}
+	}
+}

package/src/accessible-components/checkbox/checkbox-group.html

@@ -0,0 +1,18 @@
+{{#if this.field}}
+<fieldset class="checkbox checkbox--group{{#if this.field.attributes.class}} {{this.field.attributes.class}}{{/if}}" {{{addAttributes this.field 'class'}}}>
+	{{#if this.field.legend}}
+		<legend {{{addAttributes this.field.legend}}}>
+			{{{this.field.legend.text}}}
+			{{#if this.field.legend.disclaimer}}
+				<span class="checkbox__disclaimer">{{{this.field.legend.disclaimer}}}</span>
+			{{/if}}
+		</legend>
+	{{/if}}
+	{{#each this.field.options}}
+		<label>
+			<input type="checkbox" {{{addAttributes this 'type'}}} />
+			{{{this.text}}}
+		</label>
+	{{/each}}
+</fieldset>
+{{/if}}

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

@@ -0,0 +1,8 @@
+{{#if this.field}}
+<div class="checkbox">
+	<label>
+		<input type="checkbox" {{{addAttributes this.field 'type'}}} />
+		{{{this.field.text}}}
+	</label>
+</div>
+{{/if}}

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

@@ -0,0 +1,129 @@
+$expand-collapse-transition: $base-transition !default;
+
+$expand-collapse-toggle-wrapper-box-shadow: none !default;
+
+$expand-collapse-toggle-background-color: transparent !default;
+$expand-collapse-toggle-border: 0 !default;
+$expand-collapse-toggle-border-radius: 0 !default;
+$expand-collapse-toggle-color: $color-charcoal4 !default;
+$expand-collapse-toggle-font-size: 1rem !default;
+$expand-collapse-toggle-font-weight: 400 !default;
+$expand-collapse-toggle-letter-spacing: 0 !default;
+$expand-collapse-toggle-margin: 0 auto 45px !default;
+$expand-collapse-toggle-padding: 0 !default;
+$expand-collapse-toggle-text-transform: capitalize !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: $color-charcoal4 !default;
+$expand-collapse-icon-display: block !default;
+$expand-collapse-icon-font-size: 1.125rem !default;
+$expand-collapse-icon-line-height: 1 !default;
+$expand-collapse-icon-margin: -1px 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: 20px auto 0 !default;
+$expand-collapse-label-text-decoration: underline !default;
+$expand-collapse-label-transition: background-color .15s ease-in-out !default;
+
+$expand-collapse-target-max-height: 2000px !default;
+$expand-collapse-target-transition: .5s !default;
+
+// Focus
+$expand-collapse-toggle-focus-outline: 1px solid rgba($expand-collapse-toggle-color, .5) !default;
+$expand-collapse-toggle-focus-outline-offset: 2px !default;
+
+// Hover
+$expand-collapse-label-hover-background-color: transparent !default;
+$expand-collapse-toggle-hover-color: darken($expand-collapse-toggle-color, 10%) !default;
+$expand-collapse-icon-hover-color: darken($expand-collapse-icon-color, 10%) !default;
+
+.expand-collapse {
+	&__toggle-wrapper {
+		box-shadow: $expand-collapse-toggle-wrapper-box-shadow;
+	}
+
+	&__toggle {
+		background-color: $expand-collapse-toggle-background-color;
+		border: $expand-collapse-toggle-border;
+		border-radius: $expand-collapse-toggle-border-radius;
+		color: $expand-collapse-toggle-color;
+		cursor: pointer;
+		font-size: $expand-collapse-toggle-font-size;
+		font-weight: $expand-collapse-toggle-font-weight;
+		letter-spacing: $expand-collapse-toggle-letter-spacing;
+		margin: $expand-collapse-toggle-margin;
+		padding: $expand-collapse-toggle-padding;
+		text-transform: $expand-collapse-toggle-text-transform;
+		transition: $expand-collapse-transition;
+
+		&:focus {
+			outline: $expand-collapse-toggle-focus-outline;
+			outline-offset: $expand-collapse-toggle-focus-outline-offset;
+		}
+	}
+
+	&__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;
+		transition: $expand-collapse-transition;
+		width: $expand-collapse-icon-width;
+		z-index: $expand-collapse-icon-z-index;
+	}
+
+	&__label {
+		display: $expand-collapse-label-display;
+		margin: $expand-collapse-label-margin;
+		text-decoration: $expand-collapse-label-text-decoration;
+		transition: $expand-collapse-label-transition;
+	}
+
+	&__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 {
+			&:focus,
+			&:hover {
+				color: $expand-collapse-toggle-hover-color;
+
+				.expand-collapse {
+					&__label {
+						background-color: $expand-collapse-label-hover-background-color;
+					}
+
+					&__icon {
+						color: $expand-collapse-icon-hover-color;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,14 @@
+{{#if this.expandCollapse.wrapper}}
+<div class="expand-collapse__toggle-wrapper{{#xif 'this.expandCollapse.wrapper.attributes && this.expandCollapse.wrapper.attributes.class'}} {{this.expandCollapse.wrapper.attributes.class}}{{/xif}}" {{{addAttributes this.expandCollapse.wrapper 'class'}}}>
+{{/if}}
+<button class="expand-collapse__toggle{{#xif 'this.expandCollapse.attributes && this.expandCollapse.attributes.class'}} {{this.expandCollapse.attributes.class}}{{/xif}}{{#xif 'this.expandCollapse.scrollToTop === true'}} scroll-to-top{{/xif}}" {{{addAttributes this.expandCollapse 'class'}}}>
+	{{#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>
+{{#if this.expandCollapse.wrapper}}
+</div>
+{{/if}}

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

@@ -0,0 +1,52 @@
+"use strict";
+
+function scrollToElement(element, position, callback) {
+  element.scrollIntoView({
+    behavior: 'smooth',
+    block: position
+  });
+  if (callback && typeof callback === 'function') {
+    callback();
+  }
+}
+window.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'),
+      focusOnElement = shouldExpand ? ariaControls : toggleId;
+    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',
+        element = document.getElementById(toggleId);
+      setTimeout(function () {
+        scrollToElement(element, scrollPosition, function () {
+          setTimeout(function () {
+            document.getElementById(focusOnElement).focus();
+          }, 400);
+        });
+      }, 200);
+    }
+  });
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["accessible-components/expand-collapse/expand-collapse.js"],"names":["scrollToElement","element","position","callback","scrollIntoView","behavior","block","window","expandCollapseToggle","document","querySelectorAll","forEach","toggle","toggleId","id","ariaExpanded","getAttribute","ariaControls","expandCollapseTarget","getElementById","scrollToTop","classList","contains","add","addEventListener","shouldExpand","this","expandCollapseLabel","querySelector","expandCollapseIcon","focusOnElement","setAttribute","innerHTML","dataset","className","scrollPosition","setTimeout","focus"],"mappings":"YAAA,SAASA,iBAAgBC,EAASC,EAAUC,GAC3CF,EAAQG,gBACPC,SAAU,SACVC,MAAOJ,IAEJC,GAAgC,kBAAbA,IACtBA,IAIFI,OAAOC,qBAAuBC,SAASC,iBAAiB,4BACxDF,qBAAqBG,QAAQ,SAASC,GACrC,GAAIC,GAAWD,EAAOE,GACrBC,EAAeH,EAAOI,aAAa,iBACnCC,EAAeL,EAAOI,aAAa,iBACnCE,EAAuBT,SAASU,eAAeF,GAC/CG,EAAcR,EAAOS,UAAUC,SAAS,gBACzCJ,GAAqBG,UAAUE,IAAI,2BACd,UAAjBR,GAA6BG,EAAqBG,UAAUC,SAAS,cACxEJ,EAAqBG,UAAUE,IAAI,aAEpCd,SAASU,eAAeN,GAAUW,iBAAiB,QAAS,WAC3D,GAAIC,GAAsD,SAAvCC,KAAKV,aAAa,iBACpCW,EAAsBD,KAAKE,cAAc,2BACzCC,EAAqBH,KAAKE,cAAc,4BACxCE,EAAiBL,EAAeR,EAAeJ,CAahD,IAZAa,KAAKK,aAAa,gBAAiBN,GAC/BE,IACHA,EAAoBK,UAAYL,EAAoBM,QAAQR,EAAe,gBAAkB,mBAE1FI,IACHA,EAAmBK,UAAYL,EAAmBI,QAAQR,EAAe,eAAiB,kBAEtE,UAAjBV,GAA4BG,EAAqBG,UAAUC,SAAS,aACvEJ,EAAqBG,UAAUT,OAAO,aAEtCM,EAAqBG,UAAUE,IAAI,aAEhCH,EAAa,CAChB,GAAIe,GAAiBV,EAAe,QAAU,SAC7CxB,EAAUQ,SAASU,eAAeN,EACnCuB,YAAW,WACVpC,gBAAgBC,EAASkC,EAAgB,WACxCC,WAAW,WACV3B,SAASU,eAAeW,GAAgBO,SACtC,QAEF","file":"expand-collapse.min.js","sourcesContent":["function scrollToElement(element, position, callback) {\n\telement.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tblock: position\n\t});\n\tif (callback && typeof callback === 'function') {\n\t\tcallback();\n\t}\n}\n\nwindow.expandCollapseToggle = document.querySelectorAll('.expand-collapse__toggle');\nexpandCollapseToggle.forEach(function(toggle) {\n\tvar 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\texpandCollapseTarget.classList.add('expand-collapse__target');\n\tif (ariaExpanded === 'false' && !expandCollapseTarget.classList.contains('collapsed')) {\n\t\texpandCollapseTarget.classList.add('collapsed');\n\t}\n\tdocument.getElementById(toggleId).addEventListener('click', function() {\n\t\tvar 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\t\t\tfocusOnElement = shouldExpand ? ariaControls : toggleId;\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\t\tif (expandCollapseIcon) {\n\t\t\texpandCollapseIcon.className = expandCollapseIcon.dataset[shouldExpand ? 'expandedIcon' : 'collapsedIcon'];\n\t\t}\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\t\tif (scrollToTop) {\n\t\t\tvar scrollPosition = shouldExpand ? 'start' : 'center',\n\t\t\t\telement = document.getElementById(toggleId);\n\t\t\tsetTimeout(function() {\n\t\t\t\tscrollToElement(element, scrollPosition, function() {\n\t\t\t\t\tsetTimeout(function() {\n\t\t\t\t\t\tdocument.getElementById(focusOnElement).focus();\n\t\t\t\t\t}, 400);\n\t\t\t\t});\n\t\t\t}, 200);\n\t\t}\n\t});\n});\n"]}

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

@@ -0,0 +1,221 @@
+$featured-block-background: $color-white !default;
+$featured-block-padding: 40px 0 !default;
+$featured-block-padding-tablet: 60px 0 !default;
+$featured-block-padding-desktop: 80px 0 !default;
+$featured-block-text-align: center !default;
+$featured-block-text-align-desktop: left !default;
+
+$featured-block-content-align-items: center !default;
+$featured-block-content-display: flex !default;
+$featured-block-content-justify-content: space-between !default;
+$featured-block-content-margin: 0 -15px !default;
+
+$featured-block-content-max-width-tablet: 550px !default;
+$featured-block-content-max-width-desktop: 100% !default;
+
+$featured-block-column-left-flex-desktop: 0 0 48% !default;
+$featured-block-column-right-flex-desktop: 0 0 48% !default;
+$featured-block-column-padding: 0 15px !default;
+
+$featured-block-title-color: $color-charcoal8 !default;
+$featured-block-title-font-family: inherit !default;
+$featured-block-title-font-size: 1.375rem !default;
+$featured-block-title-font-size-desktop: 1.5rem !default;
+$featured-block-title-font-weight: 700 !default;
+$featured-block-title-line-height: 1.25 !default;
+$featured-block-title-margin: 0 0 15px !default;
+
+$featured-block-subtitle-color: $color-charcoal8 !default;
+$featured-block-subtitle-font-size: 1rem !default;
+$featured-block-subtitle-font-size-desktop: 1.125rem !default;
+$featured-block-subtitle-font-weight: 400 !default;
+$featured-block-subtitle-line-height: 1.35 !default;
+$featured-block-subtitle-margin: 0 !default;
+$featured-block-subtitle-text-align: left !default;
+
+$featured-block-description-color: $color-charcoal8 !default;
+$featured-block-description-font-size: $featured-block-subtitle-font-size !default;
+$featured-block-description-font-size-desktop: $featured-block-subtitle-font-size-desktop !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-align: $featured-block-subtitle-text-align !default;
+
+$featured-block-partner-margin: 20px 0 !default;
+$featured-block-partner-img-display: inline-block !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-border-radius: 0 !default;
+$featured-block-img-display: inline-block !default;
+$featured-block-img-margin: 0 auto 25px !default;
+$featured-block-img-margin-desktop: 0 !default;
+$featured-block-img-max-width: 100% !default;
+$featured-block-img-width: 100% !default;
+
+$featured-block-btn-display: block !default;
+$featured-block-btn-margin: 25px auto 0 !default;
+$featured-block-btn-margin-desktop: 25px 0 0 !default;
+$featured-block-btn-max-width: 250px !default;
+
+$featured-block-inprogress-display: none !default;
+
+.featured-block {
+	background: $featured-block-background;
+	padding: $featured-block-padding;
+	text-align: $featured-block-text-align;
+
+	&__column {
+		padding: $featured-block-column-padding;
+	}
+
+	&__title {
+		color: $featured-block-title-color;
+		font-family: $featured-block-title-font-family;
+		font-size: $featured-block-title-font-size;
+		font-weight: $featured-block-title-font-weight;
+		line-height: $featured-block-title-line-height;
+		margin: $featured-block-title-margin;
+	}
+
+	&__subtitle {
+		color: $featured-block-subtitle-color;
+		font-size: $featured-block-subtitle-font-size;
+		font-weight: $featured-block-subtitle-font-weight;
+		line-height: $featured-block-subtitle-line-height;
+		margin: $featured-block-subtitle-margin;
+		text-align: $featured-block-subtitle-text-align;
+	}
+
+	&__description {
+		color: $featured-block-description-color;
+		font-size: $featured-block-description-font-size;
+		font-weight: $featured-block-description-font-weight;
+		line-height: $featured-block-description-line-height;
+		margin: $featured-block-description-margin;
+		text-align: $featured-block-description-text-align;
+	}
+
+	&__partners {
+		margin: $featured-block-partner-margin;
+
+		img {
+			display: $featured-block-partner-img-display;
+			height: $featured-block-partner-img-height;
+			margin: $featured-block-partner-img-margin;
+			vertical-align: middle;
+			width: $featured-block-partner-img-width;
+		}
+	}
+
+	&__image {
+		img {
+			border-radius: $featured-block-img-border-radius;
+			display: $featured-block-img-display;
+			height: auto;
+			margin: $featured-block-img-margin;
+			max-width: $featured-block-img-max-width;
+			width: $featured-block-img-width;
+		}
+	}
+
+	&__btn {
+		display: $featured-block-btn-display;
+		margin: $featured-block-btn-margin;
+		max-width: $featured-block-btn-max-width;
+	}
+}
+
+.form-in-progress {
+	.featured-block {
+		display: $featured-block-inprogress-display;
+	}
+}
+
+@include breakpoint-md {
+	.featured-block {
+		padding: $featured-block-padding-tablet;
+
+		&__content {
+			margin: 0 auto;
+			max-width: $featured-block-content-max-width-tablet;
+		}
+		&__title {
+			font-size: $featured-block-title-font-size-desktop;
+		}
+
+		&__subtitle {
+			font-size: $featured-block-subtitle-font-size-desktop;
+		}
+
+		&__description {
+			font-size: $featured-block-description-font-size-desktop;
+		}
+
+		&--flex-md {
+			text-align: $featured-block-text-align;
+
+			.featured-block {
+				&__content {
+					align-items: $featured-block-content-align-items;
+					display: $featured-block-content-display;
+					justify-content: $featured-block-content-justify-content;
+					margin: $featured-block-content-margin;
+					max-width: $featured-block-content-max-width-desktop;
+				}
+
+				&__column {
+					flex: $featured-block-column-left-flex-desktop;
+
+					~ .featured-block__column {
+						flex: $featured-block-column-right-flex-desktop;
+					}
+				}
+
+				&__image {
+					img {
+						margin: $featured-block-img-margin-desktop;
+					}
+				}
+
+				&__btn {
+					margin: $featured-block-btn-margin-desktop;
+				}
+			}
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.featured-block {
+		padding: $featured-block-padding-desktop;
+		text-align: $featured-block-text-align-desktop;
+
+		&__content {
+			align-items: $featured-block-content-align-items;
+			display: $featured-block-content-display;
+			justify-content: $featured-block-content-justify-content;
+			margin: $featured-block-content-margin;
+			max-width: $featured-block-content-max-width-desktop;
+		}
+
+		&__column {
+			flex: $featured-block-column-left-flex-desktop;
+
+			~ .featured-block__column {
+				flex: $featured-block-column-right-flex-desktop;
+			}
+		}
+
+		&__image {
+			img {
+				margin: $featured-block-img-margin-desktop;
+			}
+		}
+
+		&__btn {
+			margin: $featured-block-btn-margin-desktop;
+		}
+	}
+}

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

@@ -0,0 +1,54 @@
+<section class="featured-block{{#xif 'this.block.attributes && this.block.attributes.class'}} {{this.block.attributes.class}}{{/xif}}" {{{addAttributes this.block 'class'}}}>
+	<div class="featured-block__container container">
+	{{#if this.block.title}}
+		<h2 class="featured-block__title{{#xif 'this.block.title.attributes && this.block.title.attributes.class'}} {{this.block.title.attributes.class}}{{/xif}}" {{{addAttributes this.block.title 'class'}}}>{{{this.block.title.text}}}</h2>
+	{{/if}}
+	{{#xif "this.block.columns.length > 1"}}<div class="featured-block__content row">{{/xif}}
+		{{#each this.block.columns}}
+			<div class="featured-block__column{{#xif 'this.attributes && this.attributes.class'}} {{this.attributes.class}}{{/xif}}" {{{addAttributes this 'class'}}}>
+				{{#if this.title}}
+					<h2 class="featured-block__title{{#xif 'this.title.attributes && this.title.attributes.class'}} {{this.title.attributes.class}}{{/xif}}" {{{addAttributes this.title 'class'}}}>{{{this.title.text}}}</h2>
+				{{/if}}
+				{{#if this.subtitle}}
+					<p class="featured-block__subtitle{{#xif 'this.subtitle.attributes && this.subtitle.attributes.class'}} {{this.subtitle.attributes.class}}{{/xif}}" {{{addAttributes this.subtitle 'class'}}}>{{{this.subtitle.text}}}</p>
+				{{/if}}
+				{{#if this.description}}
+					{{#unless this.description.placeUnderLogos}}
+						<p class="featured-block__description{{#xif 'this.description.attributes && this.description.attributes.class'}} {{this.description.attributes.class}}{{/xif}}" {{{addAttributes this.description 'class'}}}>{{{this.description.text}}}</p>
+					{{/unless}}
+				{{/if}}
+				{{#if this.picture}}
+					<div class="featured-block__image">
+						{{ fileInclude 'src/accessible-components/picture/picture.html'
+							picture = this.picture
+						}}
+					</div>
+				{{/if}}
+				{{#if this.customContentTemplate}}
+					{{ fileInclude this.customContentTemplate
+						content = this
+					}}
+				{{/if}}
+				{{#if this.featuredPartnerLogos}}
+					<div class="featured-block__partners">
+						{{#each this.featuredPartnerLogos}}
+							{{ fileInclude 'src/accessible-components/picture/picture.html'
+								picture = this.picture
+							}}
+						{{/each}}
+					</div>
+				{{/if}}
+				{{#if this.description.placeUnderLogos}}
+					<p class="featured-block__description{{#xif 'this.description.attributes && this.description.attributes.class'}} {{this.description.attributes.class}}{{/xif}}" {{{addAttributes this.description 'class'}}}>{{{this.description.text}}}</p>
+				{{/if}}
+				{{#if this.button}}
+					{{ fileInclude 'src/accessible-components/button/button.html'
+						button = this.button
+						class = 'featured-block__btn'
+					}}
+				{{/if}}
+			</div>
+		{{/each}}
+	{{#xif "this.block.columns.length > 1"}}</div>{{/xif}}
+	</div>
+</section>