Open primary navigation
Origami Frontend Components & Services

Demos: o-share

Horizontal

horizontal

Open demo in a new tab 
<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>

	</ul>
</div>

Small

small icons

Open demo in a new tab 
<div data-o-component="o-share" class="o-share  o-share--small ">
	<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>

	</ul>
</div>

Inverse

inverse share icons

Open demo in a new tab 
<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>

	</ul>
</div>

Vertical

vertical

Open demo in a new tab 
<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>

	</ul>
</div>

Custom Share

A custom share action may also be used alongside a form or with custom JavaScript behaviour attached, as shown with the last icon in this demo. Labels may be added to describe a custom share button.

Open demo in a new tab 
<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 o-share__action--labelled">
			<!-- demo only: forms with a submit button may be used for custom share features -->
			<form method="POST" action="#">
				<button type="submit" class="o-share__icon o-share__icon--share">
					<span class="o-share__text">Custom Share</span>
				</button>
			</form>
		</li>

	</ul>
</div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-share

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

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

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: #origami-support
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: #origami-support
Email: origami.support@ft.com