Open primary navigation
Origami Frontend Components & Services

Demos: o-share

This version of o-share hasn't been branded yet. Please check the latest version, 7.5.1, as branding is a relatively new addition to our components.

Horizontal

horizontal

Open demo in a new tab 
<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--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>
			<li class="o-share__action">
				<a href="http%3A//on.ft.com/1mUdgA2" class="o-share__icon o-share__icon--share"><span class="o-share__text">Share</span></a>
			</li>
		</ul>
	</div>
</div>

Inverse

inverse share icons

Open demo in a new tab 
<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--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>
				<li class="o-share__action">
					<a href="http%3A//on.ft.com/1mUdgA2" class="o-share__icon o-share__icon--share"><span class="o-share__text">Share</span></a>
				</li>
		</ul>
	</div>
</div>

Vertical

vertical

Open demo in a new tab 
<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--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>
			<li class="o-share__action">
				<a href="http://on.ft.com/1mUdgA2" class="o-share__icon o-share__icon--share"><span class="o-share__text">Share</span></a>
			</li>
		</ul>
	</div>
</div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-share

If using the Build Service, add o-share@^6.2.2 to your script and link tags.

If running a Manual Build, run npm install "o-share@^6.2.2".

Help & Support

o-share is maintained directly by the Origami team. If you have any questions about o-share or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com