This version of this component hasn't been branded yet.

Please check the latest version, 6.2.0, as branding is a relatively new addition to our components.

o-share

Share module

active

Horizontal

horizontal

<div class="container">
	<div data-o-component="o-share" class="o-share">
		<ul>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--twitter" href="https://twitter.com/intent/tweet?url=http%3A//on.ft.com/1mUdgA2&amp;text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding&amp;related=ftcompanies&amp;via=FT" rel="noopener"><span class="o-share__text">Twitter</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--facebook" href="http://www.facebook.com/sharer.php?u=http%3A//on.ft.com/1mUdgA2" rel="noopener"><span class="o-share__text">Facebook</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A//on.ft.com/1mUdgA2&amp;title=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%2B%7C%2BFT%2Ecom%20%7C%20Pharmaceuticals&amp;summary=US%20drugs%20group%20vows%20to%20maintain%20big%20British%20presence&amp;source=Financial%20Times" rel="noopener"><span class="o-share__text">LinkedIn</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--whatsapp" target="_blank" href="whatsapp://send?text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%20-%20http%3A//on.ft.com/1mUdgA2" data-trackable="whatsapp" rel="noopener"><span class="o-share__text">Whatsapp</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--googleplus" href="https://plus.google.com/share?url=http%3A//on.ft.com/1mUdgA2" rel="noopener"><span class="o-share__text">Google+</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--pinterest" href="http://www.pinterest.com/pin/create/button/?url=http%3A//on.ft.com/1mUdgA2&amp;description=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding" rel="noopener"><span class="o-share__text">Pinterest</span></a>
			</li>
			<li class="o-share__action">
				<button class="o-share__icon o-share__icon--mail"><span class="o-share__text">Mail</span></button>
			</li>
			<li class="o-share__action">
				<a href="http%3A//on.ft.com/1mUdgA2" class="o-share__icon o-share__icon--link"><span class="o-share__text">URL</span></a>
			</li>
		</ul>
	</div>
</div>

Inverse

inverse share icons

<div class="container container--inverse">
	<div data-o-component="o-share" class="o-share o-share--inverse">
		<ul>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--twitter" href="https://twitter.com/intent/tweet?url=http%3A//on.ft.com/1mUdgA2&amp;text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding&amp;related=ftcompanies&amp;via=FT" rel="noopener"><span class="o-share__text">Twitter</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--facebook" href="http://www.facebook.com/sharer.php?u=http%3A//on.ft.com/1mUdgA2" rel="noopener"><span class="o-share__text">Facebook</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A//on.ft.com/1mUdgA2&amp;title=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%2B%7C%2BFT%2Ecom%20%7C%20Pharmaceuticals&amp;summary=US%20drugs%20group%20vows%20to%20maintain%20big%20British%20presence&amp;source=Financial%20Times" rel="noopener"><span class="o-share__text">LinkedIn</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--whatsapp" target="_blank" href="whatsapp://send?text=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding%20-%20http%3A//on.ft.com/1mUdgA2" data-trackable="whatsapp" rel="noopener"><span class="o-share__text">Whatsapp</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--googleplus" href="https://plus.google.com/share?url=http%3A//on.ft.com/1mUdgA2" rel="noopener"><span class="o-share__text">Google+</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--pinterest" href="http://www.pinterest.com/pin/create/button/?url=http%3A//on.ft.com/1mUdgA2&amp;description=Pfizer%20says%20its%20AstraZeneca%20vow%20over%20big%20UK%20presence%20is%20binding" rel="noopener"><span class="o-share__text">Pinterest</span></a>
			</li>
			<li class="o-share__action">
				<button class="o-share__icon o-share__icon--mail"><span class="o-share__text">Mail</span></button>
			</li>
			<li class="o-share__action">
				<a href="http%3A//on.ft.com/1mUdgA2" class="o-share__icon o-share__icon--link"><span class="o-share__text">URL</span></a>
			</li>
		</ul>
	</div>
</div>

Vertical

vertical

<div class="container">
	<div data-o-component="o-share" class="o-share o-share--vertical">
		<ul>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--twitter" href="https://twitter.com/intent/tweet?url=http://on.ft.com/1mUdgA2&amp;text=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding&amp;related=ftcompanies&amp;via=FT" rel="noopener"><span class="o-share__text">Twitter</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--facebook" href="http://www.facebook.com/sharer.php?u=http://on.ft.com/1mUdgA2" rel="noopener"><span class="o-share__text">Facebook</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://on.ft.com/1mUdgA2&amp;title=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding%2B%7C%2BFT%2Ecom+%7C+Pharmaceuticals&amp;summary=US+drugs+group+vows+to+maintain+big+British+presence&amp;source=Financial%20Times" rel="noopener"><span class="o-share__text">LinkedIn</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--whatsapp" target="_blank" href="whatsapp://send?text=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding%20-%20http://on.ft.com/1mUdgA2" data-trackable="whatsapp" rel="noopener"><span class="o-share__text">Whatsapp</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--googleplus" href="https://plus.google.com/share?url=http://on.ft.com/1mUdgA2" rel="noopener"><span class="o-share__text">Google+</span></a>
			</li>
			<li class="o-share__action">
				<a class="o-share__icon o-share__icon--pinterest" href="http://www.pinterest.com/pin/create/button/?url=http://on.ft.com/1mUdgA2&amp;description=Pfizer+says+its+AstraZeneca+vow+over+big+UK+presence+is+binding" rel="noopener"><span class="o-share__text">Pinterest</span></a>
			</li>
			<li class="o-share__action">
				<button class="o-share__icon o-share__icon--mail"><span class="o-share__text">Mail</span></button>
			</li>
			<li class="o-share__action">
				<a href="http://on.ft.com/1mUdgA2" class="o-share__icon o-share__icon--link"><span class="o-share__text">URL</span></a>
			</li>
		</ul>
	</div>
</div>
Bower Dependencies
ftdomdelegate ^2.1.0
o-colors ^4.0.2
o-normalise ^1.2.1
o-grid ^4.3.1
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-share@^6.1.1

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-share"@"^6.1.1"

For more information see the Origami build process.