<div class="
        banner
        banner--category
        banner--category-image
        
    ">
    <div class="banner__wrapper">
        <div class="banner__image-wrapper">
            <picture class="image banner__image">
                <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-category_304x168.jpg" media="(max-width: 480px)" />
                <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-category_944x312.jpg" media="(max-width: 960px)" />
                <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-category_1328x312.jpg" media="" />

                <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/bannerbanner-category_304x168.jpg" alt="banner-image" />
            </picture>

        </div>
        <div class="banner__heading-wrapper">
            <div class="banner__heading">
                <h1 class="">
                    Clothing
                </h1>

            </div>
            <button class="button button--icon banner__button banner__button-collapse" type="button" aria-label="see category description" aria-expanded="false">

                <span class="button__text banner__button-text">
                    More information
                </span>

                <svg class="icon banner__button-icon" role="presentation" focusable="false">
                    <use href="/images/icons-sprite.svg#angle-down"></use>
                </svg>

            </button>

        </div>
    </div>
    <div class="banner__content--category" tabindex="-1" aria-hidden="true">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nihil saepe modi iste deleniti ut impedit necessitatibus architecto at. Itaque nobis praesentium velit nesciunt voluptates ipsa error sint consectetur culpa? Minus sunt numquam aspernatur, illo itaque quos nobis magni expedita non harum odit soluta, mollitia totam ad aliquam dolorem accusamus assumenda ea incidunt? Voluptas esse quas blanditiis. Asperiores, nulla assumenda. Expedita repellendus reprehenderit officiis sequi saepe nulla, harum recusandae quaerat maiores enim id architecto sint modi veniam velit et temporibus veritatis magni reiciendis molestiae amet sed aspernatur voluptas. Consequuntur, impedit. Iure, laborum incidunt consectetur sequi recusandae mollitia fugiat praesentium quas omnis officia eius ducimus soluta reiciendis ipsam alias adipisci expedita eos obcaecati eum vero exercitationem qui accusamus maiores. Assumenda, voluptas! Ipsum iusto tenetur quidem eligendi, dolores eos assumenda asperiores consequatur ipsa accusantium ex inventore, modi, corrupti non! Quisquam, reprehenderit perferendis voluptatem, debitis rerum, nisi nam velit labore laboriosam error maxime? Veritatis optio molestiae esse tempore labore amet aut odit deleniti nesciunt itaque, delectus sunt, aliquam eius laborum! Vel fuga sit officiis? Dolorem nihil ad fugit voluptates, doloremque sit provident cumque. Sapiente pariatur inventore architecto at quam nemo ipsum, quos ipsa impedit tempore commodi voluptatum recusandae nulla totam eaque dolorum praesentium animi, laborum voluptatibus! Incidunt doloremque doloribus voluptas? A, rem quaerat. Natus numquam quae illo veritatis saepe similique vel ab, error sapiente sed eum modi cumque non praesentium itaque dolorem laboriosam, culpa explicabo voluptatibus voluptate! Quis delectus atque repellendus odio ducimus? Officia adipisci exercitationem nemo non fugiat accusamus atque. Vel tempore expedita, harum nisi ut commodi quas consequatur delectus. Quis perferendis ratione reprehenderit omnis libero tempore, dolores deleniti obcaecati odio officiis. Ipsa iste adipisci sint tempore explicabo optio veritatis quam in hic laboriosam deleniti, repellat quo aliquam minus similique. Delectus a provident sit odit eligendi deserunt, et officia ratione velit in.</p>
        <div class="banner__actions-wrapper">
            <button class="button button--icon banner__button banner__button-close margin-vc-xs" type="button" aria-label="button">

                <span class="button__text banner__button-text">
                    Hide details
                </span>

                <svg class="icon banner__button-icon margin-right-m" role="presentation" focusable="false">
                    <use href="/images/icons-sprite.svg#angle-up"></use>
                </svg>

            </button>

        </div>
    </div>
</div>

<script src="/components/raw/banner/banner.js" defer></script>
<div
    class="
        banner
        banner--category
        banner--category-image
        {{ class }}
    "
>
     <div class="banner__wrapper">
        <div class="banner__image-wrapper">
            {{ render '@image--picture' imageCategory megre=true }}
        </div>
        <div class="banner__heading-wrapper">
            <div class="banner__heading">
                {{ render '@heading' heading merge=true }}
            </div>
            {{ render '@button--icon' buttonCollapse }}
        </div>
    </div>
    <div
        class="banner__content--category"
        tabindex="-1"
        aria-hidden="true"
    >
        {{{ textContent }}}
        <div class="banner__actions-wrapper">
            {{ render '@button--icon' buttonClose }}
        </div>
    </div>
</div>

<script src="{{ static 'banner.js' }}" defer></script>
{
  "link": "#",
  "attributes": "aria-label=\"descriptive text about banner action and / or image\"",
  "image": {
    "defaultSrc": "/images/banner/banner-320_176.jpg",
    "sources": [
      {
        "src": "/images/banner/banner-320_176.jpg",
        "mediaQuery": "(max-width: 480px)"
      },
      {
        "src": "/images/banner/banner-768_416.jpg",
        "mediaQuery": "(max-width: 960px)"
      },
      {
        "src": "/images/banner/banner-1024_416.jpg",
        "mediaQuery": "(max-width: 1328px)"
      },
      {
        "src": "/images/banner/banner-1920_512.jpg",
        "mediaQuery": ""
      }
    ],
    "alt": "banner-image"
  },
  "imageCategory": {
    "class": "banner__image",
    "defaultSrc": "/images/bannerbanner-category_304x168.jpg",
    "sources": [
      {
        "src": "/images/banner/banner-category_304x168.jpg",
        "mediaQuery": "(max-width: 480px)"
      },
      {
        "src": "/images/banner/banner-category_944x312.jpg",
        "mediaQuery": "(max-width: 960px)"
      },
      {
        "src": "/images/banner/banner-category_1328x312.jpg",
        "mediaQuery": ""
      }
    ],
    "alt": "banner-image"
  },
  "buttonCollapse": {
    "tag": "button",
    "class": "banner__button banner__button-collapse",
    "attributes": "type=\"button\" aria-label=\"see category description\" aria-expanded=\"false\"",
    "text": "More information",
    "textClass": "banner__button-text",
    "iconAfter": {
      "id": "angle-down",
      "class": "banner__button-icon",
      "hidden": true
    }
  },
  "buttonClose": {
    "tag": "button",
    "class": "banner__button banner__button-close margin-vc-xs",
    "attributes": "type=\"button\" aria-label=\"button\"",
    "text": "Hide details",
    "textClass": "banner__button-text",
    "iconAfter": {
      "id": "angle-up",
      "class": "banner__button-icon margin-right-m",
      "hidden": true
    }
  },
  "textContent": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nihil saepe modi iste deleniti ut impedit necessitatibus architecto at. Itaque nobis praesentium velit nesciunt voluptates ipsa error sint consectetur culpa? Minus sunt numquam aspernatur, illo itaque quos nobis magni expedita non harum odit soluta, mollitia totam ad aliquam dolorem accusamus assumenda ea incidunt? Voluptas esse quas blanditiis. Asperiores, nulla assumenda. Expedita repellendus reprehenderit officiis sequi saepe nulla, harum recusandae quaerat maiores enim id architecto sint modi veniam velit et temporibus veritatis magni reiciendis molestiae amet sed aspernatur voluptas. Consequuntur, impedit. Iure, laborum incidunt consectetur sequi recusandae mollitia fugiat praesentium quas omnis officia eius ducimus soluta reiciendis ipsam alias adipisci expedita eos obcaecati eum vero exercitationem qui accusamus maiores. Assumenda, voluptas! Ipsum iusto tenetur quidem eligendi, dolores eos assumenda asperiores consequatur ipsa accusantium ex inventore, modi, corrupti non! Quisquam, reprehenderit perferendis voluptatem, debitis rerum, nisi nam velit labore laboriosam error maxime? Veritatis optio molestiae esse tempore labore amet aut odit deleniti nesciunt itaque, delectus sunt, aliquam eius laborum! Vel fuga sit officiis? Dolorem nihil ad fugit voluptates, doloremque sit provident cumque. Sapiente pariatur inventore architecto at quam nemo ipsum, quos ipsa impedit tempore commodi voluptatum recusandae nulla totam eaque dolorum praesentium animi, laborum voluptatibus! Incidunt doloremque doloribus voluptas? A, rem quaerat. Natus numquam quae illo veritatis saepe similique vel ab, error sapiente sed eum modi cumque non praesentium itaque dolorem laboriosam, culpa explicabo voluptatibus voluptate! Quis delectus atque repellendus odio ducimus? Officia adipisci exercitationem nemo non fugiat accusamus atque. Vel tempore expedita, harum nisi ut commodi quas consequatur delectus. Quis perferendis ratione reprehenderit omnis libero tempore, dolores deleniti obcaecati odio officiis. Ipsa iste adipisci sint tempore explicabo optio veritatis quam in hic laboriosam deleniti, repellat quo aliquam minus similique. Delectus a provident sit odit eligendi deserunt, et officia ratione velit in.</p>",
  "heading": {
    "text": "Clothing"
  }
}
  • Content:
    $banner__width                                              : 100% !default;
    $banner__text-decoration                                    : none !default;
    
    $banner__image-width                                        : 100% !default;
    
    $banner__content-padding                                    : $spacer--medium $spacer--extra-small $spacer--small !default;
    $banner__content-padding\@medium                            : $spacer--medium 0 $spacer--small $spacer--semi-medium !default;
    $banner__content-padding--category                          : $spacer--medium !default;
    $banner__content-padding--category\@medium                  : $spacer--semi-large $spacer--semi-medium !default;
    $banner__content-padding--category\@large                   : $spacer--semi-large $spacer--semi-large * 2 !default;
    $banner__content-border                                     : $spacer--extra-small solid $gray-light !default;
    $banner__content-background                                 : $bg-color-base !default;
    $banner__content-after-height                               : $spacer--extra-small !default;
    $banner__content-after-background                           : $color-primary !default;
    $banner__content-after-transition                           : $transition-base !default;
    $banner__content-after-left                                 : $spacer !default;
    $banner__content-after-width-hover                          : calc(100% - #{2 * $spacer}) !default;
    $banner__content-after-min-width                            : 0 !default;
    
    $banner__text-margin                                        : 0 !default;
    $banner__text-color                                         : $color-primary !default;
    $banner__text-font-size                                     : $font-size-base !default;
    $banner__text-font-size\@medium                             : $font-size-large !default;
    $banner__text-font-weight                                   : $font-weight-bold !default;
    $banner__text-text-transform                                : uppercase !default;
    
    $banner__icon-size                                          : 48px !default;
    
    $banner__button-collapse-transform                          : rotate(180deg) !default;
    $banner__button-padding--category                           : 0 !default;
    $banner__button-text-color-hover--category                  : $color-primary !default;
    $banner__button-icon-fill-hover--category                   : $color-primary !default;
    $banner__button-text-decoration--category                   : underline !default;
    $banner__button-collapse-position--category\@large          : absolute !default;
    $banner__button-collapse-right--category\@large             : 0 !default;
    $banner__button-collapse-position--category-image\@large    : relative !default;
    $banner__button-text-margin--category-image                 : 0 $spacer 0 0 !default;
    
    $banner__actions-wrapper-padding                            : $spacer--medium 0 0 0 !default;
    
    $banner__heading-wrapper-padding--category-image            : 0 0 0 $spacer--medium !default;
    $banner__heading-wrapper-position--category-image\@medium   : absolute !default;
    $banner__heading-wrapper-bottom--category-image\@medium     : 32px !default;
    $banner__heading-wrapper-bottom--category-image\@large      : 40px !default;
    $banner__heading-wrapper-bottom--category-image\@xl         : 48px !default;
    $banner__heading-wrapper-left--category-image\@medium       : 32px !default;
    $banner__heading-wrapper-left--category-image\@large        : 48px !default;
    $banner__heading-wrapper-left--category-image\@xl           : 56px !default;
    $banner__heading-wrapper-background--category-image\@medium : $white !default;
    $banner__heading-wrapper-width--category-image\@medium      : 100% !default;
    $banner__heading-wrapper-max-width--category-image\@medium  : 375px !default;
    $banner__heading-wrapper-padding--category-image\@medium    : $spacer--semi-medium $spacer--large $spacer--medium !default;
    
    $banner__heading-margin--category                           : 0 !default;
    $banner__heading-margin--category-image                     : $spacer--semi-medium 0 0 !default;
    $banner__heading-margin--category-image\@medium             : 0 !default;
    
  • URL: /components/raw/banner/_banner-variables.scss
  • Filesystem Path: build/components/Organisms/banner/_banner-variables.scss
  • Size: 4.2 KB
  • Content:
    @import 'banner-variables';
    
    .banner {
        position: relative;
        display: block;
        width: $banner__width;
        text-decoration: $banner__text-decoration;
        @include darken-layout-hover('.ratio-container');
    
        &:hover,
        &.focus-visible {
            text-decoration: $banner__text-decoration;
    
            .banner__content {
                &:after {
                    width: $banner__content-after-width-hover;
                }
            }
        }
    
        &__image {
            width: $banner__image-width;
        }
    
        &__content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: $banner__content-padding;
            border-bottom: $banner__content-border;
            background: $banner__content-background;
    
            @include mq($screen-m) {
                padding: $banner__content-padding\@medium;
            }
    
            &--category {
                display: none;
                padding: $banner__content-padding--category;
    
                @include mq($screen-m) {
                    padding: $banner__content-padding--category\@medium;
                }
    
                @include mq($screen-l) {
                    padding: $banner__content-padding--category\@large;
                }
            }
    
            &:after {
                content: '';
                position: absolute;
                left: $banner__content-after-left;
                bottom: 0;
                width: 0;
                min-width: $banner__content-after-min-width;
                height: $banner__content-after-height;
                background: $banner__content-after-background;
                transition: $banner__content-after-transition;
            }
        }
    
        &__text {
            margin: $banner__text-margin;
            color: $banner__text-color;
            font-size: $banner__text-font-size;
            font-weight: $banner__text-font-weight;
            text-transform: $banner__text-text-transform;
    
            @include mq($screen-m) {
                font-size: $banner__text-font-size\@medium;
            }
        }
    
        &__icon {
            display: none;
            justify-content: center;
            align-items: center;
            width: $banner__icon-size;
            height: $banner__icon-size;
    
            @include mq($screen-m) {
                display: flex;
            }
        }
    
        &__image-wrapper {
            position: relative;
        }
    
        &__actions-wrapper {
            display: flex;
            flex-direction: column;
            padding: $banner__actions-wrapper-padding;
    
            @include mq($screen-l) {
                flex-direction: row-reverse;
                justify-content: space-between;
            }
        }
    
        &--category {
            position: static;
    
            .banner__image-wrapper {
                display: flex;
                flex-direction: column;
            }
    
            .banner__button {
                padding: $banner__button-padding--category;
    
                &:hover {
                    &:before,
                    &:after {
                        display: none;
                    }
    
                    .banner__button-text {
                        color: $banner__button-text-color-hover--category;
                    }
    
                    .banner__button-icon {
                        fill: $banner__button-icon-fill-hover--category;
                    }
                }
            }
    
            .banner__button-text {
                text-decoration: $banner__button-text-decoration--category;
            }
    
            .banner__button-collapse {
                @include mq($screen-l) {
                    position: $banner__button-collapse-position--category\@large;
                    right: $banner__button-collapse-right--category\@large;
                }
            }
    
            .banner__button-close {
                &:hover {
                    &:before,
                    &:after {
                        display: none;
                    }
                }
    
                @include mq($screen-l) {
                    justify-content: flex-end;
                }
            }
    
            .banner__wrapper {
                position: relative;
            }
    
            .banner__heading-wrapper {
                display: flex;
                flex-direction: column;
            }
    
            .banner__heading {
                .heading {
                    margin: $banner__heading-margin--category;
                }
            }
        }
    
        &--category-image {
            .banner__heading-wrapper {
                padding: $banner__heading-wrapper-padding--category-image;
    
                @include mq($screen-m) {
                    position: $banner__heading-wrapper-position--category-image\@medium;
                    bottom: $banner__heading-wrapper-bottom--category-image\@medium;
                    left: $banner__heading-wrapper-left--category-image\@medium;
                    background-color:  $banner__heading-wrapper-background--category-image\@medium;
                    width: $banner__heading-wrapper-width--category-image\@medium;
                    max-width: $banner__heading-wrapper-max-width--category-image\@medium;
                    padding: $banner__heading-wrapper-padding--category-image\@medium;
                }
    
                @include mq($screen-l) {
                    bottom: $banner__heading-wrapper-bottom--category-image\@large;
                    left: $banner__heading-wrapper-left--category-image\@large;
                }
    
                @include mq($screen-xl) {
                    bottom: $banner__heading-wrapper-bottom--category-image\@xl;
                    left: $banner__heading-wrapper-left--category-image\@xl;
                }
            }
    
            .banner__heading {
                margin: $banner__heading-margin--category-image;
    
                @include mq($screen-m) {
                    margin: $banner__heading-margin--category-image\@medium;
                }
    
                .heading {
                    // Overwrite WebForms text-center class
                    text-align: left !important;  // sass-lint:disable-line no-important
                }
            }
    
            .banner__actions-wrapper {
                @include mq($screen-l) {
                    flex-direction: row;
                }
            }
    
            .banner__button {
                justify-content: flex-start;
            }
    
            .banner__button-collapse {
                @include mq($screen-l) {
                    position: $banner__button-collapse-position--category-image\@large;
                }
            }
    
            .banner__button-text {
                margin: $banner__button-text-margin--category-image;
            }
        }
    
        &--is-open {
            .banner__content--category {
                display: block;
            }
    
            .banner__button-collapse {
                .icon {
                    transform: $banner__button-collapse-transform;
                }
            }
        }
    }
    
  • URL: /components/raw/banner/_banner.scss
  • Filesystem Path: build/components/Organisms/banner/_banner.scss
  • Size: 6.5 KB
  • Content:
    'use strict';
    
    class Banner {
      constructor(element) {
        this.element = element;
        this.triggerButton = element.querySelector('.banner__button-collapse');
        this.closeButton = element.querySelector('.banner__button-close');
        this.content = element.querySelector('.banner__content--category');
    
        this.triggerButton.addEventListener('click', () => this.toggle());
        this.createGlobalEventHandlers();
      }
    
      open() {
        this.element.classList.add('banner--is-open');
        this.setAccesbilityAttr('aria-hidden', 'false');
        this.content.focus();
        this.initListeners();
      }
    
      close() {
        this.element.classList.remove('banner--is-open');
        this.setAccesbilityAttr('aria-hidden', 'true');
        this.triggerButton.focus();
        this.killListeners();
      }
    
      toggle() {
        if (this.element.classList.contains('banner--is-open')) {
          this.close();
        }
        else {
          this.open();
        }
      }
    
      setAccesbilityAttr(type, variable) {
        this.content.setAttribute(type, variable);
      }
    
      initListeners() {
        window.addEventListener('keydown', this.onEscapeEvent);
        this.closeButton.addEventListener('click', this.onCloseEvent)
      }
    
      killListeners() {
        window.removeEventListener('keydown', this.onEscapeEvent);
        this.closeButton.removeEventListener('click', this.onCloseEvent)
      }
    
      createGlobalEventHandlers() {
        this.onCloseEvent = () => this.close();
    
        this.onEscapeEvent = e => {
          if (e.which === 27) {
            this.close();
          }
        }
      }
    }
    
    new Banner(document.querySelector('.banner.banner--category'));
    
  • URL: /components/raw/banner/banner.js
  • Filesystem Path: build/components/Organisms/banner/banner.js
  • Size: 1.6 KB

No notes defined.