mod-build 4.0.21 → 4.0.22-beta.2

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

@@ -0,0 +1,253 @@
+$hero-min-height: 0 !default;
+$hero-padding-mobile: 25px 0 !default;
+$hero-padding-tablet: 45px 0 !default;
+$hero-padding-desktop: 70px 0 !default;
+$hero-position: relative !default;
+$hero-transition: padding 300ms ease, min-height 300ms ease !default;
+
+$hero-background-background-color: transparent !default;
+$hero-background-height: 100% !default;
+$hero-background-height-mobile: $hero-background-height !default;
+$hero-background-max-height: 100% !default;
+$hero-background-left: 0 !default;
+$hero-background-overflow: hidden !default;
+$hero-background-position: absolute !default;
+$hero-background-top: 0 !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-width: 100% !default;
+
+$hero-overlay-background: linear-gradient(180deg, transparent 15%, rgba($color-white,.98) 25%, rgba($color-white,1) 87%, rgba($color-white,1) 100%) !default;
+$hero-overlay-background-mobile: $hero-overlay-background !default;
+$hero-overlay-display: none !default;
+$hero-overlay-display-mobile: block !default;
+$hero-overlay-height: 100% !default;
+$hero-overlay-height-mobile: $hero-overlay-height !default;
+$hero-overlay-left: 0 !default;
+$hero-overlay-overflow: hidden !default;
+$hero-overlay-position: absolute !default;
+$hero-overlay-top: 0 !default;
+$hero-overlay-width: 100% !default;
+$hero-overlay-z-index: 0 !default;
+
+$hero-wrapper-align-items-mobile: center !default;
+$hero-wrapper-align-items-tablet: center !default;
+$hero-wrapper-align-items-desktop: flex-start !default;
+$hero-wrapper-display: flex !default;
+$hero-wrapper-flex-direction-mobile: column !default;
+$hero-wrapper-flex-direction-tablet: column !default;
+$hero-wrapper-flex-direction-desktop: row !default;
+$hero-wrapper-justify-content-desktop: initial !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-border-radius: 4px !default;
+$hero-content-box-shadow: 0 10px 20px 0 rgba($color-black, .08) !default;
+$hero-content-max-width-mobile: 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-header-color: $color-white !default;
+$hero-header-text-align: right !default;
+$hero-header-text-align-mobile: center !default;
+
+$hero-title-font-size-mobile: 26px !default;
+$hero-title-font-size-tablet: 30px !default;
+$hero-title-font-size-desktop: 34px !default;
+$hero-title-font-size-lg: $hero-title-font-size-desktop !default;
+$hero-title-font-weight: 700 !default;
+$hero-title-line-height: 1.2 !default;
+$hero-title-line-height-mobile: $hero-title-line-height !default;
+$hero-title-line-height-lg: $hero-title-line-height !default;
+$hero-title-margin: 0 0 15px !default;
+$hero-title-margin-mobile: 0 0 25px !default;
+$hero-title-margin-tablet: $hero-title-margin !default;
+$hero-title-text-transform: none !default;
+
+$hero-subtitle-font-size: 16px !default;
+$hero-subtitle-font-size-mobile: $hero-subtitle-font-size !default;
+$hero-subtitle-font-weight: 400 !default;
+$hero-subtitle-line-height: 1.4 !default;
+$hero-subtitle-margin: 0 auto 15px !default;
+$hero-subtitle-text-transform: none !default;
+
+$hero-full-background-color: $color-white !default;
+$hero-full-min-height: 100vh !default;
+$hero-full-padding: 0 !default;
+$hero-full-content-background-color: transparent !default;
+$hero-full-content-box-shadow: none !default;
+$hero-full-overlay-display: none !default;
+
+.hero {
+	min-height: $hero-min-height;
+	padding: $hero-padding-mobile;
+	position: $hero-position;
+	transition: $hero-transition;
+
+	&__background {
+		background-color: $hero-background-background-color;
+		height: $hero-background-height-mobile;
+		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-mobile;
+		display: $hero-overlay-display-mobile;
+		height: $hero-overlay-height-mobile;
+		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-mobile;
+		display: $hero-wrapper-display;
+		flex-direction: $hero-wrapper-flex-direction-mobile;
+		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-mobile;
+		padding: $hero-content-padding;
+	}
+
+	&__header {
+		color: $hero-header-color;
+		text-align: $hero-header-text-align-mobile;
+	}
+
+	&__title {
+		font-size: $hero-title-font-size-mobile;
+		font-weight: $hero-title-font-weight;
+		line-height: $hero-title-line-height-mobile;
+		margin: $hero-title-margin-mobile;
+		text-transform: $hero-title-text-transform;
+	}
+
+	&__subtitle {
+		font-size: $hero-subtitle-font-size-mobile;
+		font-weight: $hero-subtitle-font-weight;
+		line-height: $hero-subtitle-line-height;
+		margin: $hero-subtitle-margin;
+		text-transform: $hero-subtitle-text-transform;
+	}
+}
+
+@include breakpoint-sm {
+	.hero {
+		padding: $hero-padding-tablet;
+
+		&__background {
+			height: $hero-background-height;
+			max-height: $hero-background-max-height;
+		}
+
+		&__background-overlay {
+			background: $hero-overlay-background;
+			display: $hero-overlay-display;
+			height: $hero-overlay-height;
+		}
+
+		&__wrapper {
+			align-items: $hero-wrapper-align-items-tablet;
+			flex-direction: $hero-wrapper-flex-direction-tablet;
+		}
+
+		&__content {
+			max-width: $hero-content-max-width-tablet;
+		}
+
+		&__header {
+			text-align: $hero-header-text-align;
+		}
+
+		&__title {
+			font-size: $hero-title-font-size-tablet;
+			line-height: $hero-title-line-height;
+			margin: $hero-title-margin-tablet;
+		}
+
+		&__subtitle {
+			font-size: $hero-subtitle-font-size;
+		}
+	}
+}
+
+@include breakpoint-md {
+	.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;
+		}
+
+		&__content {
+			max-width: $hero-content-max-width-desktop;
+		}
+
+		&__title {
+			font-size: $hero-title-font-size-desktop;
+			margin: $hero-title-margin;
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.hero {
+		&__title {
+			font-size: $hero-title-font-size-lg;
+			line-height: $hero-title-line-height-lg;
+		}
+	}
+}
+
+@include breakpoint-phone {
+	.hero {
+		&--full {
+			background-color: $hero-full-background-color;
+			min-height: $hero-full-min-height;
+			padding: $hero-full-padding;
+
+			.hero__content,
+			.form {
+				background: $hero-full-content-background-color;
+				box-shadow: $hero-full-content-box-shadow;
+			}
+
+			.hero__background-overlay {
+				display: $hero-full-overlay-display;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,126 @@
+<div class="hero{{#if this.hero.class}} {{this.hero.class}}{{/if}}"{{#if this.hero.id}} id="{{this.hero.id}}"{{/if}}>
+	{{#if this.hero.backgroundImage}}
+		{{#if this.hero.backgroundImage.wrapper}}
+			<div class="hero__background-wrapper{{#if this.hero.backgroundImage.wrapper.class}} {{this.hero.backgroundImage.wrapper.class}}{{/if}}" {{#if this.hero.backgroundImage.wrapper.extraAttributes}}{{#each this.hero.backgroundImage.wrapper.extraAttributes}}{{{this.attributeName}}}{{#if this.attributeValue}}="{{{this.attributeValue}}}"{{/if}}{{/each}}{{/if}}>
+		{{/if}}
+		<picture class="hero__background{{#if this.hero.backgroundImage.class}} {{this.hero.backgroundImage.class}}{{/if}}"{{#if this.hero.backgroundImage.extraAttributes}}{{#each this.hero.backgroundImage.extraAttributes}}{{{this.attributeName}}}{{#if this.attributeValue}}="{{{this.attributeValue}}}"{{/if}}{{/each}}{{/if}}>
+			{{#if this.hero.backgroundImage.globalSrc}}
+				{{#if this.hero.backgroundImage.srcSmallDevices}}
+				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.srcSmallDevices}}.webp" type="image/webp">
+				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
+				{{else}}
+				<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
+				{{/if}}
+				<source media="(min-width: 768px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.globalSrc}}.webp" type="image/webp">
+				<img class="hero__background-image" src="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.globalSrc}}.jpg" alt="">
+			{{else}}
+				{{#if this.hero.backgroundImage.srcTabletDevices}}
+					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.src}}.webp" type="image/webp">
+					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.src}}.jpg" type="image/jpeg">
+					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.srcTabletDevices}}.webp" type="image/webp">
+					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.srcTabletDevices}}.jpg" type="image/jpeg">
+					<source srcset="{{this.hero.backgroundImage.srcSmallDevices}}.webp" type="image/webp">
+					<img class="hero__background-image" src="{{this.hero.backgroundImage.srcSmallDevices}}.jpg" alt="">
+				{{else}}
+					{{#if this.hero.backgroundImage.srcSmallDevices}}
+					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.srcSmallDevices}}.webp" type="image/webp">
+					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
+					{{else}}
+					<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
+					{{/if}}
+					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.src}}.webp" type="image/webp">
+					<img class="hero__background-image" src="{{this.hero.backgroundImage.src}}.jpg" alt="">
+				{{/if}}
+			{{/if}}
+		</picture>
+		{{#if this.hero.backgroundImage.additionalBackgroundImage}}
+		<picture class="hero__background{{#if this.hero.backgroundImage.additionalBackgroundImage.class}} {{this.hero.backgroundImage.additionalBackgroundImage.class}}{{/if}}"{{#if this.hero.backgroundImage.additionalBackgroundImage.extraAttributes}}{{#each this.hero.backgroundImage.additionalBackgroundImage.extraAttributes}}{{{this.attributeName}}}{{#if this.attributeValue}}="{{{this.attributeValue}}}"{{/if}}{{/each}}{{/if}}>
+			{{#if this.hero.backgroundImage.additionalBackgroundImage.globalSrc}}
+				{{#if this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}
+				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.webp" type="image/webp">
+				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
+				{{else}}
+				<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
+				{{/if}}
+				<source media="(min-width: 768px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.globalSrc}}.webp" type="image/webp">
+				<img class="hero__background-image" src="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.globalSrc}}.jpg" alt="">
+			{{else}}
+				{{#if this.hero.backgroundImage.additionalBackgroundImage.srcTabletDevices}}
+					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.webp" type="image/webp">
+					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.jpg" type="image/jpeg">
+					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcTabletDevices}}.webp" type="image/webp">
+					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcTabletDevices}}.jpg" type="image/jpeg">
+					<source srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.webp" type="image/webp">
+					<img class="hero__background-image" src="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.jpg" alt="">
+				{{else}}
+					{{#if this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}
+					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.webp" type="image/webp">
+					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
+					{{else}}
+					<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
+					{{/if}}
+					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.webp" type="image/webp">
+					<img class="hero__background-image" src="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.jpg" alt="">
+				{{/if}}
+			{{/if}}
+		</picture>
+		{{/if}}
+		{{#xif "this.hero.backgroundImage.includeOverlay === true"}}
+		<div class="hero__background-overlay"></div>
+		{{/xif}}
+		{{#if this.hero.backgroundImage.wrapper}}</div>{{/if}}
+	{{/if}}
+	<div class="hero__container container">
+		<div class="hero__wrapper">
+			{{#if this.hero.moveHeroContentToTop}}
+				{{#if this.hero.formTemplateInclude}}
+				<div class="hero__content">
+					{{fileInclude this.hero.formTemplateInclude
+						form = this
+					}}
+				</div>
+				{{/if}}
+			{{/if}}
+			<div class="hero__header">
+				{{#if this.hero.titleSubTitleWrapperClass}}<div class="{{this.hero.titleSubTitleWrapperClass}}">{{/if}}
+				{{#if this.hero.title}}
+					{{#if this.hero.title.mobileText}}
+					<h1 class="hero__title{{#if this.hero.title.class}} {{this.hero.title.class}}{{/if}}"{{#if this.hero.title.id}} id="{{this.hero.title.id}}"{{/if}}{{#if this.hero.title.extraAttributes}}{{#each this.hero.title.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} data-theme-template="title">
+						<span class="visible-xs">{{{this.hero.title.mobileText}}}</span>
+						<span class="hidden-xs">{{{this.hero.title.text}}}</span>
+					</h1>
+					{{else}}
+					<h1 class="hero__title{{#if this.hero.title.class}} {{this.hero.title.class}}{{/if}}"{{#if this.hero.title.id}} id="{{this.hero.title.id}}"{{/if}}{{#if this.hero.title.extraAttributes}}{{#each this.hero.title.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} data-theme-template="title">
+						{{{this.hero.title.text}}}
+					</h1>
+					{{/if}}
+				{{/if}}
+				{{#if this.hero.additionalTitle}}
+					<h1 class="hero__title{{#if this.hero.additionalTitle.class}} {{this.hero.additionalTitle.class}}{{/if}}"{{#if this.hero.additionalTitle.id}} id="{{this.hero.additionalTitle.id}}"{{/if}}{{#if this.hero.additionalTitle.extraAttributes}}{{#each this.hero.additionalTitle.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>
+						{{{this.hero.additionalTitle.text}}}
+					</h1>
+				{{/if}}
+				{{#if this.hero.subtitle.text}}
+				<p class="hero__subtitle{{#if this.hero.subtitle.class}} {{this.hero.subtitle.class}}{{/if}}"{{#if this.hero.subtitle.id}} id="{{this.hero.subtitle.id}}"{{/if}}{{#if this.hero.subtitle.extraAttributes}} {{#each this.hero.subtitle.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} data-theme-template="subtitle">
+					{{{this.hero.subtitle.text}}}
+				</p>
+				{{/if}}
+				{{#if this.hero.titleSubTitleWrapperClass}}</div>{{/if}}
+				{{#this.hero.valueProps}}
+					{{ fileInclude 'src/shared-components/value-props/value-props.html'
+						props = this
+					}}
+				{{/this.hero.valueProps}}
+			</div>
+			{{#unless this.hero.moveHeroContentToTop}}
+				{{#if this.hero.formTemplateInclude}}
+				<div class="hero__content">
+					{{fileInclude this.hero.formTemplateInclude
+						form = this
+					}}
+				</div>
+				{{/if}}
+			{{/unless}}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,138 @@
+$hiw-content-flex-direction-mobile: row !default;
+$hiw-content-max-width-mobile: 320px !default;
+$hiw-content-width-mobile: 90% !default;
+$hiw-content-align-items-mobile: normal !default;
+$hiw-content-flex-direction-desktop: column !default;
+$hiw-content-max-width-desktop: 100% !default;
+$hiw-content-width-desktop: 80% !default;
+$hiw-content-align-items-desktop: center !default;
+
+$hiw-card-divider: 2px dashed $color-charcoal1 !default;
+$hiw-card-divider-height-mobile: 22px !default;
+$hiw-card-divider-position-left-mobile: 29px !default;
+$hiw-card-divider-position-top-mobile: -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-margin-bottom: 0 !default;
+$hiw-text-align: center !default;
+
+$hiw-icon-height: 100px !default;
+$hiw-icon-width: $hiw-icon-height !default;
+
+$hiw-title-color: $color-charcoal5 !default;
+$hiw-title-font-size: 16px !default;
+$hiw-title-font-weight: bold !default;
+$hiw-title-line-height: 1.2 !default;
+$hiw-title-margin: 15px 0 !default;
+
+$hiw-desc-color: $color-charcoal4 !default;
+$hiw-desc-font-size-mobile: 14px !default;
+$hiw-desc-font-size-desktop: $hiw-desc-font-size-mobile !default;
+$hiw-desc-line-height: 1.57 !default;
+$hiw-desc-margin-mobile: 0 0 15px !default;
+$hiw-desc-margin-desktop: $hiw-desc-margin-mobile !default;
+
+.hiw-card {
+	margin-bottom: $hiw-card-margin-bottom;
+	text-align: $hiw-text-align;
+
+	&__wrapper {
+		margin: auto;
+		max-width: 260px;
+	}
+
+	&__icon {
+		height: $hiw-icon-height;
+		width: $hiw-icon-width;
+	}
+
+	&__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;
+	}
+
+	&__description {
+		color: $hiw-desc-color;
+		font-size: $hiw-desc-font-size-mobile;
+		line-height: $hiw-desc-line-height;
+		margin: $hiw-desc-margin-mobile;
+	}
+}
+
+.hiw-block__content {
+	display: block;
+	margin: 0 auto;
+	max-width: $hiw-content-max-width-mobile;
+	text-align: left;
+	width: $hiw-content-width-mobile;
+
+	.hiw-card {
+		flex: 1;
+		position: relative;
+		text-align: left;
+
+		&__wrapper {
+			align-items: $hiw-content-align-items-mobile;
+			display: flex;
+			flex-direction: $hiw-content-flex-direction-mobile;
+			max-width: 100%;
+		}
+
+		&__icon {
+			min-height: $hiw-icon-height;
+			min-width: $hiw-icon-width;
+		}
+
+		~ .hiw-card {
+			&:before{
+				border-left: $hiw-card-divider;
+				content: '';
+				height: $hiw-card-divider-height-mobile;
+				left: $hiw-card-divider-position-left-mobile;
+				position: absolute;
+				top: $hiw-card-divider-position-top-mobile;
+				width: 1px;
+			}
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.hiw-block__content {
+		align-items: center;
+		display: flex;
+		max-width: $hiw-content-max-width-desktop;
+		text-align: $hiw-text-align;
+		width: $hiw-content-width-desktop;
+
+		.hiw-card {
+			text-align: $hiw-text-align;
+
+			&__wrapper {
+				align-items: $hiw-content-align-items-desktop;
+				flex-direction: $hiw-content-flex-direction-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: rotate(90deg);
+				}
+			}
+		}
+	}
+
+	.hiw-card {
+		&__description {
+			font-size: $hiw-desc-font-size-desktop;
+			margin: $hiw-desc-margin-desktop;
+		}
+	}
+}

package/src/shared-components/how-it-works/how-it-works.html

@@ -0,0 +1,19 @@
+{{#xif "!this.carouselOptions"}}
+<ul class="hiw-block__content">
+{{/xif}}
+{{#each this.items}}
+	<li class="{{#if ../this.carouselOptions}}swiper-slide {{/if}}hiw-card{{#if ../this.classModifier}} {{../this.classModifier}}{{/if}}">
+		<div class="hiw-card__wrapper">
+			{{#if this.illustration}}
+			<svg class="hiw-card__icon" role="img">
+				<use href="{{#unless this.isLocalSrc}}{{#xif 'isLocal === "true"'}}/temp/assets{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{/xif}}{{/unless}}{{this.illustration}}"></use>
+			</svg>
+			{{/if}}
+			{{#if this.title}}<p class="hiw-card__title">{{{this.title}}}</p>{{/if}}
+			{{#if this.description}}<p class="hiw-card__description">{{{this.description}}}</p>{{/if}}
+		</div>
+	</li>
+{{/each}}
+{{#xif "!this.carouselOptions"}}
+</ul>
+{{/xif}}