<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 class="quote" id="{{socialBar.id}}">
  <img data-src="{{partnerImgSrc}}"
    alt="" class="circle face lozad">
  <strong>{{partnerName}}, {{partnerLocation}}</strong>
  <p>{{partnerQuote}}</p>
  {{ render '@social-bar' socialBar merge=true}}
</div>
{
  "backgroundImg": "http://kerrymagro.com/wp-content/uploads/2016/02/Ellen-feature.jpg",
  "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
  "partnerImgSrc": "https://media.glassdoor.com/l/7c/1e/3c/21/a-store-partner.jpg",
  "partnerName": "Jill",
  "partnerLocation": "Missisauga",
  "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
  "youTubeId": "w2LaeleCIs4",
  "buttonText": "Jill's story",
  "socialBar": {
    "id": "cool",
    "twitter": {
      "url": "www.starbucks.ca",
      "text": "This is a tween",
      "via": "starbsCAnada",
      "hashtag-1": "duck",
      "hashtag-2": "bird",
      "hashtag-3": "quack",
      "hashtag-4": "egg",
      "hashtag-5": "dingo"
    },
    "facebook": {
      "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
      "hashtag": "Fun"
    },
    "email": {
      "subject": "The email subject",
      "body": "the email body"
    }
  }
}
  • Content:
    .quote {
      @extend %flex-col;
      width: 100%;
      height: 100%;
      padding: 5px;
      margin: 0 auto;
    
      p {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 13.5px;
        letter-spacing: 0.3px;
      }
    
      button {
        margin-top: 18px;
      }
    
      strong {
        margin-bottom: 5px;
      }
    
      h3 {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 1.76px;
      }
    
      .face {
        object-fit: cover;
        height: 75px;
        width: 75px;
        margin-bottom: 13px;
        box-sizing: content-box;
    
      }
    
      .socials {
        padding: 2.3px;
        height: 23px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        min-width: 135px;
        z-index: 2;
    
        .tooltiptext {
          visibility: hidden;
          width: 120px;
          background-color: #555;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 5px 0;
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: 50%;
          margin-left: -60px;
          opacity: 0;
          transition: opacity 0.3s;
    
          &.show {
            visibility: visible;
            opacity: 1;
          }
        }
    
        .tooltiptext::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: #555 transparent transparent transparent;
        }
    
    
      }
    
      @include respond-above(md) {
        p {
          font-size: 13px;
          margin-bottom: 20px;
        }
    
        strong {
          margin-bottom: 5px;
        }
    
        button {
          margin-top: 25px;
        }
    
        .face {
          height: 109px;
          width: 109px;
          margin-bottom: 26px;
          border: 4px solid $green;
        }
    
        .socials {
          padding: 2.3px;
    
          a i {
            width: 13px;
            height: 13px;
          }
        }
      }
    
      @include respond-above(lg) {
        p {
          font-size: 14px;
    
        }
      }
    }
  • URL: /components/raw/quote/_quote.scss
  • Filesystem Path: structures/02-molecules/quote/_quote.scss
  • Size: 1.8 KB

**important**

the dynamic content for quote default no longer renders solo because of how it has to be pased into another section to see it filled view the templates/values section preview