Banner

<a href="#" class="banner " aria-label="descriptive text about banner action and / or image">
    <picture class="image ">
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="(max-width: 480px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_416.jpg" media="(max-width: 960px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1024_416.jpg" media="(max-width: 1328px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1920_512.jpg" media="" />

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

</a>
<a
    href="{{ link }}"
    class="banner {{ class }}"
    {{{ attributes }}}
>
    {{ render '@image--picture' image }}
</a>
{
  "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"
  }
}
  • 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('.image');
    
        &: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;
                    max-height: 350px;
                    overflow: hidden;
                }
            }
    
            &: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;
    
            @include mq($screen-m) {
                max-height: 300px;
                overflow: hidden;
            }
        }
    
        &__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.6 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

There are no notes for this item.