mod-build 4.0.21 → 4.0.22-beta.2

package/src/accessible-components/hero/_hero.scss

@@ -0,0 +1,405 @@
+$hero-min-height: 0 !default;
+$hero-padding: 30px 0 !default;
+$hero-padding-tablet: 50px 0 70px !default;
+$hero-padding-desktop: 70px 0 !default;
+$hero-position: relative !default;
+$hero-transition: padding 300ms ease-in-out, min-height 300ms ease-in-out !default;
+
+$hero-background-background-color: transparent !default;
+$hero-background-height: 100% !default;
+$hero-background-height-desktop: $hero-background-height !default;
+$hero-background-max-height: 100% !default;
+$hero-background-left: 0 !default;
+$hero-background-left-desktop: $hero-background-left !default;
+$hero-background-overflow: hidden !default;
+$hero-background-position: absolute !default;
+$hero-background-top: unset !default;
+$hero-background-bottom: 0 !default;
+$hero-background-top-desktop: $hero-background-top !default;
+$hero-background-bottom-desktop: $hero-background-bottom !default;
+$hero-background-width: 100% !default;
+$hero-background-z-index: -1 !default;
+
+$hero-background-image-height: 100% !default;
+$hero-background-image-max-width: 100% !default;
+$hero-background-image-object-fit: cover !default;
+$hero-background-image-object-position: top !default;
+$hero-background-image-object-fit-desktop: $hero-background-image-object-fit !default;
+$hero-background-image-object-position-desktop: $hero-background-image-object-position !default;
+$hero-background-image-width: 100% !default;
+
+$hero-overlay-background: linear-gradient(180deg, rgba($color-charcoal9,.6) 10%, rgba($color-white,1) 35%) !default;
+$hero-overlay-background-desktop: rgba($color-charcoal9,.6) !default;
+$hero-overlay-display: block !default;
+$hero-overlay-display-desktop: $hero-overlay-display !default;
+$hero-overlay-height: 100% !default;
+$hero-overlay-height-desktop: $hero-overlay-height !default;
+$hero-overlay-left: 0 !default;
+$hero-overlay-overflow: hidden !default;
+$hero-overlay-position: absolute !default;
+$hero-overlay-top: unset !default;
+$hero-overlay-bottom: 0 !default;
+$hero-overlay-width: 100% !default;
+$hero-overlay-z-index: 0 !default;
+
+$hero-wrapper-align-items: center !default;
+$hero-wrapper-align-items-desktop: center !default;
+$hero-wrapper-display: flex !default;
+$hero-wrapper-flex-direction: column !default;
+$hero-wrapper-flex-direction-desktop: row !default;
+$hero-wrapper-justify-content-desktop: initial !default;
+$hero-wrapper-padding: 0 !default;
+$hero-wrapper-padding-desktop: $hero-wrapper-padding !default;
+$hero-wrapper-padding-xl: $hero-wrapper-padding !default;
+$hero-wrapper-position: relative !default;
+$hero-wrapper-width: 100% !default;
+$hero-wrapper-z-index: 1 !default;
+
+$hero-content-background-color: $color-white !default;
+$hero-content-background-color-desktop: $hero-content-background-color !default;
+$hero-content-border-radius: 0 !default;
+$hero-content-box-shadow: 0 10px 20px 0 rgba($color-black, .08) !default;
+$hero-content-max-width: 100% !default;
+$hero-content-max-width-tablet: 445px !default;
+$hero-content-max-width-desktop: $hero-content-max-width-tablet !default;
+$hero-content-padding: 0 !default;
+$hero-content-width: 100% !default;
+
+$hero-header-color: $color-white !default;
+$hero-header-min-width: unset !default;
+$hero-header-min-width-desktop: unset !default;
+$hero-header-text-align: center !default;
+$hero-header-text-align-tablet: $hero-header-text-align !default;
+$hero-header-text-align-desktop: $hero-header-text-align-tablet !default;
+$hero-header-container-padding: 0 15px !default;
+$hero-header-container-padding-xl: 0 30px !default;
+
+$hero-title-font-family: inherit !default;
+$hero-title-font-size: 1.5rem !default;
+$hero-title-font-size-desktop: 2.125rem !default;
+$hero-title-font-size-xl: 2.625rem !default;
+$hero-title-font-weight: 400 !default;
+$hero-title-letter-spacing: 0 !default;
+$hero-title-line-height: 1.25 !default;
+$hero-title-line-height-desktop: $hero-title-line-height !default;
+$hero-title-margin: 0 0 35px !default;
+$hero-title-margin-desktop: 0 0 25px !default;
+$hero-title-max-width-desktop: 100% !default;
+$hero-title-text-transform: none !default;
+
+$hero-subtitle-font-size: 1rem !default;
+$hero-subtitle-font-size-desktop: 1.125rem !default;
+$hero-subtitle-font-weight: 400 !default;
+$hero-subtitle-letter-spacing: 0 !default;
+$hero-subtitle-line-height: 1.35 !default;
+$hero-subtitle-margin: 0 auto 25px !default;
+$hero-subtitle-max-width-desktop: 100% !default;
+$hero-subtitle-text-transform: none !default;
+
+$hero-bbb-height: auto !default;
+$hero-bbb-margin: 0 auto 15px !default;
+$hero-bbb-width: 90px !default;
+
+// Form In Progress Styles
+$hero-inprogress-padding: 0 !default;
+$hero-inprogress-container-padding: 0 !default;
+// (Mobile)
+$hero-inprogress-border-top: 1px solid $color-charcoal1 !default;
+$hero-inprogress-background-color: $color-white !default;
+$hero-inprogress-mobile-display: none !default;
+$hero-inprogress-content-background-color: transparent !default;
+$hero-inprogress-content-box-shadow: none !default;
+$hero-inprogress-min-height: calc(100vh - 210px) !default;
+// (Desktop)
+$hero-inprogress-border-bottom-desktop: 1px solid $color-charcoal1 !default;
+$hero-inprogress-border-top-desktop: 3px solid $color-charcoal1 !default;
+$hero-inprogress-container-width: 100% !default;
+$hero-inprogress-header-max-width: 660px !default;
+$hero-inprogress-header-margin-left: auto !default;
+$hero-inprogress-header-padding: 70px 0 70px 25px !default;
+$hero-inprogress-header-min-width: unset !default;
+$hero-inprogress-header-width: 70% !default;
+$hero-inprogress-wrapper-min-height: 615px !default;
+$hero-inprogress-content-background-color-desktop: $color-white !default;
+$hero-inprogress-content-max-width: 100% !default;
+$hero-inprogress-content-min-height: inherit !default;
+$hero-inprogress-content-min-width: 400px !default;
+$hero-inprogress-content-padding: 0 0 30px !default;
+$hero-inprogress-content-width: 30% !default;
+$hero-inprogress-form-max-width: 445px !default;
+// (XL Desktop)
+$hero-inprogress-content-padding-xl: $hero-inprogress-content-padding !default;
+$hero-inprogress-header-max-width-xl: 710px !default;
+$hero-inprogress-header-width-xl: 60% !default;
+$hero-inprogress-content-width-xl: 40% !default;
+
+.hero {
+	min-height: $hero-min-height;
+	padding: $hero-padding;
+	position: $hero-position;
+	transition: $hero-transition;
+
+	&__background {
+		background: $hero-background-background-color;
+		bottom: $hero-background-bottom;
+		height: $hero-background-height;
+		left: $hero-background-left;
+		overflow: $hero-background-overflow;
+		position: $hero-background-position;
+		top: $hero-background-top;
+		width: $hero-background-width;
+		z-index: $hero-background-z-index;
+	}
+
+	&__background-image {
+		height: $hero-background-image-height;
+		max-width: $hero-background-image-max-width;
+		object-fit: $hero-background-image-object-fit;
+		object-position: $hero-background-image-object-position;
+		width: $hero-background-image-width;
+	}
+
+	&__background-overlay {
+		background: $hero-overlay-background;
+		bottom: $hero-overlay-bottom;
+		display: $hero-overlay-display;
+		height: $hero-overlay-height;
+		left: $hero-overlay-left;
+		overflow: $hero-overlay-overflow;
+		position: $hero-overlay-position;
+		top: $hero-overlay-top;
+		width: $hero-overlay-width;
+		z-index: $hero-overlay-z-index;
+	}
+
+	&__wrapper {
+		align-items: $hero-wrapper-align-items;
+		display: $hero-wrapper-display;
+		flex-direction: $hero-wrapper-flex-direction;
+		padding: $hero-wrapper-padding;
+		position: $hero-wrapper-position;
+		width: $hero-wrapper-width;
+		z-index: $hero-wrapper-z-index;
+	}
+
+	&__content {
+		background-color: $hero-content-background-color;
+		border-radius: $hero-content-border-radius;
+		box-shadow: $hero-content-box-shadow;
+		max-width: $hero-content-max-width;
+		padding: $hero-content-padding;
+		width: $hero-content-width;
+	}
+
+	&__header {
+		color: $hero-header-color;
+		min-width: $hero-header-min-width;
+		text-align: $hero-header-text-align;
+	}
+
+	&__header-container {
+		padding: $hero-header-container-padding;
+	}
+
+	&__title {
+		font-family: $hero-title-font-family;
+		font-size: $hero-title-font-size;
+		font-weight: $hero-title-font-weight;
+		letter-spacing: $hero-title-letter-spacing;
+		line-height: $hero-title-line-height;
+		margin: $hero-title-margin;
+		text-transform: $hero-title-text-transform;
+	}
+
+	&__subtitle {
+		font-size: $hero-subtitle-font-size;
+		font-weight: $hero-subtitle-font-weight;
+		letter-spacing: $hero-subtitle-letter-spacing;
+		line-height: $hero-subtitle-line-height;
+		margin: $hero-subtitle-margin;
+		text-transform: $hero-subtitle-text-transform;
+	}
+
+	&__bbb {
+		height: $hero-bbb-height;
+		margin: $hero-bbb-margin;
+		width: $hero-bbb-width;
+	}
+}
+
+@include breakpoint-md {
+	.hero {
+		padding: $hero-padding-tablet;
+
+		&__background {
+			bottom: $hero-background-bottom-desktop;
+			height: $hero-background-height-desktop;
+			left: $hero-background-left-desktop;
+			max-height: $hero-background-max-height;
+			top: $hero-background-top-desktop;
+		}
+
+		&__background-image {
+			object-fit: $hero-background-image-object-fit-desktop;
+			object-position: $hero-background-image-object-position-desktop;
+		}
+
+		&__background-overlay {
+			background: $hero-overlay-background-desktop;
+			display: $hero-overlay-display-desktop;
+			height: $hero-overlay-height-desktop;
+		}
+
+		&__content {
+			background-color: $hero-content-background-color-desktop;
+			max-width: $hero-content-max-width-tablet;
+		}
+
+		&__header {
+			text-align: $hero-header-text-align-tablet;
+		}
+
+		&__title {
+			font-size: $hero-title-font-size-desktop;
+			line-height: $hero-title-line-height;
+			margin: $hero-title-margin-desktop;
+			max-width: $hero-title-max-width-desktop;
+		}
+
+		&__subtitle {
+			font-size: $hero-subtitle-font-size-desktop;
+			max-width: $hero-subtitle-max-width-desktop;
+		}
+	}
+
+	.form-in-progress {
+		.hero {
+			border-bottom: $hero-inprogress-border-bottom-desktop;
+			border-top: $hero-inprogress-border-top-desktop;
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.hero {
+		padding: $hero-padding-desktop;
+
+		&__wrapper {
+			align-items: $hero-wrapper-align-items-desktop;
+			flex-direction: $hero-wrapper-flex-direction-desktop;
+			justify-content: $hero-wrapper-justify-content-desktop;
+			padding: $hero-wrapper-padding-desktop;
+		}
+
+		&__header {
+			min-width: $hero-header-min-width-desktop;
+			text-align: $hero-header-text-align-desktop;
+		}
+
+		&__content {
+			max-width: $hero-content-max-width-desktop;
+		}
+	}
+
+	.form-in-progress {
+		.hero {
+			padding: $hero-inprogress-padding;
+
+			&__container {
+				padding: $hero-inprogress-container-padding;
+				width: $hero-inprogress-container-width;
+			}
+
+			&__header {
+				padding: $hero-inprogress-header-padding;
+				min-width: $hero-inprogress-header-min-width;
+				width: $hero-inprogress-header-width;
+			}
+
+			&__header-container,
+			.value-props {
+				margin-left: $hero-inprogress-header-margin-left;
+				max-width: $hero-inprogress-header-max-width;
+			}
+
+			&__content {
+				background-color: $hero-inprogress-content-background-color-desktop;
+				max-width: $hero-inprogress-content-max-width;
+				min-height: $hero-inprogress-content-min-height;
+				min-width: $hero-inprogress-content-min-width;
+				padding: $hero-inprogress-content-padding;
+				width: $hero-inprogress-content-width;
+
+				form {
+					max-width: $hero-inprogress-form-max-width;
+				}
+			}
+
+			&__wrapper {
+				min-height: $hero-inprogress-wrapper-min-height;
+			}
+		}
+	}
+}
+
+@include breakpoint-xl {
+	.hero {
+		&__title {
+			font-size: $hero-title-font-size-xl;
+		}
+
+		&__header-container {
+			padding: $hero-header-container-padding-xl;
+		}
+
+		&__wrapper {
+			padding: $hero-wrapper-padding-xl;
+		}
+	}
+
+	.form-in-progress {
+		.hero {
+			&__header {
+				width: $hero-inprogress-header-width-xl;
+			}
+
+			&__header-container,
+			.value-props {
+				max-width: $hero-inprogress-header-max-width-xl;
+			}
+
+			&__content {
+				padding: $hero-inprogress-content-padding-xl;
+				width: $hero-inprogress-content-width-xl;
+			}
+		}
+	}
+}
+
+@include breakpoint-phone {
+	.form-in-progress {
+		.hero {
+			background-color: $hero-inprogress-background-color;
+			border-top: $hero-inprogress-border-top;
+			min-height: $hero-inprogress-min-height;
+			padding: $hero-inprogress-padding;
+
+			&__container {
+				padding: $hero-inprogress-container-padding;
+			}
+
+			&__content,
+			.form {
+				background: $hero-inprogress-content-background-color;
+				box-shadow: $hero-inprogress-content-box-shadow;
+			}
+
+			&__background,
+			&__background-overlay,
+			&__header {
+				display: $hero-inprogress-mobile-display;
+			}
+		}
+	}
+
+}

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

@@ -0,0 +1,53 @@
+<section class="hero{{#if this.hero.attributes.class}} {{this.hero.attributes.class}}{{/if}}" {{{addAttributes this.hero 'class'}}}>
+	{{#if this.hero.background}}
+		{{#if this.hero.background.picture}}
+			{{ fileInclude 'src/accessible-components/picture/picture.html'
+				picture = this.hero.background.picture
+				class = 'hero__background'
+			}}
+		{{else}}
+			<div class="hero__background"></div>
+		{{/if}}
+		{{#if this.hero.background.additionalbackground.picture}}
+			{{ fileInclude 'src/accessible-components/picture/picture.html'
+				picture = this.hero.background.additionalbackground.picture
+			}}
+		{{/if}}
+		{{#xif "this.hero.background.includeOverlay === true"}}
+			<div class="hero__background-overlay"></div>
+		{{/xif}}
+	{{/if}}
+	<div class="hero__container container">
+		<div class="hero__wrapper">
+			<div class="hero__header">
+				<div class="hero__header-container">
+				{{#if this.hero.title}}
+					<h1 class="hero__title{{#if this.hero.title.attributes.class}} {{this.hero.title.attributes.class}}{{/if}}" {{{addAttributes this.hero.title 'class'}}} data-theme-template="title">
+						{{#if this.hero.title.mobileText}}
+							<span class="visible-sm-down">{{{this.hero.title.mobileText}}}</span>
+						{{/if}}
+						<span {{#if this.hero.title.mobileText}}class="hidden visible-md-up"{{/if}}>{{{this.hero.title.text}}}</span>
+					</h1>
+				{{/if}}
+				{{#if this.hero.subtitle.text}}
+					<p class="hero__subtitle{{#if this.hero.subtitle.attributes.class}} {{this.hero.subtitle.attributes.class}}{{/if}}" {{{addAttributes this.hero.subtitle 'class'}}} data-theme-template="subtitle">
+						{{{this.hero.subtitle.text}}}
+					</p>
+				{{/if}}
+				</div>
+				{{#this.hero.valueProps}}
+					{{ fileInclude 'src/accessible-components/value-props/value-props.html'
+						props = this
+					}}
+				{{/this.hero.valueProps}}
+			</div>
+			{{#if this.hero.formTemplateInclude}}
+				<div class="hero__content">
+					{{fileInclude this.hero.formTemplateInclude
+						form = this
+					}}
+				</div>
+			{{/if}}
+		</div>
+	</div>
+</section>

package/src/accessible-components/how-it-works/_how-it-works.scss

@@ -0,0 +1,217 @@
+$hiw-background: $color-white !default;
+$hiw-border-bottom: 0 !default;
+$hiw-padding: 40px 0 !default;
+$hiw-padding-tablet: 60px 0 !default;
+$hiw-padding-desktop: 80px 0 !default;
+$hiw-text-align: center !default;
+
+$hiw-title-color: $color-charcoal8 !default;
+$hiw-title-font-size: 1.375rem !default;
+$hiw-title-font-size-desktop: 1.5rem !default;
+$hiw-title-font-weight: 700 !default;
+$hiw-title-line-height: 1.25 !default;
+$hiw-title-margin: 0 0 35px !default;
+
+$hiw-content-max-width: 320px !default;
+$hiw-content-width: 90% !default;
+$hiw-content-max-width-desktop: 100% !default;
+$hiw-content-width-desktop: 80% !default;
+$hiw-content-text-align: center !default;
+
+$hiw-wrapper-align-items: center !default;
+$hiw-wrapper-align-items-desktop: center !default;
+$hiw-wrapper-flex-direction: row !default;
+$hiw-wrapper-flex-direction-desktop: column !default;
+
+$hiw-card-divider: 2px dashed $color-charcoal1 !default;
+$hiw-card-divider-height: 22px !default;
+$hiw-card-divider-position-left: 29px !default;
+$hiw-card-divider-position-top: -30px !default;
+$hiw-card-divider-height-desktop: 100% !default;
+$hiw-card-divider-position-left-desktop: 0 !default;
+$hiw-card-divider-position-top-desktop: -20% !default;
+$hiw-card-divider-transform: rotate(90deg) !default;
+
+$hiw-card-wrapper-margin: auto !default;
+$hiw-card-wrapper-max-width: 260px !default;
+
+$hiw-card-margin-bottom: 0 !default;
+$hiw-card-text-align: center !default;
+$hiw-card-text-align-desktop: $hiw-card-text-align !default;
+$hiw-block-card-text-align: left !default;
+$hiw-block-card-text-align-desktop: center !default;
+$hiw-block-card-margin-bottom: 30px !default;
+
+$hiw-card-icon-height: 100px !default;
+$hiw-card-icon-width: $hiw-card-icon-height !default;
+$hiw-block-card-icon-height: 60px !default;
+$hiw-block-card-icon-width: $hiw-block-card-icon-height !default;
+
+$hiw-card-title-color: $color-charcoal8 !default;
+$hiw-card-title-font-size: 1rem !default;
+$hiw-card-title-font-weight: bold !default;
+$hiw-card-title-line-height: 1.25 !default;
+$hiw-card-title-margin: 15px 0 !default;
+
+$hiw-card-desc-color: $color-charcoal8 !default;
+$hiw-card-desc-font-size: 1rem !default;
+$hiw-card-desc-font-size-desktop: 1.125rem !default;
+$hiw-card-desc-line-height: 1.35 !default;
+$hiw-card-desc-margin: 15px 0 0 !default;
+$hiw-card-desc-margin-desktop: $hiw-card-desc-margin !default;
+$hiw-block-card-desc-margin: 0 0 0 10px !default;
+$hiw-block-card-desc-margin-desktop: 15px auto 0 !default;
+
+.hiw-card {
+	margin-bottom: $hiw-card-margin-bottom;
+	text-align: $hiw-card-text-align;
+
+	&__wrapper {
+		margin: $hiw-card-wrapper-margin;
+		max-width: $hiw-card-wrapper-max-width;
+	}
+
+	&__icon {
+		height: $hiw-card-icon-height;
+		width: $hiw-card-icon-width;
+	}
+
+	&__title {
+		color: $hiw-card-title-color;
+		font-size: $hiw-card-title-font-size;
+		font-weight: $hiw-card-title-font-weight;
+		line-height: $hiw-card-title-line-height;
+		margin: $hiw-card-title-margin;
+	}
+
+	&__description {
+		color: $hiw-card-desc-color;
+		font-size: $hiw-card-desc-font-size;
+		line-height: $hiw-card-desc-line-height;
+		margin: $hiw-card-desc-margin;
+	}
+}
+
+.hiw-block,
+.hiw-carousel {
+	background: $hiw-background;
+	border-bottom: $hiw-border-bottom;
+	padding: $hiw-padding;
+	text-align: $hiw-text-align;
+
+	&__title {
+		color: $hiw-title-color;
+		font-size: $hiw-title-font-size;
+		font-weight: $hiw-title-font-weight;
+		line-height: $hiw-title-line-height;
+		margin: $hiw-title-margin;
+	}
+}
+
+.hiw-block {
+	&__content {
+		display: block;
+		margin: 0 auto;
+		max-width: $hiw-content-max-width;
+		text-align: $hiw-content-text-align;
+		width: $hiw-content-width;
+
+		.hiw-card {
+			flex: 1;
+			margin-bottom: $hiw-block-card-margin-bottom;
+			position: relative;
+			text-align: $hiw-block-card-text-align;
+
+			&__wrapper {
+				align-items: $hiw-wrapper-align-items;
+				display: flex;
+				flex-direction: $hiw-wrapper-flex-direction;
+				max-width: 100%;
+			}
+
+			&__icon {
+				height: $hiw-block-card-icon-height;
+				min-height: $hiw-block-card-icon-height;
+				min-width: $hiw-block-card-icon-width;
+				width: $hiw-block-card-icon-width;
+			}
+
+			&__description {
+				margin: $hiw-block-card-desc-margin;
+			}
+
+			~ .hiw-card {
+				&:before{
+					border-left: $hiw-card-divider;
+					content: '';
+					height: $hiw-card-divider-height;
+					left: $hiw-card-divider-position-left;
+					position: absolute;
+					top: $hiw-card-divider-position-top;
+					width: 1px;
+				}
+			}
+		}
+	}
+}
+
+@include breakpoint-md {
+	.hiw-block,
+	.hiw-carousel {
+		padding: $hiw-padding-tablet;
+
+		&__title {
+			font-size: $hiw-title-font-size-desktop;
+		}
+	}
+
+	.hiw-block {
+		&__content {
+			align-items: center;
+			display: flex;
+			max-width: $hiw-content-max-width-desktop;
+
+			.hiw-card {
+				text-align: $hiw-block-card-text-align-desktop;
+
+				&__wrapper {
+					align-items: $hiw-wrapper-align-items-desktop;
+					flex-direction: $hiw-wrapper-flex-direction-desktop;
+				}
+
+				&__description {
+					margin: $hiw-block-card-desc-margin-desktop;
+				}
+
+				~ .hiw-card {
+					&:before {
+						height: $hiw-card-divider-height-desktop;
+						left: $hiw-card-divider-position-left-desktop;
+						top: $hiw-card-divider-position-top-desktop;
+						transform: $hiw-card-divider-transform;
+					}
+				}
+			}
+		}
+	}
+
+	.hiw-card {
+		&__description {
+			font-size: $hiw-card-desc-font-size-desktop;
+			margin: $hiw-card-desc-margin-desktop;
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.hiw-block,
+	.hiw-carousel {
+		padding: $hiw-padding-desktop;
+	}
+
+	.hiw-block {
+		&__content {
+			width: $hiw-content-width-desktop;
+		}
+	}
+}

package/src/accessible-components/how-it-works/how-it-works-carousel.html

@@ -0,0 +1,12 @@
+<section class="hiw-carousel{{#xif 'this.hiwBlock.attributes && this.hiwBlock.attributes.class'}} {{this.hiwBlock.attributes.class}}{{/xif}}" {{{addAttributes this.hiwBlock 'class'}}}>
+	<div class="hiw-carousel__container container">
+		{{#if this.hiwBlock.title}}
+			<h2 class="hiw-carousel__title{{#xif 'this.hiwBlock.title.attributes && this.hiwBlock.title.attributes.class'}} {{this.hiwBlock.title.attributes.class}}{{/xif}}" {{{addAttributes this.hiwBlock.title 'class'}}}>{{{this.hiwBlock.title.text}}}</h2>
+		{{/if}}
+		{{#hiwBlock}}
+			{{ fileInclude 'src/accessible-components/carousel/carousel.html'
+				carousel = this
+			}}
+		{{/hiwBlock}}
+	</div>
+</section>

package/src/accessible-components/how-it-works/how-it-works-static.html

@@ -0,0 +1,12 @@
+<section class="hiw-block{{#xif 'this.hiwBlock.attributes && this.hiwBlock.attributes.class'}} {{this.hiwBlock.attributes.class}}{{/xif}}" {{{addAttributes this.hiwBlock 'class'}}}>
+	<div class="hiw-block__container container">
+		{{#if this.hiwBlock.title}}
+			<h2 class="hiw-block__title{{#xif 'this.hiwBlock.title.attributes && this.hiwBlock.title.attributes.class'}} {{this.hiwBlock.title.attributes.class}}{{/xif}}" {{{addAttributes this.hiwBlock.title 'class'}}}>{{{this.hiwBlock.title.text}}}</h2>
+		{{/if}}
+		<ul class="hiw-block__content">
+			{{ fileInclude 'src/accessible-components/how-it-works/how-it-works.html'
+				items = this.hiwBlock.items
+			}}
+		</ul>
+	</div>
+</section>