Share options

The share options pattern allows links to be shared across social media platforms and email, or to copy video embed code to be shared on a web page.

Rules for share options

  • Share links must open in the same window or in the native application - not in a new tab.
  • Must only include the share options provided.
  • WhatsApp must only appear on mobile devices.

Options available

Share icons

This example shows all share options that could be displayed (view on a mobile sized window to see WhatsApp icon).

Example
Code 
<!-- Begin pattern: share-options //-->
<div class="share-options">
        <h3>Share this story</h3>
        <ul>
            <li ><a href="#"><span class="sr-only">Share this with Facebook</span><i class="fab fa-facebook-square fa-2x" title="Share this with Facebook" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with Twitter</span><i class="fab fa-twitter-square fa-2x" title="Share this with Twitter" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with Facebook Messenger</span><i class="fab fa-facebook-messenger fa-2x" title="Share this with Facebook Messenger" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with LinkedIn</span><i class="fab fa-linkedin fa-2x" title="Share this with LinkedIn" aria-hidden="true"></i></a></li>
            <li  class="visible-xs"><a href="#"><span class="sr-only">Share this with WhatsApp</span><i class="fab fa-whatsapp fa-2x" title="Share this with WhatsApp" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with Email</span><i class="fas fa-envelope-square fa-2x" title="Share this with Email" aria-hidden="true"></i></a></li>
        </ul>
</div>
<!-- End pattern: share-options //-->

Share video

This example includes a method to provide users with embed code for a video (view on a mobile sized window to see WhatsApp icon).

Example
Code 
<!-- Begin pattern: share-options //-->
<div class="share-options">
    <div class="row">
        <div class="col-md-6">
        <h3>Share this video</h3>
        <ul>
            <li ><a href="#"><span class="sr-only">Share this with Facebook</span><i class="fab fa-facebook-square fa-2x" title="Share this with Facebook" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with Twitter</span><i class="fab fa-twitter-square fa-2x" title="Share this with Twitter" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with Facebook Messenger</span><i class="fab fa-facebook-messenger fa-2x" title="Share this with Facebook Messenger" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with LinkedIn</span><i class="fab fa-linkedin fa-2x" title="Share this with LinkedIn" aria-hidden="true"></i></a></li>
            <li  class="visible-xs"><a href="#"><span class="sr-only">Share this with WhatsApp</span><i class="fab fa-whatsapp fa-2x" title="Share this with WhatsApp" aria-hidden="true"></i></a></li>
            <li ><a href="#"><span class="sr-only">Share this with Email</span><i class="fas fa-envelope-square fa-2x" title="Share this with Email" aria-hidden="true"></i></a></li>
        </ul>
        </div>
        <div class="col-md-6 dpl-form">
            <h3>Embed this video</h3>
            <textarea class="form-control share-options__content-example" rows="3" onfocus="this.select()"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/JxHfSwpddCU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></textarea>
            <button class="btn btn-primary share-options__copy-button" type="button">Copy</button>
        </div>
    </div>
</div>
<!-- End pattern: share-options //-->