Tiers
Open in Figma
Sample Tier
<div class="tier">
<div class="tier__layout">
<div class="tier__layout--left">
</div>
<div class="tier__layout--right">
<div class="tier__wrapper">
<div class="tier__header tier__header--selected" data-tier="1">
Essentials
</div>
<div class="tier__action tier__action--selected" data-tier="1">
<div class="tier-pricing tier-pricing--stacked">
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£56.03</h3>
<p class="copy copy--small">today</p>
</div>
<div class="tier-pricing__bubble">
<p class="copy copy--small">then</p>
</div>
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£23.24</h3>
<p class="copy copy--small">x11 months</p>
</div>
</div>
<p class="copy copy--small">Total amount payable £660.84</p>
<label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-selected-xsmall">
<input id="add-to-basket-unselected-xsmall" name="add-to-basket-selected-xsmall" type="checkbox" checked>
<span>Selected</span>
<span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>
</div>
</div>
<div class="tier__wrapper">
<div class="tier__header" data-tier="2">
Classic
</div>
<div class="tier__action" data-tier="2">
<div class="tier-pricing tier-pricing--stacked">
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£56.03</h3>
<p class="copy copy--small">today</p>
</div>
<div class="tier-pricing__bubble">
<p class="copy copy--small">then</p>
</div>
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£23.24</h3>
<p class="copy copy--small">x11 months</p>
</div>
</div>
<p class="copy copy--small">Total amount payable £660.84</p>
<label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
<input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
Select
<span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>
</div>
</div>
<div class="tier__wrapper">
<div class="tier__header" data-tier="3">
Premier
</div>
<div class="tier__action" data-tier="3">
<div class="tier-pricing tier-pricing--stacked">
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£56.03</h3>
<p class="copy copy--small">today</p>
</div>
<div class="tier-pricing__bubble">
<p class="copy copy--small">then</p>
</div>
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£23.24</h3>
<p class="copy copy--small">x11 months</p>
</div>
</div>
<p class="copy copy--small">Total amount payable £660.84</p>
<label class="add-to-basket add-to-basket--xsmall" for="add-to-basket-unselected-xsmall">
<input id="add-to-basket-unselected-xsmall" name="add-to-basket-unselected-xsmall" type="checkbox">
Select
<span class="material-symbols-rounded" aria-hidden="true">check</span>
</label>
</div>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item tier__item--striped tier__item--first">
<a href="#">Courtesy car</a>
<span class="copy copy--small">(While your car is being repaired)</span>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--striped tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item">
<a href="#">Windscreen cover</a>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item tier__item--striped">
<a href="#">Audio equipment cover</a>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--striped tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item">
<a href="#">Key Cover</a>
<span class="copy copy--small">Contextual benefit copy</span>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
£300 of cover
</span>
</div>
<div class="tier__cell" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
£750 of cover
</span>
</div>
<div class="tier__cell" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
£750 of cover
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item tier__item--striped">
<a href="#">Personal possessions</a>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--striped tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
£200 of cover
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
£300 of cover
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
£300 of cover
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item">
<a href="#">Driving Abroad</a>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
30 days cover
</span>
</div>
<div class="tier__cell" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
90 days cover
</span>
</div>
<div class="tier__cell" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
<span class="copy copy--small copy--bold">
90 days cover
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item tier__item--striped">
<a href="#">Onward Travel</a>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--striped tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--error">
close
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item">
<a href="#">Uninsured driver cover</a>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--selected" data-tier="1">
<span class="material-symbols-rounded material-symbols-rounded--error">
close
</span>
</div>
<div class="tier__cell" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item tier__item--striped">
<a href="#">Motor Legal Expenses</a>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--striped tier__cell--selected" data-tier="1">
<p class="flex flex--column">
<span class="copy copy--small copy--bold">Add for</span>
<span class="copy copy--small copy--bold">£XX.xx</span>
</p>
</div>
<div class="tier__cell tier__cell--striped" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
<div class="tier__cell tier__cell--striped" data-tier="3">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success">
check_circle
</span>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item">
<a href="#">RAC Breakdown cover</a>
<span class="copy copy--small">(4 levels of cover available)</span>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--selected" data-tier="1">
<p class="flex flex--column">
<span class="copy copy--small copy--bold">At Home</span>
<span class="copy copy--xsmall copy--bold">Added by you</span>
</p>
</div>
<div class="tier__cell" data-tier="2">
<span class="material-symbols-rounded material-symbols-rounded--error">
close
</span>
</div>
<div class="tier__cell" data-tier="3">
<p class="flex flex--column">
<span class="copy copy--small copy--bold">At Home</span>
<span class="copy copy--xsmall copy--bold">Upgraded by you</span>
</p>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
<div class="tier__item tier__item--striped tier__item--last">
<span class="copy copy--bold copy--hyperlink">
For details of the key benefits and limitations please click on the link
</span>
</div>
</div>
<div class="tier__layout--right">
<div class="tier__cell tier__cell--striped tier__cell--selected" data-tier="1">
<a href="#" class="copy copy--small copy--bold">Insurance Product Information Document</a>
</div>
<div class="tier__cell tier__cell--striped" data-tier="2">
<a href="#" class="copy copy--small copy--bold">Insurance Product Information Document</a>
</div>
<div class="tier__cell tier__cell--striped" data-tier="3">
<a href="#" class="copy copy--small copy--bold">Insurance Product Information Document</a>
</div>
</div>
</div>
<div class="tier__layout">
<div class="tier__layout--left">
</div>
<div class="tier__layout--right">
<div class="tier__wrapper">
<div class="tier__action tier__action--last tier__action--selected" data-tier="1">
<div class="tier-pricing tier-pricing--stacked">
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£37.65</h3>
<p class="copy copy--small">today</p>
</div>
<div class="tier-pricing__bubble">
<p class="copy copy--small">then</p>
</div>
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£19.24</h3>
<p class="copy copy--small">x11 months</p>
</div>
</div>
<p class="copy copy--small">Total amount payable £660.84</p>
</div>
</div>
<div class="tier__wrapper">
<div class="tier__action tier__action--last" data-tier="2">
<div class="tier-pricing tier-pricing--stacked">
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£46.98</h3>
<p class="copy copy--small">today</p>
</div>
<div class="tier-pricing__bubble">
<p class="copy copy--small">then</p>
</div>
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£21.32</h3>
<p class="copy copy--small">x11 months</p>
</div>
</div>
<p class="copy copy--small">Total amount payable £660.84</p>
<div class="tier-upgrade">
<p class="copy copy--xsmall copy--bold">Upgrade for</p>
<div class="pill pill--small">£1.50 extra</div>
</div>
</div>
</div>
<div class="tier__wrapper">
<div class="tier__action tier__action--last" data-tier="3">
<div class="tier-pricing tier-pricing--stacked">
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£56.03</h3>
<p class="copy copy--small">today</p>
</div>
<div class="tier-pricing__bubble">
<p class="copy copy--small">then</p>
</div>
<div class="tier-pricing__content">
<h3 class="heading heading--bold">£23.24</h3>
<p class="copy copy--small">x11 months</p>
</div>
</div>
<p class="copy copy--small">Total amount payable £660.84</p>
<div class="tier-upgrade">
<p class="copy copy--xsmall copy--bold">Upgrade for</p>
<div class="pill pill--small">£1.50 extra</div>
</div>
</div>
</div>
</div>
</div>
</div>