<div class="socials">
    <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tweet&via=starbsCAnada&hashtags=duck,bird,quack,egg," target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
    <div class="facebook-share" data-quote="" data-hashtag="">
        <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=This%20is%20an%20email">
    <i class="fas fa-envelope"></i>
  </a>
</div>
<div class="socials">
  <a href="https://twitter.com/intent/tweet?url={{encodeURI twitter.url}}&text={{encodeURI twitter.text}}&via={{twitter.via}}&hashtags={{twitter.hashtag-1}},{{twitter.hashtag-2}},{{twitter.hashtag-3}},{{twitter.hashtag-4}},{{twitter.hashtag-5}}"
    target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
  <div
    class="facebook-share"
    data-quote="{{facebook.quote}}"
    data-hashtag="{{facebook.hashtag}}">
    <i class="fab fa-facebook"></i>
  </div>
  <div href="" class="copy-clipboard">
    <input type="text" class='target' value="www.starbucks.ca/responsibility#{{id}}">
    <i class="fas fa-link"></i>
    <span class="tooltiptext">Link Copied</span>
  </div>
  <a href="mailto:someone@theirmail.com?subject={{encodeURI email.subject}}&body={{encodeURI email.body}}">
    <i class="fas fa-envelope"></i>
  </a>
</div>
{
  "id": "cool",
  "twitter": {
    "url": "www.starbucks.ca",
    "text": "This is a tweet",
    "via": "starbsCAnada",
    "hashtag-1": "duck",
    "hashtag-2": "bird",
    "hashtag-3": "quack",
    "hashtag-4": "egg",
    "hashtag-5": null
  },
  "facebook": {},
  "email": {
    "subject": "The email subject",
    "body": "This is an email"
  }
}
  • Content:
    .socials {
      position: relative;
    
      a i {
        width: 13px;
        height: 13px;
      }
    
      a,
      div {
        cursor: pointer;
      }
    
      .copy-clipboard,
      .facebook-share {
        display: inline;
      }
    
      .copy-clipboard {
        position: relative;
    
        .target {
          position: absolute;
          z-index: -1;
          opacity: 0;
        }
    
    
      }
    }
  • URL: /components/raw/social-bar/social-bar.scss
  • Filesystem Path: structures/02-molecules/social-bar/social-bar.scss
  • Size: 321 Bytes

There are no notes for this item.