Price Basket
Open in Figma
Price Basket
The Price Basket displays a summary of the total price and selected payment frequency, along with a detailed breakdown of the individual price components.
<div class="basket-wrapper">
<div class="info-card basket">
<div data-testid="price-basket-title">
<div class="title-bar">
<div class="title-bar__icon">
<span class="material-symbols-rounded flex" aria-hidden="true">shopping_cart</span>
</div>
<div class="title-bar__content">
<div class="title-bar__heading">Your basket</div>
</div>
</div>
<div class="separator"></div>
</div>
<div data-testid="price-basket-body">
<div class="basket__payment-type">
<div class="basket-item">
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold">Annual payment</p>
<p class="copy copy--xsmall">Single payment today by credit or debit card</p>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold">£XXX.XX</p>
</div>
</div>
</div>
</div>
<div class="basket__container">
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">beach_access</span>
</div>
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold">Premier cover</p>
<div class="flex flex--column gap-xs copy copy--xsmall">
<p>
<span class="copy copy--xsmall">policy admin: </span>
<span class="copy copy--xsmall copy--bold">Standard</span>
</p>
<p>
<span class="copy copy--xsmall">voluntary excess: </span>
<span class="copy copy--xsmall copy--bold">£250</span>
</p>
<p>
<span class="copy copy--xsmall">no claims discount: </span>
<span class="copy copy--xsmall copy--bold">5 years</span>
</p>
</div>
<div class="flex gap-xs">
<span class="material-symbols-rounded material-symbols-rounded--fill material-symbols-rounded--success protected-icon" aria-hidden="true">check_circle</span>
<span class="copy copy--xsmall copy--bold copy--success protected-text">NCB Protected</span>
</div>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold">£XXX.XX</p>
</div>
</div>
</div>
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">gavel</span>
</div>
<div class="basket-item__info align-items-center">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold copy--small">Legal cover</p>
</div>
<div class="flex flex--column align-items-flex-end">
<div class="flex">
<span class="copy copy--xsmall copy--primary">Included</span>
</div>
</div>
</div>
</div>
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">auto_towing</span>
</div>
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold copy--small">Breakdown cover</p>
<p class="copy copy--xsmall">Roadside</p>
</div>
<div class="flex flex--column align-items-flex-end">
<div class="flex">
<span class="copy copy--xsmall copy--primary">Included</span>
</div>
</div>
</div>
</div>
</div>
<div class="basket__opex">
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">no_crash</span>
</div>
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold copy--small">Replacement car</p>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold copy--small">£XX.XX</p>
</div>
</div>
</div>
</div>
<div class="basket__total">
<div class="basket-item">
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold">Total annual payment</p>
<p class="copy copy--xsmall">price includes Insurance Premium Tax.</p>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold">£XXX.XX</p>
</div>
</div>
</div>
<p class="copy copy--xsmall">This quote includes a non-refundable arrangement fee of £XX.XX.</p>
<div class="provider-type">
<img src="/images/visa.svg" alt="visa" />
<img src="/images/mastercard.svg" alt="mastercard" />
</div>
</div>
</div>
</div>
</div>Price Basket - Trigger
The Price Basket trigger displays a summary of the total price and payment frequency.
When clicked, it opens the full Price Basket view.
<div class="basket-trigger">
<div class="basket-trigger__icon">
<span class="material-symbols-rounded" aria-hidden="true">shopping_cart</span>
</div>
<div class="basket-trigger__text">
<p class="copy copy--small copy--bold copy--primary"> £XXX.XX </p>
<p class="copy copy--small copy--primary"> /month </p>
</div>
</div>Price Basket - Popover
The Price Basket displayed as a popover overlay, triggered by the Price Basket trigger.
The popover includes a dismiss button, allowing users to close the overlay and return to the previous view.
<div class="basket-overlay"></div>
<div class="basket-wrapper">
<div class="info-card basket basket--popover">
<div data-testid="price-basket-title">
<div class="title-bar">
<div class="title-bar__icon">
<span class="material-symbols-rounded flex" aria-hidden="true">shopping_cart</span>
</div>
<div class="title-bar__content">
<div class="title-bar__heading">Your quote</div>
</div>
<div class="title-bar__dismiss">
<span class="material-symbols-rounded cursor-pointer" tabindex="0" aria-hidden="true">close</span>
</div>
</div>
<div class="separator"></div>
</div>
<div data-testid="price-basket-body">
<div class="basket__payment-type">
<div class="basket-item">
<div class="basket-item__info">
<div class="flex flex--column flex-grow gap-s">
<p class="copy copy--bold">Monthly payment</p>
<p class="copy copy--xsmall">
A deposit of <span class="copy copy--bold copy--xsmall">£165.55</span> is to be paid today.<br>
The total amount you will pay is <span class="copy copy--bold copy--xsmall">£1839.75</span>
</p>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold">£XXX.XX</p>
<p class="copy copy--small">x11 months</p>
</div>
</div>
</div>
<button class="btn btn--text block">More about monthly payment</button>
</div>
<div class="basket__container">
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">beach_access</span>
</div>
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold">Premier cover</p>
<div class="flex flex--column gap-xs copy copy--xsmall">
<p>
<span class="copy copy--xsmall">policy admin: </span>
<span class="copy copy--xsmall copy--bold">Standard</span>
</p>
<p>
<span class="copy copy--xsmall">voluntary excess: </span>
<span class="copy copy--xsmall copy--bold">£500</span>
</p>
<p>
<span class="copy copy--xsmall">no claims discount: </span>
<span class="copy copy--xsmall copy--bold">9 or more years</span>
</p>
</div>
<div class="flex gap-xs">
<span class="material-symbols-rounded protected-icon material-symbols-rounded--fill material-symbols-rounded--error" aria-hidden="true">cancel</span>
<span class="copy copy--xsmall copy--bold protected-text copy--error">Not Protected</span>
</div>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold">£XXX.XX</p>
</div>
</div>
</div>
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">gavel</span>
</div>
<div class="basket-item__info align-items-center">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold copy--small">Legal Cover</p>
</div>
<div class="flex flex--column align-items-flex-end">
<div class="flex">
<span class="copy copy--xsmall copy--primary">Included</span>
</div>
</div>
</div>
</div>
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">auto_towing</span>
</div>
<div class="basket-item__info align-items-center">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold copy--small">Breakdown Cover</p>
<p class="copy copy--xsmall">European</p>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold copy--small">£XX.XX</p>
<div class="flex">
<span class="copy copy--xsmall copy--primary">Upgraded</span>
</div>
</div>
</div>
</div>
</div>
<div class="basket__opex">
<div class="basket-item">
<div class="basket-item__icon">
<span class="material-symbols-rounded" aria-hidden="true">no_crash</span>
</div>
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold copy--small">Replacement Vehicle</p>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold copy--small">£XX.XX</p>
</div>
</div>
</div>
</div>
<div class="basket__total">
<div class="basket-item">
<div class="basket-item__info">
<div class="flex flex--column flex-grow">
<p class="copy copy--bold">Total annual payment</p>
<p class="copy copy--xsmall">price includes Insurance Premium Tax.</p>
</div>
<div class="flex flex--column align-items-flex-end">
<p class="copy copy--bold">£XXX.XX</p>
</div>
</div>
</div>
<p class="copy copy--xsmall">This quote includes a non-refundable arrangement fee of £XX.XX.</p>
<div class="provider-type">
<img src="/images/visa.svg" alt="visa" />
<img src="/images/mastercard.svg" alt="mastercard" />
</div>
</div>
</div>
</div>
</div>