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()">&lt;iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/JxHfSwpddCU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;</textarea>
			<button class="btn btn-primary share-options__copy-button" type="button">Copy</button>
		</div>
	</div>
</div>
<!-- End pattern: share-options //-->