<div class="newsletter ">
<div class="newsletter__heading ">
<h2 class="newsletter__title">
JOIN OUR EMAIL LIST
</h2>
<p class="newsletter__subtitle">
Sign up for savings and product announcements
</p>
</div>
<form class="newsletter__form">
<div class="newsletter__controls">
<div class="input newsletter__input">
<label class="
label
input__label
label--hidden
newsletter__label
" for="newsletterEmail">
Email for newsletter subscription
</label>
<input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
</div>
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
<div class="newsletter__agreements">
<div class="checkbox newsletter__checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
I agree to <a href="#" title="Terms and conditions">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions.
</span>
</label>
</div>
</div>
</form>
</div>
<div class="newsletter {{ class }}">
<div class="newsletter__heading {{ heading.class }}">
<h2 class="newsletter__title">
{{ heading.title }}
</h2>
<p class="newsletter__subtitle">
{{ heading.subtitle }}
</p>
</div>
<form class="newsletter__form">
<div class="newsletter__controls">
{{ render '@input' input }}
{{ render '@button' button }}
</div>
<div class="newsletter__agreements">
{{ render '@checkbox' checkbox }}
</div>
</form>
</div>
{
"heading": {
"title": "JOIN OUR EMAIL LIST",
"subtitle": "Sign up for savings and product announcements"
},
"input": {
"class": "newsletter__input",
"field": {
"placeholder": "Enter your email",
"id": "newsletterEmail",
"name": "newsletterEamil",
"class": "newsletter__field"
},
"label": {
"class": "newsletter__label",
"hidden": true,
"text": "Email for newsletter subscription"
}
},
"button": {
"tag": "button",
"text": "Sign Up",
"class": "button--secondary newsletter__button"
},
"checkbox": {
"class": "newsletter__checkbox",
"id": "newsletter",
"label": {
"text": "I agree to <a href=\"#\" title=\"Terms and conditions\">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions."
}
}
}
$newsletter__margin : 0 !default;
$newsletter__padding : $spacer--large 0 !default;
$newsletter__heading-padding : $spacer 0 !default;
$newsletter__heading-margin\@medium : 0 $spacer--large 0 0 !default;
$newsletter__heading-margin\@extra-large : 0 $spacer--extra-large * 2 0 0 !default;
$newsletter__heading-padding\@extra-large : 0 !default;
$newsletter__title-margin : 0 0 $spacer--medium !default;
$newsletter__title-font-family : $font-family-base !default;
$newsletter__title-font-size : $font-size-large !default;
$newsletter__title-font-weight : $font-weight-bold !default;
$newsletter__title-line-height : 48px !default;
$newsletter__title-color : $color-primary !default;
$newsletter__subtitle-font-family : $font-family-base !default;
$newsletter__subtitle-color : $color-secondary !default;
$newsletter__controls-margin : 0 0 $spacer !default;
$newsletter__controls-margin\@medium : 0 0 $spacer--medium !default;
$newsletter__button-padding : 0 $spacer--medium !default;
$newsletter__button-min-width : 96px !default;
$newsletter__checkbox-label-padding : $checkbox__label-padding !default;
$newsletter__checkbox-label-color : $color-secondary !default;
$newsletter__checkbox-label-link-color : $color-primary !default;
$newsletter__checkbox-label-link-color--hover : $color-focus !default;
$newsletter__checkbox-label-font-family : $font-family-base !default;
$newsletter__checkbox-label-font-size : $font-size-small !default;
$newsletter__checkbox-label-line-height : 1.33 !default;
$newsletter__checkbox-before-background : $color-primary !default;
$newsletter__checkbox-icon-fill : $white !default;
$newsletter__checkbox-text-color : $gray-dark !default;
$newsletter__agreements-margin : 0 0 0 $spacer !default;
$newsletter__agreements-max-width : 450px !default;
@import 'newsletter-variables';
.newsletter {
display: flex;
flex-direction: column;
margin: $newsletter__margin;
padding: $newsletter__padding;
@include mq($screen-m) {
flex-direction: row;
}
&__heading {
display: flex;
flex-flow: column nowrap;
@include mq($screen-m) {
margin: $newsletter__heading-margin\@medium;
}
@include mq($screen-xl) {
margin: $newsletter__heading-margin\@extra-large;
}
}
&__title {
margin: $newsletter__title-margin;
font-family: $newsletter__title-font-family;
font-size: $newsletter__title-font-size;
font-weight: $newsletter__title-font-weight;
line-height: $newsletter__title-line-height;
color: $newsletter__title-color;
}
&__subtitle {
color: $newsletter__subtitle-color;
font-family: $newsletter__subtitle-font-family;
}
&__controls {
display: flex;
margin: $newsletter__controls-margin;
@include mq($screen-m) {
margin: $newsletter__controls-margin\@medium;
}
@include mq($screen-xl) {
max-width: 460px;
}
}
&__button {
min-width: $newsletter__button-min-width;
padding: $newsletter__button-padding;
align-self: flex-start;
}
&__input {
flex-grow: 1;
margin: 0;
}
&__field {
border-right: none;
}
&__agreements {
max-width: $newsletter__agreements-max-width;
margin: $newsletter__agreements-margin;
}
&__form {
flex-grow: 1;
}
.checkbox {
&__label {
padding: $newsletter__checkbox-label-padding;
color: $newsletter__checkbox-label-color;
font-family: $newsletter__checkbox-label-font-family;
font-size: $newsletter__checkbox-label-font-size;
line-height: $newsletter__checkbox-label-line-height;
&:after {
background-color: $newsletter__checkbox-before-background;
}
a {
color: $newsletter__checkbox-label-link-color;
font-family: $newsletter__checkbox-label-font-family;
line-height: $newsletter__checkbox-label-line-height;
&:hover,
&.focus-visible {
color: $newsletter__checkbox-label-link-color--hover;
}
}
}
&__icon {
fill: $newsletter__checkbox-icon-fill;
}
&__text {
color: $newsletter__checkbox-text-color;
}
}
.gdpr {
margin: $newsletter__agreements-margin;
}
}
No notes defined.