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">
<div class="o-subs-card__charge__value">£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'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">£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'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">£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'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'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.2.1
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.