<!-- Default -->
<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 xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink: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>
<!-- Footer -->
<div class="newsletter__footer ">
<div class="newsletter__content">
<div class="newsletter__footer--heading ">
<h2 class="newsletter__footer--title">
Wil je 10% korting op je volgende bestelling?
</h2>
<p class="newsletter__footer--subtitle">
Meld je nu aan voor de nieuwsbrief van cruc en ontvang 10% korting op je volgende aankoop.
</p>
</div>
<form class="newsletter__form newsletter__footer--form">
<div class="newsletter__footer--fields">
<div class="control">
<label for="newsletter">
<span class="label">Abonneer u op onze nieuwsbrief</span>
<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>
</label>
<div class="newsletter__footer--agreements">
<div class="checkbox newsletter__footer--checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
<a href="#" title="Privacy Policy">Privacy Policy</a>
</span>
</label>
</div>
</div>
</div>
</div>
<div class="newsletter__footer--button">
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
</form>
</div>
</div>
<!-- Default -->
<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>
<!-- Footer -->
<div class="newsletter__footer {{ class }}">
<div class="newsletter__content">
<div class="newsletter__footer--heading {{ heading.class }}">
<h2 class="newsletter__footer--title">
{{ heading.title }}
</h2>
<p class="newsletter__footer--subtitle">
{{ heading.subtitle }}
</p>
</div>
<form class="newsletter__form newsletter__footer--form">
<div class="newsletter__footer--fields">
<div class="control">
<label for="newsletter">
<span class="label">{{ label }}</span>
{{ render '@input' input }}
</label>
<div class="newsletter__footer--agreements">
{{ render '@checkbox' checkbox }}
</div>
</div>
</div>
<div class="newsletter__footer--button">
{{ render '@button' button }}
</div>
</form>
</div>
</div>
/* Default */
{
"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."
}
}
}
/* Footer */
{
"heading": {
"title": "Wil je 10% korting op je volgende bestelling?",
"subtitle": "Meld je nu aan voor de nieuwsbrief van cruc en ontvang 10% korting op je volgende aankoop."
},
"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__footer--checkbox",
"id": "newsletter",
"label": {
"text": "<a href=\"#\" title=\"Privacy Policy\">Privacy Policy</a>"
}
},
"label": "Abonneer u op onze nieuwsbrief",
"imageNewsletter": {
"dataSrc": "/images/catalog-grid-item/bedlegerig-pakket.jpeg"
}
}
$newsletter__margin : 0 !default;
$newsletter__padding : $spacer--large 0 !default;
$newsletter__heading-font-size : $font-size-base !default;
$newsletter__heading-font-weight : $font-weight-bold !default;
$newsletter__heading-line-height : 1.2 !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-width : 96px !default;
$newsletter__controls-height : 48px !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;
$newsletter__footer--background : $theme-tertiary !default;
$newsletter__footer--color : $white !default;
$newsletter__content--padding : $spacer !default;
$newsletter__content--padding\@medium : $spacer--small $spacer--medium !default;
$newsletter__content--column-gap : $spacer !default;
$newsletter__content--column-gap\@medium : $spacer--3 !default;
$newsletter__footer--label--padding : 0 0 0 $spacer--large !default;
$newsletter__footer__field--border-radius : $border-radius 0 0 $border-radius !default;
@import 'newsletter-variables';
.newsletter {
display: flex;
flex-direction: column;
margin: $newsletter__margin;
padding: $newsletter__padding;
@include mq($screen-l) {
flex-direction: row;
}
&__heading {
display: flex;
flex-flow: column nowrap;
@include mq($screen-l) {
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-l) {
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;
border-radius: 0 5px 5px 0;
}
&__input {
flex-grow: 1;
margin: 0;
input {
border-radius: 5px 0 0 5px;
}
}
&__field {
border-right: none;
}
&__agreements {
max-width: $newsletter__agreements-max-width;
margin: $newsletter__agreements-margin;
}
&__form {
flex-grow: 1;
div.required .checkbox__label > span:first-of-type:after {
content: ' *';
color: #fff;
}
svg.checkbox__icon.checkbox__icon--unchecked {
border: 0;
border-radius: 6px;
background: #fff;
}
}
.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;
}
&__footer {
background: $newsletter__footer--background;
&--title,
&--subtitle,
&--checkbox a,
.label {
color: $newsletter__footer--color;
}
label.checkbox__label {
@include mq($screen-m) {
padding: $newsletter__footer--label--padding;
}
}
&--form {
display: flex;
flex-direction: column;
@include mq($screen-m) {
flex-direction: row;
}
}
&--fields {
width: 100%;
@include mq($screen-m) {
width: 70%;
.newsletter__field {
border-radius: $newsletter__footer__field--border-radius;
}
}
}
&--button {
align-self: center;
width: 100%;
@include mq($screen-m) {
width: 30%;
}
.newsletter__button {
width: 100%;
}
}
}
&__content {
display: flex;
column-gap: $newsletter__content--column-gap;
padding: $newsletter__content--padding;
@include mq($screen-xl) {
padding: $newsletter__content--padding\@medium;
column-gap: $newsletter__content--column-gap\@medium;
}
}
&__image {
display: none;
@include mq($screen-l) {
display: block;
}
}
& ~ .newsletter {
display: none;
}
}
There are no notes for this item.