Digital pattern library

Share options

The share options pattern allows links to be shared across social media platforms.

Rules for share options

Options available


Share this story

View on mobile to see WhatsApp icon.
Code
<!-- Begin pattern: share-options //-->
<div id="share-options">
    <ul>
		<li><a href="#"><span class="sr-only">Facebook</span>
			<i class="fa fa-facebook-square fa-2x" title="Facebook" aria-hidden="true"></i>
		
		</a></li>
		<li><a href="#"><span class="sr-only">Twitter</span>
			<i class="fa fa-twitter-square fa-2x" title="Twitter" aria-hidden="true"></i>
		
		</a></li>
		<li><a href="#"><span class="sr-only">Facebook Messenger</span>
		<svg version="1.1" id="Messenger_Mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve"><path id="Bubble_Shape" class="st0" d="M501,0C227.6,0,6,207.2,6,462.8c0,145.4,71.7,275.2,183.9,360V1000l168.9-93.7 c45,12.6,92.8,19.4,142.2,19.4c273.4,0,495-207.2,495-462.8S774.3,0,501,0z M553.1,620.7l-128-133L178.5,624l270.3-286.8l128,133 l246.5-136.3L553.1,620.7z"></path></svg>
		</a></li>
		<li><a href="#"><span class="sr-only">LinkedIn</span>
			<i class="fa fa-linkedin-square fa-2x" title="LinkedIn" aria-hidden="true"></i>
		
		</a></li>
		<li class="visible-xs"><a href="#"><span class="sr-only">WhatsApp</span>
			<i class="fa fa-whatsapp fa-2x" title="WhatsApp" aria-hidden="true"></i>
		
		</a></li>
		<li><a href="#"><span class="sr-only">Email</span>
			<i class="fa fa-envelope fa-2x" title="Email" aria-hidden="true"></i>
		
		</a></li>
    </ul>
</div>
<!-- End pattern: share-options //-->