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="demo_container">
	<div class="demo_subs-card-row">
		<div class="demo_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">Subscription title</div>
					<img class="o-subs-card__copy-image" src="/demos/src/demo-placeholder.png" alt="photo of FT subscription options">
					<div class="o-subs-card__charge">
						<span class="o-subs-card__charge__value">&#xA3;XX.XX</span> per week
						<button class="o-subs-card__select-button">Select</button>
					</div>
				</div>
				<div class="o-subs-card__copy-pitch">Access to FT.com on your desktop, mobile and tablet</div>
				<div class="o-subs-card__expander">
					<button class="o-subs-card__read-more">Read more</button>
					<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>
			</div>
		</div>
		<div class="demo_subs-card-container">
			<div class="o-subs-card o-subs-card--premium" data-o-component="o-subs-card">
				<div class="o-subs-card__top">
					<div class="o-subs-card__copy-title">Subscription title</div>
					<img class="o-subs-card__copy-image" src="/demos/src/demo-placeholder.png" alt="photo of FT subscription options">
					<div class="o-subs-card__charge">
						<span class="o-subs-card__charge__value">&#xA3;XX.XX</span> per week
						<button class="o-subs-card__select-button">Select</button>
					</div>
				</div>
				<div class="o-subs-card__copy-pitch">Access to FT.com on your desktop, mobile and tablet</div>
				<div class="o-subs-card__expander">
					<button class="o-subs-card__read-more">Read more</button>
					<div class="o-subs-card__copy-details">
						<div class="o-subs-card__copy-preamble">Standard Digital benefits</div>
						<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>
			</div>
		</div>
		<div class="demo_subs-card-container">
			<div class="o-subs-card o-subs-card--premium-plus" data-o-component="o-subs-card">
				<div class="o-subs-card__top">
					<div class="o-subs-card__copy-title">Subscription title</div>
					<img class="o-subs-card__copy-image" src="/demos/src/demo-placeholder.png" alt="photo of FT subscription options">
					<div class="o-subs-card__charge">
						<span class="o-subs-card__charge__value">&#xA3;XX.XX</span> per week
						<button class="o-subs-card__select-button">Select</button>
					</div>
				</div>
				<div class="o-subs-card__copy-pitch">Access to FT.com on your desktop, mobile and tablet</div>
				<div class="o-subs-card__expander">
					<button class="o-subs-card__read-more">Read more</button>
					<div class="o-subs-card__copy-details">
						<div class="o-subs-card__copy-preamble">Standard Digital benefits, plus</div>
						<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>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="demo_subs-card-container">
			<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">
						<div class="o-subs-card__copy-offer">Limited Time Offer</div>
						<div class="o-subs-card__copy-title">Subscription title</div>
					</div>
					<img class="o-subs-card__copy-image" src="/demos/src/demo-placeholder.png" alt="photo of FT subscription options">
					<div class="o-subs-card__charge">
						<span class="o-subs-card__charge__value">&#xA3;XX.XX</span> per week*
						<button class="o-subs-card__select-button">Select</button>
					</div>
				</div>
				<div class="o-subs-card__copy-pitch">Access to FT.com on your desktop, mobile and tablet</div>
				<div class="o-subs-card__expander">
					<button class="o-subs-card__read-more">Read more</button>
					<div class="o-subs-card__copy-details">
						<div class="o-subs-card__copy-preamble">Standard Digital benefits, plus</div>
						<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>
			</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@^1.1.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"@"^1.1.1"

For more information see the Origami build process.