Share & Social

Best Practice

• Links should open in a new window or tab.
• This markup doesn’t include the code for sharing.

Usage

<div class="share-social">
  <div class="share-social-body">
    <small>Share this with others!</small>
    <a class="btn btn-outline-ui btn-sm" role="button" target="_blank" href="#" title="Share this on Facebook">
      <span class="icon fab fa-facebook-f fa-fw" aria-hidden="true"></span>
      <span class="visually-hidden">Facebook</span>
    </a>
    <a class="btn btn-outline-ui btn-sm" role="button" target="_blank" href="#" title="Share this on LinkedIn">
      <span class="icon fab fa-linkedin-in fa-fw" aria-hidden="true"></span>
      <span class="visually-hidden">LinkedIn</span>
    </a>
    <a class="btn btn-outline-ui btn-sm" role="button" target="_blank" href="#" title="Share this on Twitter">
      <span class="icon fab fa-twitter fa-fw" aria-hidden="true"></span>
      <span class="visually-hidden">Twitter</span>
    </a>
    <a class="btn btn-outline-ui btn-sm" role="button" target="_blank" href="#" title="Share this in an Email">
      <span class="icon fas fa-link fa-fw" aria-hidden="true" aria-hidden="true"></span>
      <span class="visually-hidden">Link</span>
    </a>
  </div>
</div>