mod-build 3.6.71 → 4.0.0-alpha.1

package/src/accessible-components/information/_information.scss

@@ -0,0 +1,92 @@
+$information-background-color: $color-white !default;
+$information-border-top: 1px solid $color-charcoal1 !default;
+$information-position: relative !default;
+$information-text-align: center !default;
+
+$information-block-margin: 10px 0 35px !default;
+
+$information-content-margin: 0 auto !default;
+$information-content-max-width: 100% !default;
+$information-content-padding-bottom: 35px !default;
+$information-content-text-align: left !default;
+
+$information-title-color: $color-charcoal8 !default;
+$information-title-font-size: 1.375rem !default;
+$information-title-font-size-desktop: 1.5rem !default;
+$information-title-font-weight: 700 !default;
+$information-title-line-height: 1.25 !default;
+$information-title-margin: 0 0 15px !default;
+
+$information-summary-color: $information-title-color !default;
+$information-summary-font-size: 1rem !default;
+$information-summary-font-size-desktop: 1.125rem !default;
+$information-summary-font-weight: 400 !default;
+$information-summary-line-height: 1.35 !default;
+$information-summary-margin: 0 0 15px !default;
+
+$information-list-list-style: disc outside !default;
+$information-list-padding: 0 0 0 25px !default;
+
+$information-inprogress-display: none !default;
+
+.information {
+	background-color: $information-background-color;
+	border-top: $information-border-top;
+	position: $information-position;
+	text-align: $information-text-align;
+
+	&__block {
+		margin: $information-block-margin;
+	}
+
+	&__content {
+		margin: $information-content-margin;
+		max-width: $information-content-max-width;
+		text-align: $information-content-text-align;
+
+		&:not(.collapsed) {
+			padding-bottom: $information-content-padding-bottom;
+		}
+	}
+
+	&__title {
+		color: $information-title-color;
+		font-size: $information-title-font-size;
+		font-weight: $information-title-font-weight;
+		line-height: $information-title-line-height;
+		margin: $information-title-margin;
+	}
+
+	&__list {
+		list-style: $information-list-list-style;
+		padding: $information-list-padding;
+	}
+
+	&__summary,
+	&__list-item {
+		color: $information-summary-color;
+		font-size: $information-summary-font-size;
+		font-weight: $information-summary-font-weight;
+		line-height: $information-summary-line-height;
+		margin: $information-summary-margin;
+	}
+}
+
+.form-in-progress {
+	.information {
+		display: $information-inprogress-display;
+	}
+}
+
+@include breakpoint-md {
+	.information {
+		&__title {
+			font-size: $information-title-font-size-desktop;
+		}
+
+		&__summary,
+		&__list-item {
+			font-size: $information-summary-font-size-desktop;
+		}
+	}
+}

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

@@ -0,0 +1,26 @@
+<section class="information{{#if this.information.expandCollapse}} expand-collapse{{/if}}{{#xif 'this.information.attributes && this.information.attributes.class'}} {{this.information.attributes.class}}{{/xif}}" {{{addAttributes this.information 'class'}}}>
+	{{#this.information.expandCollapse}}
+		{{ fileInclude 'src/accessible-components/expand-collapse/expand-collapse.html'
+			expandCollapse = this
+		}}
+	{{/this.information.expandCollapse}}
+	{{#if this.information.content}}
+		<div class="information__content {{#xif 'this.information.content.attributes && this.information.content.attributes.class'}} {{this.information.content.attributes.class}}{{/xif}}{{#if this.information.expandCollapse}} expand-collapse__content{{/if}}" {{{addAttributes this.information.content 'class'}}}>
+			{{#each this.information.content.items}}
+				<div class="information__block{{#xif 'this.attributes && this.attributes.class'}} {{this.attributes.class}}{{/xif}}" {{{addAttributes this 'class'}}}>
+					<h3 class="information__title{{#xif 'this.title.attributes && this.title.attributes.class'}} {{this.title.attributes.class}}{{/xif}}" {{{addAttributes this.title 'class'}}}>{{{this.title.text}}}</h3>
+					{{#each this.summary}}
+						<p class="information__summary{{#xif 'this.attributes && this.attributes.class'}} {{this.attributes.class}}{{/xif}}" {{{addAttributes this 'class'}}}>{{{this.text}}}</p>
+					{{/each}}
+					{{#if this.list}}
+						<ul class="information__list">
+							{{#each this.list}}
+								<li class="information__list-item{{#xif 'this.attributes && this.attributes.class'}} {{this.attributes.class}}{{/xif}}" {{{addAttributes this 'class'}}}>{{{this.text}}}</li>
+							{{/each}}
+						</ul>
+					{{/if}}
+				</div>
+			{{/each}}
+		</div>
+	{{/if}}
+</section>

package/src/accessible-components/input/_input.scss

@@ -0,0 +1,202 @@
+$form-input-background-color: $color-white !default;
+$form-input-border: 1px solid darken($color-charcoal3, 5%) !default;
+$form-input-border-radius: 4px !default;
+$form-input-box-shadow: none !default;
+$form-input-color: $color-charcoal8 !default;
+$form-input-font-size: 1rem !default;
+$form-input-font-size-desktop: 1.125rem !default;
+$form-input-font-weight: 400 !default;
+$form-input-height: 48px !default;
+$form-input-line-height: 1.1875 !default;
+$form-input-margin: 0 0 15px !default;
+$form-input-padding: 15px !default;
+$form-input-placeholder-color: $color-charcoal4 !default;
+$form-input-placeholder-color-desktop: $form-input-placeholder-color !default;
+$form-input-transition-time: .15s !default;
+
+$form-input-focus-bg-color: $form-input-background-color !default;
+$form-input-focus-border: 2px solid $color-charcoal5 !default;
+
+$form-group-includes-label-background-color: transparent !default;
+$form-group-includes-label-display: block !default;
+$form-group-includes-label-input-height: 56px !default;
+$form-group-includes-label-input-padding: 15px 15px 0 !default;
+
+$form-group-label-in-input-focus-color: $color-charcoal5 !default;
+$form-group-label-in-input-focus-font-size: .75rem !default;
+$form-group-label-in-input-focus-font-weight: 700 !default;
+$form-group-label-in-input-focus-top: 8px !default;
+$form-group-label-in-input-error-color: $color-a11y-red !default;
+$form-group-label-in-input-focus-z-index: 0 !default;
+
+$form-input-error-color: $color-a11y-red !default;
+$form-input-error-border: 1px solid $form-input-error-color !default;
+$form-input-error-box-shadow: none !default;
+$form-input-error-focus-border-color: $color-a11y-red !default;
+$form-input-error-focus-box-shadow: none !default;
+$form-input-group-error-border-width: 0 !default;
+$form-input-group-input-error-border: $form-input-error-border !default;
+
+$form-input-icon-color: darken($color-charcoal3, 5%) !default;
+$form-input-icon-error-color: $color-a11y-red !default;
+$form-input-icon-font-size: 1.25rem !default;
+$form-input-icon-left: 15px !default;
+$form-input-icon-position: absolute !default;
+$form-input-icon-top: 18px !default;
+$form-input-icon-z-index: 3 !default;
+
+$form-input-textarea-min-height: 150px !default;
+$form-input-textarea-font-family: inherit !default;
+$form-input-textarea-focus-padding-top: 24px !default;
+
+.form-input-group {
+	&--includes-label {
+		display: $form-group-includes-label-display;
+		position: relative;
+
+		.form-input {
+			background-color: $form-group-includes-label-background-color;
+			height: $form-group-includes-label-input-height;
+			padding: $form-group-includes-label-input-padding;
+
+			&::placeholder {
+				opacity: 0;
+			}
+
+			&:not(:placeholder-shown),
+			&:-webkit-autofill,
+			&:-webkit-autofill:hover,
+			&:-webkit-autofill:focus,
+			&:focus {
+				background-color: $form-input-focus-bg-color;
+				border: $form-input-focus-border;
+
+				+ label {
+					color: $form-group-label-in-input-focus-color;
+					font-size: $form-group-label-in-input-focus-font-size;
+					font-weight: $form-group-label-in-input-focus-font-weight;
+					top: $form-group-label-in-input-focus-top;
+					z-index: $form-group-label-in-input-focus-z-index;
+				}
+
+				&.form-input--textarea {
+					padding-top: $form-input-textarea-focus-padding-top;
+				}
+			}
+
+			&--centered {
+				text-align: center;
+
+				+ label {
+					left: 0;
+					right: 0;
+				}
+			}
+		}
+	}
+
+	&__icon {
+		color: $form-input-icon-color;
+		font-size: $form-input-icon-font-size;
+		left: $form-input-icon-left;
+		position: $form-input-icon-position;
+		top: $form-input-icon-top;
+		transition: $base-transition;
+		z-index: $form-input-icon-z-index;
+	}
+}
+
+.form-input {
+	background-color: $form-input-background-color;
+	border: $form-input-border;
+	border-radius: $form-input-border-radius;
+	box-shadow: $form-input-box-shadow;
+	color: $form-input-color;
+	font-size: $form-input-font-size;
+	font-weight: $form-input-font-weight;
+	height: $form-input-height;
+	line-height: $form-input-line-height;
+	margin: $form-input-margin;
+	padding: $form-input-padding;
+	position: relative;
+	transition: background-color $form-input-transition-time ease-in-out, border-color $form-input-transition-time ease-in-out, box-shadow $form-input-transition-time ease-in-out;
+	width: 100%;
+
+	&::-webkit-input-placeholder {
+		color: $form-input-placeholder-color;
+	}
+
+	&::-ms-input-placeholder {
+		color: $form-input-placeholder-color;
+	}
+
+	&::placeholder {
+		color: $form-input-placeholder-color;
+	}
+
+	&:focus {
+		background-color: $form-input-focus-bg-color;
+		border: $form-input-focus-border;
+		box-shadow: none;
+	}
+
+	&--textarea {
+		font-family: $form-input-textarea-font-family;
+		min-height: $form-input-textarea-min-height;
+	}
+
+	&--border-bottom-only {
+		border-left: 0 !important;
+		border-radius: 0;
+		border-right: 0 !important;
+		border-top: 0 !important;
+	}
+}
+
+.has-error {
+	.form-input {
+		border: $form-input-error-border;
+		box-shadow: $form-input-error-box-shadow;
+		color: $form-input-error-color;
+
+		&:focus {
+			border-color: $form-input-error-focus-border-color;
+			box-shadow: $form-input-error-focus-box-shadow;
+		}
+	}
+
+	.form-input-group {
+		&--includes-label {
+			.form-input {
+				&:not(:placeholder-shown),
+				&:focus {
+					+ label {
+						color: $form-group-label-in-input-error-color;
+					}
+				}
+			}
+		}
+
+		&__icon {
+			color: $form-input-icon-error-color;
+		}
+	}
+}
+
+@include breakpoint-md {
+	.form-input {
+		font-size: $form-input-font-size-desktop;
+
+		&::-webkit-input-placeholder {
+			color: $form-input-placeholder-color-desktop;
+		}
+
+		&::-ms-input-placeholder {
+			color: $form-input-placeholder-color-desktop;
+		}
+
+		&::placeholder {
+			color: $form-input-placeholder-color-desktop;
+		}
+	}
+}

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

@@ -0,0 +1,22 @@
+{{#if this.field}}
+	{{#xif "this.field.icon || this.field.iconImageUrl || this.field.labelInInput"}}
+	<div class="form-input-group{{#xif 'this.field.icon || this.field.iconImageUrl'}} form-input-group--icon{{/xif}}{{#if this.field.labelInInput}} form-input-group--includes-label{{/if}}">
+		{{#if this.field.icon}}
+			<span class="form-input-group__icon">
+				<i class="{{this.field.icon}}" aria-hidden="true"></i>
+			</span>
+		{{/if}}
+		{{#if this.field.iconImageUrl}}
+			<span class="form-input-group__icon">
+				<img src="{{this.field.iconImageUrl}}" aria-hidden="true">
+			</span>
+		{{/if}}
+	{{/xif}}
+	<input
+		class="form-input{{#if this.field.attributes.class}} {{this.field.attributes.class}}{{/if}}"
+		{{{addAttributes this.field 'class'}}}
+	/>
+	{{#if this.field.labelInInput}}<label for="{{this.field.attributes.id}}" class="form-group__label-input">{{{this.field.labelInInput}}}</label>{{/if}}
+	{{#xif "this.field.icon || this.field.iconImageUrl || this.field.labelInInput"}}</div>{{/xif}}
+{{/if}}
+

package/src/accessible-components/input/textarea.html

@@ -0,0 +1,9 @@
+{{#if this.field}}
+	{{#if this.field.labelInInput}}<div class="form-input-group form-input-group--includes-label">{{/if}}
+	<textarea
+		type="textarea"
+		class="form-input form-input--textarea{{#if this.field.attributes.class}} {{this.field.attributes.class}}{{/if}}"
+		{{{addAttributes this.field 'class' 'type'}}}
+	></textarea>
+	{{#if this.field.labelInInput}}<label class="form-group__label-input">{{{this.field.labelInInput}}}</label></div>{{/if}}
+{{/if}}

package/src/accessible-components/partners/_partners.scss

@@ -0,0 +1,232 @@
+$partners-background: rgba($color-charcoal1, .2) !default;
+$partners-border-bottom: 0 !default;
+$partners-padding: 20px 0 !default;
+$partners-padding-desktop: 35px 0 !default;
+$partners-text-align: center !default;
+
+$partners-header-max-width-xl: 400px !default;
+$partners-header-text-align-xl: $partners-text-align !default;
+$partners-container-align-items-xl: center !default;
+$partners-container-display-xl: flex !default;
+$partners-container-justify-content-xl: space-between !default;
+
+$partners-title-color: $color-charcoal8 !default;
+$partners-title-font-size: 1.375rem !default;
+$partners-title-font-size-desktop: 1.5rem !default;
+$partners-title-font-weight: 400 !default;
+$partners-title-line-height: 1.25 !default;
+$partners-title-margin: 0 0 5px !default;
+
+$partners-subtitle-color: $color-charcoal4 !default;
+$partners-subtitle-font-size: .75rem !default;
+$partners-subtitle-font-size-desktop: $partners-subtitle-font-size !default;
+$partners-subtitle-font-style: normal !default;
+$partners-subtitle-font-weight: 400 !default;
+$partners-subtitle-line-height: 1.35 !default;
+$partners-subtitle-margin: 0 0 15px !default;
+
+$partners-companies-align-items: center !default;
+$partners-companies-display: flex !default;
+$partners-companies-flex-wrap: wrap !default;
+$partners-companies-justify-content: center !default;
+
+$partners-logo-margin: 10px !default;
+$partners-logo-margin-desktop: 10px 15px !default;
+
+$partners-logo-image-height: 43px !default;
+$partners-logo-image-max-width: 150px !default;
+
+$partners-benefits-color: $partners-title-color !default;
+$partners-benefits-font-size: .625rem !default;
+$partners-benefits-font-weight: 400 !default;
+$partners-benefits-line-height: 1.35 !default;
+$partners-benefits-list-style: none !default;
+$partners-benefits-text-align: left !default;
+
+$partners-featured-padding-bottom: 20px !default;
+$partners-featured-margin-bottom: $partners-featured-padding-bottom !default;
+$partners-featured-padding-bottom-xl: 0 !default;
+$partners-featured-margin-bottom-xl: $partners-featured-padding-bottom-xl !default;
+$partners-featured-text-align: center !default;
+$partners-featured-text-display: inline-block !default;
+$partners-featured-text-display-xl: block !default;
+$partners-featured-text-align-xl: $partners-featured-text-align !default;
+$partners-featured-text-color: $color-charcoal8 !default;
+$partners-featured-text-font-size: 1rem !default;
+$partners-featured-text-margin: 0 5px 0 0 !default;
+$partners-featured-text-margin-xl: 0 0 5px !default;
+$partners-featured-image-max-width: 115px !default;
+$partners-featured-border-color: $color-charcoal1 !default;
+$partners-featured-border-width: 100vw !default;
+$partners-featured-border-height: 1px !default;
+$partners-featured-border-color-xl: $partners-featured-border-color !default;
+$partners-featured-border-width-xl: $partners-featured-border-width !default;
+
+$partners-more-brands-align-items: center !default;
+$partners-more-brands-color: $partners-title-color !default;
+$partners-more-brands-display: flex !default;
+$partners-more-brands-font-size: 1rem !default;
+$partners-more-brands-font-size-desktop: 1.125rem !default;
+$partners-more-brands-font-weight: 400 !default;
+$partners-more-brands-line-height: 1.25 !default;
+$partners-more-brands-text-align: left !default;
+
+$partners-more-brands-icon-font-size: 32px !default;
+$partners-more-brands-icon-font-weight: bold !default;
+$partners-more-brands-icon-margin: 0 15px 0 0 !default;
+
+$partners-inprogress-display: none !default;
+
+.partners {
+	background: $partners-background;
+	border-bottom: $partners-border-bottom;
+	padding: $partners-padding;
+	text-align: $partners-text-align;
+
+	&__title {
+		color: $partners-title-color;
+		font-size: $partners-title-font-size;
+		font-weight: $partners-title-font-weight;
+		line-height: $partners-title-line-height;
+		margin: $partners-title-margin;
+	}
+
+	&__subtitle,
+	&__disclaimer {
+		color: $partners-subtitle-color;
+		font-size: $partners-subtitle-font-size;
+		font-style: $partners-subtitle-font-style;
+		font-weight: $partners-subtitle-font-weight;
+		line-height: $partners-subtitle-line-height;
+		margin: $partners-subtitle-margin;
+	}
+
+	&__companies {
+		align-items: $partners-companies-align-items;
+		display: $partners-companies-display;
+		flex-wrap: $partners-companies-flex-wrap;
+		justify-content: $partners-companies-justify-content;
+	}
+
+	&__logo {
+		margin: $partners-logo-margin;
+
+		img {
+			height: $partners-logo-image-height;
+			max-width: $partners-logo-image-max-width;
+		}
+	}
+
+	&__benefits {
+		color: $partners-benefits-color;
+		font-size: $partners-benefits-font-size;
+		font-weight: $partners-benefits-font-weight;
+		line-height: $partners-benefits-line-height;
+		list-style: $partners-benefits-list-style;
+		text-align: $partners-benefits-text-align;
+	}
+
+	&__more-brands {
+		align-items: $partners-more-brands-align-items;
+		color: $partners-more-brands-color;
+		display: $partners-more-brands-display;
+		font-size: $partners-more-brands-font-size;
+		font-weight: $partners-more-brands-font-weight;
+		line-height: $partners-more-brands-line-height;
+		text-align: $partners-more-brands-text-align;
+
+		.icon-add {
+			font-size: $partners-more-brands-icon-font-size;
+			font-weight: $partners-more-brands-icon-font-weight;
+			margin: $partners-more-brands-icon-margin;
+		}
+	}
+
+	&__featured-in {
+		margin-bottom: $partners-featured-margin-bottom;
+		padding-bottom: $partners-featured-padding-bottom;
+		position: relative;
+		text-align: $partners-featured-text-align;
+
+		&:after {
+			content: '';
+			background-color: $partners-featured-border-color;
+			position: absolute;
+			bottom: 0;
+			height: $partners-featured-border-height;
+			width: $partners-featured-border-width;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
+		p {
+			color: $partners-featured-text-color;
+			display: $partners-featured-text-display;
+			font-size: $partners-featured-text-font-size;
+			margin: $partners-featured-text-margin;
+		}
+
+		img {
+			max-width: $partners-featured-image-max-width;
+		}
+	}
+}
+
+.form-in-progress {
+	.partners {
+		display: $partners-inprogress-display;
+	}
+}
+
+@include breakpoint-md {
+	.partners {
+		padding: $partners-padding-desktop;
+
+		&__title {
+			font-size: $partners-title-font-size-desktop;
+		}
+
+		&__logo {
+			margin: $partners-logo-margin-desktop;
+		}
+
+		&__subtitle,
+		&__disclaimer {
+			font-size: $partners-subtitle-font-size-desktop;
+		}
+
+		&__more-brands {
+			font-size: $partners-more-brands-font-size-desktop;
+		}
+	}
+}
+
+@include breakpoint-xl {
+	.partners {
+		&__container {
+			align-items: $partners-container-align-items-xl;
+			display: $partners-container-display-xl;
+			justify-content: $partners-container-justify-content-xl;
+		}
+
+		&__header {
+			max-width: $partners-header-max-width-xl;
+			text-align: $partners-header-text-align-xl;
+		}
+
+		&__featured-in {
+			margin-bottom: $partners-featured-padding-bottom-xl;
+			padding-bottom: $partners-featured-padding-bottom-xl;
+			text-align: $partners-featured-text-align-xl;
+
+			&:after {
+				display: none;
+			}
+
+			p {
+				display: $partners-featured-text-display-xl;
+				margin: $partners-featured-text-margin-xl;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,56 @@
+<section class="partners{{#xif 'this.partners.attributes && this.partners.attributes.class'}} {{this.partners.attributes.class}}{{/xif}}" {{{addAttributes this.partners 'class'}}}>
+	<div class="partners__container container">
+		{{#if this.partners.featuredIn}}
+			<div class="partners__featured-in">
+				{{#if this.partners.featuredIn.text}}
+					<p>{{{this.partners.featuredIn.text}}}</p>
+				{{/if}}
+				{{#if this.partners.featuredIn.picture}}
+					{{ fileInclude 'src/accessible-components/picture/picture.html'
+						picture = this.partners.featuredIn.picture
+					}}
+				{{/if}}
+			</div>
+		{{/if}}
+		<div class="partners__header">
+			{{#if this.partners.title}}
+				<h2 class="partners__title{{#xif 'this.partners.title.attributes && this.partners.title.attributes.class'}} {{this.partners.title.attributes.class}}{{/xif}}" {{{addAttributes this.partners.title 'class'}}}>{{{this.partners.title.text}}}</h2>
+			{{/if}}
+			{{#if this.partners.subtitle}}
+				<p class="partners__subtitle{{#xif 'this.partners.subtitle.attributes && this.partners.subtitle.attributes.class'}} {{this.partners.subtitle.attributes.class}}{{/xif}}" {{{addAttributes this.partners.subtitle 'class'}}}>{{{this.partners.subtitle.text}}}</p>
+			{{/if}}
+		</div>
+		{{#if this.partners.companies}}
+			<ul class="partners__companies{{#xif 'this.partners.companies.attributes && this.partners.companies.attributes.class'}} {{this.partners.companies.attributes.class}}{{/xif}}" {{{addAttributes this.partners.companies 'class'}}}>
+				{{#each this.partners.companies.items}}
+					<li class="partners__logo{{#xif 'this.attributes && this.attributes.class'}} {{this.attributes.class}}{{/xif}}" {{{addAttributes this 'class'}}}>
+						{{#if this.picture}}
+							{{ fileInclude 'src/accessible-components/picture/picture.html'
+								picture = this.picture
+							}}
+						{{/if}}
+						{{#if this.benefits}}
+							<ul class="partners__benefits{{#xif 'this.benefits.attributes && this.benefits.attributes.class'}} {{this.benefits.attributes.class}}{{/xif}}" {{{addAttributes this.benefits 'class'}}}>
+							{{#each this.benefits.items}}
+								<li>{{{this}}}</li>
+							{{/each}}
+							</ul>
+						{{/if}}
+					</li>
+				{{/each}}
+				{{#if this.partners.companies.moreBrands}}
+					<li class="partners__logo partners__more-brands">
+						{{#if this.partners.companies.moreBrands.includePlusIcon}}
+							<i class="icon-add" aria-hidden="true"></i>
+							<span class="visually-hidden">Plus</span>
+						{{/if}}
+						{{{this.partners.companies.moreBrands.text}}}
+					</li>
+				{{/if}}
+			</ul>
+		{{/if}}
+		{{#if this.partners.disclaimer}}
+			<p class="partners__disclaimer{{#xif 'this.partners.disclaimer.attributes && this.partners.disclaimer.attributes.class'}} {{this.partners.disclaimer.attributes.class}}{{/xif}}" {{{addAttributes this.partners.disclaimer 'class'}}}>{{{this.partners.disclaimer.text}}}</p>
+		{{/if}}
+	</div>
+</section>

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

@@ -0,0 +1,19 @@
+{{#if this.picture}}
+	{{#if this.picture.source}}
+		<picture {{#xif "this.picture.attributes && this.picture.attributes.class || this.class"}}class="{{#if this.picture.attributes.class}}{{this.picture.attributes.class}} {{/if}}{{#if this.class}}{{this.class}}{{/if}}"{{/xif}} {{{addAttributes this.picture 'class'}}}>
+			{{#each this.picture.source}}
+				<source srcset="{{#if ../this.picture.useCDN}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.attributes.srcset}}{{else}}{{this.attributes.srcset}}{{/if}}" {{{addAttributes this 'srcset'}}}>
+			{{/each}}
+			<img src="{{#if this.picture.useCDN}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.picture.img.attributes.src}}{{else}}{{this.picture.img.attributes.src}}{{/if}}" {{{addAttributes this.picture.img 'src'}}}/>
+		</picture>
+	{{else if this.picture.svg}}
+		<svg {{#xif "this.picture.svg.attributes && this.picture.svg.attributes.class || this.class"}}class="{{#if this.picture.svg.attributes.class}}{{this.picture.svg.attributes.class}} {{/if}}{{#if this.class}}{{this.class}}{{/if}}"{{/xif}} {{{addAttributes this.picture.svg 'class'}}}>
+			{{#if this.picture.svg.title}}
+				<title {{{addAttributes this.picture.svg.title}}}>{{{this.picture.svg.title.text}}}</title>
+			{{/if}}
+			<use href="{{#if this.picture.useCDN}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.picture.svg.use.attributes.href}}{{else}}{{this.picture.svg.use.attributes.href}}{{/if}}" {{{addAttributes this.picture.svg.use 'href'}}}/>
+		</svg>
+	{{else}}
+		<img {{#xif "this.picture.img.attributes && this.picture.img.attributes.class || this.class"}}class="{{#if this.picture.img.attributes.class}}{{this.picture.img.attributes.class}} {{/if}}{{#if this.class}}{{this.class}}{{/if}}"{{/xif}} src="{{#if this.picture.useCDN}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.picture.img.attributes.src}}{{else}}{{this.picture.img.attributes.src}}{{/if}}" {{{addAttributes this.picture.img 'class' 'src'}}}/>
+	{{/if}}
+{{/if}}