<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>
<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."
    }
  }
}
  • Content:
    $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               : $black !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-primary !default;
    $newsletter__footer--color                    : $white !default;
    $newsletter__content--padding                 : 3rem 0 !default;
    $newsletter__content--padding\@medium         : 4rem !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;
    
  • URL: /components/raw/newsletter/_newsletter-variables.scss
  • Filesystem Path: build/components/Organisms/newsletter/_newsletter-variables.scss
  • Size: 3.1 KB
  • Content:
    @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;
            }
        }
    }
    
  • URL: /components/raw/newsletter/_newsletter.scss
  • Filesystem Path: build/components/Organisms/newsletter/_newsletter.scss
  • Size: 4.6 KB

There are no notes for this item.