<div class="mosaic-card mosaic-card--text u-block u-page-width-max-gutters">
    <div class="mosaic-card__pair mosaic-card__pair--image-right">
        <div class="mosaic-card__image-container">
            <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-4-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-4-small.jpg 300w, /assets/images/mosaic-card-4-medium.jpg 335w, /assets/images/mosaic-card-4-max.jpg 474w">
        </div>
        <div class="mosaic-card__text">
            <h2 class="mosaic-card__headline">New look. Same color, charity and detail.</h2>
            <p class="mosaic-card__description">A blue mirror coating is applied to the outside surface of our PolarizedPlus2® Neutral Grey lens wich eliminates glare, protects from harmful UV rays, and enhances color.</p>
        </div>
    </div>
    <div class="mosaic-card__pair mosaic-card__pair--image-left">
        <div class="mosaic-card__image-container">
            <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-5-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-5-small.jpg 300w, /assets/images/mosaic-card-5-medium.jpg 335w, /assets/images/mosaic-card-5-max.jpg 474w">
        </div>
        <div class="mosaic-card__text">
            <h2 class="mosaic-card__headline">Through the lens.</h2>
            <p class="mosaic-card__description">Blue Hawaii features a patented blend of elements that increase and balance the saturation of the colors you can see.</p>
        </div>
    </div>
    <div class="mosaic-card__pair mosaic-card__pair--image-bottom">
        <div class="mosaic-card__image-container">
            <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-6-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-6-small.jpg 300w, /assets/images/mosaic-card-6-medium.jpg 335w, /assets/images/mosaic-card-6-max.jpg 474w">
        </div>
        <div class="mosaic-card__text">
            <h2 class="mosaic-card__headline">Protection from the sun&#x27;s damaging rays.</h2>
            <p class="mosaic-card__description">Blue Hawaii offers patented PolarizedPlus2® technology, an effective UV filter for the eyes and surrounding skin.</p>
        </div>
    </div>
</div>
<div class="mosaic-card mosaic-card--{{modifier}} u-block u-page-width-max-gutters">
  {{#each pairs}}
  <div class="mosaic-card__pair mosaic-card__pair--{{modifier}}">
    {{#if callToAction}}
    <a class="mosaic-card__link js-mosaic-card__link" href="{{this.path}}">
    {{/if}}
      <div class="mosaic-card__image-container">
        <img class="mosaic-card__image u-object-fit-cover" src="{{imageMax}}" sizes="(min-width: 1025px) {{imageXlargeVw}}vw, (min-width: 681px) {{imageMediumVw}}vw, 100vw"
          srcset="{{imageSmall}} {{imageSmallWidth}}w, {{imageMedium}} {{imageMediumWidth}}w, {{imageMax}} {{imageMaxWidth}}w">
      </div>
      <div class="mosaic-card__text">
        {{#if prefix}}
        <span class="mosaic-card__prefix">{{prefix}}</span>
        {{/if}}
        {{#if headline}}
        <h2 class="mosaic-card__headline">{{headline}}</h2>
        {{/if}}
        {{#if description}}
        <p class="mosaic-card__description">{{description}}</p>
        {{/if}}
        {{#if quotation}}
        <blockquote class="mosaic-card__quote">{{quotation}}</blockquote>
        {{/if}}
        {{#if attribution}}
        <cite class="mosaic-card__cite">&mdash; {{attribution}}{{#if position}} &#124; {{{position}}}{{/if}}</cite>
        {{/if}}
        {{#if callToAction}}
        <button class="mosaic-card__call-to-action button button--outlined js-mosaic-card__call-to-action" href="{{this.path}}">{{callToAction}}</button>
        {{/if}}
      </div>
    {{#if callToAction}}
    </a>
    {{/if}}
  </div>
  {{/each}}
</div>
{
  "modifier": "text",
  "pairs": [
    {
      "modifier": "image-right",
      "imageSmall": "/assets/images/mosaic-card-4-small.jpg",
      "imageMedium": "/assets/images/mosaic-card-4-medium.jpg",
      "imageMax": "/assets/images/mosaic-card-4-max.jpg",
      "imageSmallWidth": "300",
      "imageMediumWidth": "335",
      "imageMaxWidth": "474",
      "imageMediumVw": "50",
      "imageXlargeVw": "33",
      "headline": "New look. Same color, charity and detail.",
      "description": "A blue mirror coating is applied to the outside surface of our PolarizedPlus2® Neutral Grey lens wich eliminates glare, protects from harmful UV rays, and enhances color."
    },
    {
      "modifier": "image-left",
      "imageSmall": "/assets/images/mosaic-card-5-small.jpg",
      "imageMedium": "/assets/images/mosaic-card-5-medium.jpg",
      "imageMax": "/assets/images/mosaic-card-5-max.jpg",
      "imageSmallWidth": "300",
      "imageMediumWidth": "335",
      "imageMaxWidth": "474",
      "imageMediumVw": "50",
      "imageXlargeVw": "33",
      "headline": "Through the lens.",
      "description": "Blue Hawaii features a patented blend of elements that increase and balance the saturation of the colors you can see."
    },
    {
      "modifier": "image-bottom",
      "imageSmall": "/assets/images/mosaic-card-6-small.jpg",
      "imageMedium": "/assets/images/mosaic-card-6-medium.jpg",
      "imageMax": "/assets/images/mosaic-card-6-max.jpg",
      "imageSmallWidth": "300",
      "imageMediumWidth": "335",
      "imageMaxWidth": "474",
      "imageMediumVw": "50",
      "imageXlargeVw": "33",
      "headline": "Protection from the sun's damaging rays.",
      "description": "Blue Hawaii offers patented PolarizedPlus2® technology, an effective UV filter for the eyes and surrounding skin."
    }
  ]
}
  • Content:
    /**
     * @overview Prevents entire mosaic card to be clickable on
     * desktop/tablet. Only the button will be clickable.
     * @module mosaic-card.js
    */
    
    const mosaicLinks = document.querySelectorAll('.js-mosaic-card__link');
    const mosaicLinksArray = [];
    let mobile;
    
    if (mosaicLinks) {
      if (window.innerWidth < 769) {
        mobile = true;
      }
    
      // Generic debounce function
      // Taken from: https://davidwalsh.name/javascript-debounce-function
      const debounce = (func, wait, immediate) => {
        let timeout;
        return function() {
          const context = this, args = arguments;
          const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
          };
          const callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
        };
      };
    
      // We need to listen for mobile sizes so that the entire
      // area can be clickable and only the button tablet/desktop.
      const resizeListener = () => {
        window.addEventListener(`resize`, debounce(() => {
          if (window.innerWidth < 769) {
            mobile = true;
          }
          else {
            mobile = false;
          }
        }, 250));
      };
    
      resizeListener();
    
      for (let i = 0; i < mosaicLinks.length; i++) {
        mosaicLinksArray.push(mosaicLinks[i]);
      }
    
      Array.prototype.forEach.call(mosaicLinks, function (el) {
        const mosaicButton = el.querySelector('.js-mosaic-card__call-to-action');
    
        // If not mobile size, prevent entire area to be clickable and only
        // the button.
        el.addEventListener('click', function(e) {
          if (e.target.closest('a') === this && e.target !== mosaicButton && !mobile) {
            e.preventDefault();
          }
        });
      });
    }
    
  • URL: /components/raw/mosaic-card/mosaic-card.js
  • Filesystem Path: src/components/02-components/mosaic-card/mosaic-card.js
  • Size: 1.7 KB
  • Content:
    .mosaic-card {
      @include breakpoint($breakpoint-md) {
        position: relative;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 66vw;
      }
    
      @include breakpoint($page-width-max) {
        height: 948px;
      }
    }
    
    .mosaic-card__pair {
      margin-bottom: 10px;
      background-color: $color-lighter;
      color: $color-darkest;
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        position: relative;
        margin-bottom: 0;
    
        &:before {
          position: absolute;
          width: 0;
          height: 0;
          content: '';
          z-index: 1;
        }
    
        &.mosaic-card__pair--image-right:before,
        &.mosaic-card__pair--image-bottom:before {
          top: calc(50% - 30px);
          left: 50%;
          border-top: 30px solid transparent;
          border-bottom: 30px solid transparent;
          border-left: 20px solid $color-lighter;
        }
    
        &.mosaic-card__pair--image-left:before {
          top: calc(50% - 30px);
          right: 50%;
          border-top: 30px solid transparent;
          border-right: 20px solid $color-lighter;
          border-bottom: 30px solid transparent;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        position: absolute;
        overflow: hidden;
    
        &.mosaic-card__pair--image-right {
          top: 0;
          right: 33.3333%;
          bottom: 50%;
          left: 0;
        }
    
        &.mosaic-card__pair--image-left {
          top: 50%;
          right: 33.33333%;
          bottom: 0;
          left: 0;
        }
    
        &.mosaic-card__pair--image-bottom {
          top: 0;
          right: 0;
          bottom: 0;
          left: 66.6666%;
        }
    
        &.mosaic-card__pair--image-bottom:before {
          top: 50%;
          left: calc(50% - 30px);
          border-top: 20px solid $color-lighter;
          border-right: 30px solid transparent;
          border-left: 30px solid transparent;
        }
      }
    }
    
    .mosaic-card__link {
      display: block;
      width: 100%;
      height: 100%;
      color: $color-darkest;
      text-decoration: none;
    
      @include breakpoint($breakpoint-lg) {
        cursor: default;
      }
    }
    
    .mosaic-card__image-container {
      width: 100%;
    
      @include breakpoint($breakpoint-md) {
        height: calc(50vw - 10px);
    
        .mosaic-card__pair--image-right &,
        .mosaic-card__pair--image-bottom & {
          width: 50%;
          float: right;
        }
    
        .mosaic-card__pair--image-left & {
          width: 50%;
          float: left;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 100%;
    
        .mosaic-card__pair--image-bottom & {
          position: absolute;
          top: 50%;
          width: auto;
          height: 50%;
          float: none;
        }
      }
    }
    
    .mosaic-card__text {
      padding: 20px 10px;
      text-align: center;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        height: calc(50vw - 10px);
        padding: 30px;
        text-align: left;
    
        .mosaic-card__pair--image-right &,
        .mosaic-card__pair--image-bottom & {
          width: 50%;
          float: left;
        }
    
        .mosaic-card__pair--image-left & {
          width: 50%;
          float: right;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        height: auto;
        padding-top: 32px;
    
        .mosaic-card__pair--image-bottom & {
          position: absolute;
          top: 0;
          bottom: 50%;
          width: 100%;
          float: none;
        }
      }
    
      @include breakpoint($page-width-max) {
        padding: 34px 50px 50px;
      }
    }
    
    .mosaic-card__prefix {
      display: block;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 2px;
      line-height: 2.0rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 27px;
        color: $color-darkest;
        font-size: 1.6rem;
        letter-spacing: 1px;
      }
    
      @include breakpoint($page-width-max) {
        margin-bottom: 46px;
        padding-top: 2px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .mosaic-card__headline {
      margin: 7px 0 0;
      color: $color-darkest;
      font-size: 2.0rem;
      letter-spacing: 1px;
      line-height: 2.4rem;
    
      .mosaic-card--text & {
        margin: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        color: $color-dark;
        font-size: 2.8rem;
        line-height: 3.4rem;
      }
    
      @include breakpoint($page-width-max) {
        font-size: 4.7rem;
        line-height: 5.6rem;
      }
    }
    
    .mosaic-card__description {
      margin: 7px 0 0;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-md) {
        margin: 23px 0 20px;
      }
    
      @include breakpoint($page-width-max) {
        margin-top: 43px;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .mosaic-card__quote {
      margin: 5px $gutter-width $gutter-width;
      padding: 0;
      color: $color-darkest;
      font-size: 2.0rem;
      font-style: italic;
      line-height: 2.4rem;
      quotes: '"' '"';
    
      &:before {
        content: open-quote;
      }
    
      &:after {
        content: close-quote;
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 45px 15px 25px;
        color: $color-dark;
        font-size: 1.9rem;
        line-height: 2.3rem;
        text-align: left;
      }
    }
    
    .mosaic-card__cite {
      display: block;
      margin: 0 $gutter-width 15px;
      padding: 0;
      color: $color-dark;
      font-size: 1.4rem;
      font-style: normal;
      line-height: 1.7rem;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 15px;
        color: $color-darkest;
        line-height: 2.0rem;
        text-align: left;
      }
    }
    
    .mosaic-card__call-to-action {
      display: block;
      margin: 15px auto 0;
      background: transparent;
      line-height: 4.8rem;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        position: absolute;
        bottom: 40px;
      }
    
      @include breakpoint($breakpoint-lg) {
        bottom: 30px;
      }
    
      @include breakpoint($breakpoint-xl) {
        bottom: 40px;
      }
    
      @include breakpoint($page-width-max) {
        bottom: 50px;
      }
    }
    
  • URL: /components/raw/mosaic-card/mosaic-card.scss
  • Filesystem Path: src/components/02-components/mosaic-card/mosaic-card.scss
  • Size: 5.6 KB

There are no notes for this item.