<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/home/banners/category-new-in-320_432.jpg" media="(max-width: 1200px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/banners/category-new-in-320_432.jpg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/banners/category-new-in-144_200.jpg" alt="banner-image" />
</picture>
<div class="banner__content">
<p class="banner__text">
Clothing
</p>
<span class="banner__icon">
<svg
class="icon "
role="presentation"
focusable="false"
>
<title>Arrow right icon</title>
<use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
</svg>
</span>
</div>
</a>
<a
href="{{ link }}"
class="banner {{ class }}"
{{{ attributes }}}
>
{{ render '@image--picture' image }}
<div class="banner__content">
<p class="banner__text">
{{ text }}
</p>
<span class="banner__icon">
{{ render '@icon' icon }}
</span>
</div>
</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"
},
"icon": {
"id": "arrow-right",
"title": "Arrow right icon",
"hidden": true
},
"text": "Clothing"
}
$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 : none !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;
@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;
}
}
}
}
'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'));
There are no notes for this item.