<div class="mosaic-card mosaic-card--quote 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">
            <blockquote class="mosaic-card__quote">anywhere that we are going in the world, we know Maui Jim is going to deliver and that it’s going to be a great experience.</blockquote>
            <cite class="mosaic-card__cite">&mdash; Melissa Van Dyke &#124; President, The Incentive Research Foundation</cite>
        </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">
            <blockquote class="mosaic-card__quote">for my team IT is a piece of cake. The Maui Jim Reps do it all from helping us decide what styles to offer, to inventorying, to fitting. We just sit back and let our attendees enjoy.</blockquote>
            <cite class="mosaic-card__cite">&mdash; Brett Barrowman &#124; VP &amp; Director Conference & Travel Management Services, American Fidelity Assurance</cite>
        </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">
            <blockquote class="mosaic-card__quote">it sends a message that we care and we want to give you something that is going to be useful.</blockquote>
            <cite class="mosaic-card__cite">&mdash; Johan Marzuki &#124; Account Executive, BCD Meetings and Incentives</cite>
        </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": "quote",
  "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",
      "quotation": "anywhere that we are going in the world, we know Maui Jim is going to deliver and that it’s going to be a great experience.",
      "attribution": "Melissa Van Dyke",
      "position": "President, The Incentive Research Foundation"
    },
    {
      "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",
      "quotation": "for my team IT is a piece of cake. The Maui Jim Reps do it all from helping us decide what styles to offer, to inventorying, to fitting. We just sit back and let our attendees enjoy.",
      "attribution": "Brett Barrowman",
      "position": "VP &amp; Director Conference & Travel Management Services, American Fidelity Assurance"
    },
    {
      "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",
      "quotation": "it sends a message that we care and we want to give you something that is going to be useful.",
      "attribution": "Johan Marzuki",
      "position": "Account Executive, BCD Meetings and Incentives"
    }
  ]
}
  • 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.