Origami Frontend Components & Services

Demos: o-subs-card

o-subs-card is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

o-subs-card hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

Demo

Subs cards using different theme colours

<div class="o-subs-card__container">
	<div class="o-subs-card" data-o-component="o-subs-card">
		<div class="o-subs-card__top">
			<div class="o-subs-card__copy-title">Digital Trial</div>
			<div class="o-subs-card__copy-pitch">Not sure which package to choose? Try full access for 4 weeks</div>
			<div class="o-subs-card__charge">
				<div class="o-subs-card__charge__value">&#xA3;XX.XX per week</div>
				<button class="o-subs-card__select-button">Select</button>
			</div>
		</div>
		<div class="o-subs-card__expander">
			<div class="o-subs-card__copy-details">
				<ul class="o-subs-card__copy-benefits">
					<li>Access to FT&apos;s award-winning news on desktop, mobile and tablet</li>
					<li>Personalised email briefings by industry, journalist or sector</li>
					<li>Portfolio tools to help manage your investments</li>
					<li>FastFT - market-moving news and views, 24 hours a day</li>
					<li>Brexit Briefing - your essential guide to the impact of the UK-EU split</li>
				</ul>
			</div>
			<div class="o-subs-card__read-more">Read more</div>
		</div>
	</div>
	<div class="o-subs-card" data-o-component="o-subs-card">
		<div class="o-subs-card__top">
			<div class="o-subs-card__copy-title">Standard Digital</div>
			<div class="o-subs-card__copy-pitch">Be informed with the essential news and opinion</div>
			<div class="o-subs-card__charge">
				<div class="o-subs-card__charge__value">&#xA3;XX.XX per week</div>
				<button class="o-subs-card__select-button">Select</button>
			</div>
		</div>
		<div class="o-subs-card__expander">
			<div class="o-subs-card__copy-details">
				<ul class="o-subs-card__copy-benefits">
					<li>Access to FT&apos;s award-winning news on desktop, mobile and tablet</li>
					<li>Personalised email briefings by industry, journalist or sector</li>
					<li>Portfolio tools to help manage your investments</li>
					<li>FastFT - market-moving news and views, 24 hours a day</li>
					<li>Brexit Briefing - your essential guide to the impact of the UK-EU split</li>
				</ul>
			</div>
			<div class="o-subs-card__read-more">Read more</div>
		</div>
	</div>
	<div class="o-subs-card o-subs-card--discount" data-o-component="o-subs-card">
		<div class="o-subs-card__top">
			<div class="o-subs-card__copy-offer">Limited Time Offer</div>
			<div class="o-subs-card__copy-title">Standard Digital</div>
			<div class="o-subs-card__copy-pitch">Be informed with the essential news and opinion</div>
			<div class="o-subs-card__charge">
				<div class="o-subs-card__charge__value">&#xA3;XX.XX per week</div>
				<button class="o-subs-card__select-button">Select</button>
			</div>
		</div>
		<div class="o-subs-card__expander">
			<div class="o-subs-card__copy-details">
				<ul class="o-subs-card__copy-benefits">
					<li>Access to FT&apos;s award-winning news on desktop, mobile and tablet</li>
					<li>Personalised email briefings by industry, journalist or sector</li>
					<li>FastFT - market-moving news and views, 24 hours a day</li>
				</ul>
			</div>
			<div class="o-subs-card__read-more">Read more</div>
		</div>
	</div>
	<div class="o-subs-card o-subs-card--b2b" data-o-component="o-subs-card">
		<div class="o-subs-card__top">
			<div class="o-subs-card__copy-title">Get the FT for your team or business</div>
			<div class="o-subs-card__copy-pitch">Access on any device and volume discounts</div>
			<div class="o-subs-card__charge">
				<div class="o-subs-card__charge__value">Pay based on use</div>
				<button class="o-subs-card__select-button">Enquire about Group subscriptions</button>
			</div>
		</div>
		<div class="o-subs-card__expander">
			<div class="o-subs-card__copy-details">
				<ul class="o-subs-card__copy-benefits">
					<li>Access to FT&apos;s award-winning news on desktop, mobile and tablet</li>
					<li>Personalised email briefings by industry, journalist or sector</li>
					<li>And much more</li>
				</ul>
			</div>
			<div class="o-subs-card__read-more">Read more</div>
		</div>
	</div>
</div>
Switch component view

GitHub Repository

Install o-subs-card

If using the Build Service, add o-subs-card@^3.1.0 to your script and link tags.

If running a Manual Build, run bower install --save "o-subs-card@^3.1.0".

Help & Support

o-subs-card is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Slack: #next-conversion-dev
Email: conversion.tech@ft.com