o-subs-card

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

active

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">
				<button class="o-subs-card__select-button">Select</button>
				<div class="o-subs-card__charge__value">&#xA3;XX.XX per week</div>
			</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">
				<button class="o-subs-card__select-button">Select</button>
				<div class="o-subs-card__charge__value">&#xA3;XX.XX per week</div>
			</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">
				<button class="o-subs-card__select-button">Select</button>
				<div class="o-subs-card__charge__value">&#xA3;XX.XX per week</div>
			</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">
				<button class="o-subs-card__select-button">Enquire about Group subscriptions</button>
				<div class="o-subs-card__charge__value">Pay based on use</div>
			</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
GitHub Repository

Quickstart

Build Service

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

o-subs-card@^2.0.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.0.1"

For more information see the Origami build process.