<div class="slide bg-primary rounded">
    <div class="quote" id="cool">
        <img data-src="https://media.glassdoor.com/l/7c/1e/3c/21/a-store-partner.jpg" alt="" class="circle face lozad">
        <strong>Jill, Missisauga</strong>
        <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.”</p>
        <div class="socials">
            <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
            <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                <i class="fab fa-facebook"></i>
            </div>
            <div href="" class="copy-clipboard">
                <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                <i class="fas fa-link"></i>
                <span class="tooltiptext">Link Copied</span>
            </div>
            <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
        </div>
    </div>

</div>
<div class="slide bg-primary rounded">
  {{render '@quote'}}

</div>
{
  "lableProps": {
    "labelLinkSrc": "www.starbucks.ca",
    "labelLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
  },
  "imageData": {
    "mainImgSrc": "https://images.glaciermedia.ca/polopoly_fs/1.23472777.1540299694!/fileImage/httpImage/image.jpg_gen/derivatives/landscape_804/starbucks-5e1989ea-d6c1-11e8-a10f-b51546b10756-jpg.jpg",
    "mainImgAlt": null,
    "subImg1Src": "https://stories.starbucks.com/wp-content/uploads/2019/01/E7NWSEQT-7056-3809-1.jpg",
    "subImg1Alt": null,
    "subImg2Src": "https://static1.squarespace.com/static/53165289e4b0fa5080a5ba85/t/5348671de4b02ba40e30721d/1397253918644/",
    "subImg2Alt": null,
    "subImg3Src": "https://leaderonomics.com/wp-content/uploads/2016/08/FarmTrip-15.jpg",
    "subImg3Alt": null
  }
}
  • Content:
    .slide {
      position: relative;
      overflow: hidden;
    
      &.video {
        height: 375px;
        width: 250px;
        transition: transform 200ms ease-in;
        margin: 0 10px;
    
        &.slick-current {
          transform: scale(1.05);
    
          .show-on-hover {
            opacity: 1;
          }
        }
    
        &.fake-hover {
          animation: grow 2s cubic-bezier(.36, .07, .19, .97) both;
        }
    
        .tint {
          @extend %flex-col;
          transition: all 250ms ease-out;
          overflow: hidden;
          width: 100%;
    
          .quote {
            padding: 25px 16px;
            justify-content: space-evenly;
          }
        }
    
        @keyframes grow {
          50% {
            transform: scale(1.05);
          }
        }
      }
    
      &.commitment {
        height: unset;
        text-align: left;
        flex-direction: column;
        justify-content: center;
    
        img {
          object-fit: cover;
          position: relative;
          object-position: center;
          height: 244px;
          width: 244px;
          max-width: 100%;
          margin: 0;
          padding: 0;
          margin-bottom: 22.5px;
        }
    
        p {
          text-align: left;
          font-weight: 300;
          line-height: 25px;
          margin-bottom: 25.5px;
        }
    
        button {
          color: $green;
          border-color: $green;
          margin-bottom:15px;
          transition: all 200ms ease-out;
    
          &:hover {
            color: $white;
            border-color: $white;
          }
        }
    
        .circle {
          position: relative;
          background-color: $green;
          width: 17px;
          height: 17px;
          margin-bottom: 22.5px;
          z-index: 99;
        }
      }
    
      @include respond-above(md) {
        &.video {
          position: relative;
          height: 427px;
          width: 284px;
    
          &.slick-current {
            transform: unset;
    
            .show-on-hover {
              opacity: 0;
            }
          }
    
          &:hover {
            transform: scale(1.05);
          }
    
          .show-on-hover {
            opacity: 0;
            &:hover {
              opacity: 1;
            }
          }
    
          .quote {
            padding: 0 15px;
          }
        }
      }
    }
  • URL: /components/raw/slide/_slide.scss
  • Filesystem Path: structures/03-organisms/slide/_slide.scss
  • Size: 2 KB

There are no notes for this item.