This component is not maintained by the Origami team.

While this component may be used, it is not supported directly by the Origami team. We make no guarantees about the support status, though we will help you if we can.

o-subs-card

A card for showing different subscription packages offered by the Financial Times

Readme JSDoc SassDoc
active

Demo

Subs cards using different theme colours

Open Demo in a New Tab 
<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>
Bower Dependencies
o-buttons ^5.7.0
o-colors ^4.1.1
o-expander ^4.3.0
o-grid ^4.3.3
o-typography ^5.0.0

Support

Email conversion.tech@ft.com

Slack #next-conversion-dev

Report an issue on GitHub
GitHub Repository

Quickstart

Build Service

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

o-subs-card@^2.2.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-subs-card"@"^2.2.1"

For more information see the Origami build process.