Skip links and keyboard navigation

Social media

Sharing

Sharing options for Facebook, Twitter and LinkedIn.

View example in Storybook

Code

<div id="qg-options" class="row justify-content-sm-end">
  <div class="qg-share navbar"><span class="navbar-brand qg-share__title">Share this page:</span>
    <ul class="navbar navbar-right qg-share-list">
      <li class="qg-share-list-item"><a class="qg-share-link qg-share-facebook" href="#" title="Facebook" data-analytics-link-group="qg-sharing-facebook" aria-label="Share on Facebook"><span class="fa fa-facebook-square fa-2x qg-share-icon" aria-hidden="true"></span><span class="title qg-visually-hidden">Facebook</span></a>
      </li>
      <li class="qg-share-list-item"><a class="qg-share-link qg-share-twitter" href="#" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter"><span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span><span class="title qg-visually-hidden">Twitter</span></a>
      </li>
      <li class="qg-share-list-item"><a class="qg-share-link qg-share-linkedin" href="#" title="LinkedIn" data-analytics-link-group="qg-sharing-linkedin" aria-label="Share on LinkedIn"><span class="fa fa-linkedin-square fa-2x qg-share-icon" aria-hidden="true"></span><span class="title qg-visually-hidden">LinkedIn</span></a>
      </li>
    </ul>
  </div>
</div>

Code

<div class="qg-facebook-updates" data-href="https://www.facebook.com/TMRQld/">
  <p class="more text-right"><a href="https://www.facebook.com/TMRQld/" title="View All">View all</a></p>
</div>

Code

<div class="qg-twitter-updates">
  <p class="more text-right"> <a href="https://twitter.com/TMFranchise/lists/transport-and-motoring" title="More from the Transport and motoring franchise on Twitter">View all</a> </p>
  <a class="twitter-timeline" href="https://twitter.com/TMFranchise/lists/transport-and-motoring" title="More from the Transport and motoring franchise on Twitter" data-height="600">View all</a>
</div>