Demos: o-subs-card

<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>