Kistenkoning components for Magento 2

Newsletter: 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>
 
<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               : $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-second !default;
$newsletter__footer--color                    : $white !default;
$newsletter__content--padding                 : 0 0 $spacer--m !default;
$newsletter__content--padding\@medium         : 0 0 $spacer--xxl !default;
$newsletter__content--column-gap              : $spacer--1 !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;
    }

    &__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;
        div.required .checkbox__label > span:first-of-type:after {
            content: ' *';
            color: #fff;
        }
        svg.checkbox__icon.checkbox__icon--unchecked {
            border: 3px solid #fc9200;
            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.5 KB

There are no notes for this item.