Example
Buy direct example, for vehicles that are new in stock to be purchase directly through the manufacturer.
Purchase
Buy outright with a fixed amount.
£38,598.20 Pre-discount: £40,160 You Save: £1,561.80
- Complete ownership on purchase
- Savings on the full price
- No mileage limits
- No monthly payments
Personal Contract Purchase Popular
Pay monthly and then buy, swap or return.
£493.57 per month x48 (6000 miles per year)
- Return, exchange or own
- Full ownership with optional final payment
- Partial deposit needed
- Extras included (roadside assistance, home delivery)
Volvo Loan
Pay monthly with a loan over a fixed period directly with Volvo.
£1,080.75 per month x36
- Ownership on loan start
- Flexible contract terms of 24-48 months
- No mileage limits
- Extras included (roadside assistance, home delivery)
Leasing
Pay monthly for fixed period then return.
£445 per month x48 (6000 miles /year)
- Return on contract completion
- Flexible terms of 24-48 months
- Extras included (roadside assistance, home delivery)
Subscription
Pay monthly and change or return with notice.
£799 per month (6000 miles per year)
- Change or return with 3 month notice
- All inclusive
- Fixed monthly payments
- Extras included (car switch, roadside assistance, home delivery)
Select your preferred dealership
<section class="c-vehicle__panel | o-collapse__section" id="buy_direct" x-data="{ open: false, dealerModal: false }">
<button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="buy_direct_btn" type="button" aria-controls="buy_direct_panel"
@click="open = ! open"
:aria-expanded="open"
:class="open ? 'is-active' : 'is-inactive'"
>
<span class="c-sub-header__heading | u-mr-auto">
<h2 class="u-heading u-beta">Buy direct from Volvo</h2>
</span>
<span class="c-sub-header__right | u-ml-sm">
<svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
<g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
<path d="M2 2l12 12"></path>
<path d="M14 2L2 14"></path>
</g>
</svg>
</span>
</button>
<div class="c-vehicle-panels__content | o-collapse__panel" id="buy_direct_panel" role="region" aria-labelledby="buy_direct_btn" style="display: none;"
x-show="open" x-collapse
>
<div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
<div class="o-grid | u-justify-center-<bp3">
<div class="o-grid__item | u-flex u-col-12 u-col-6-@bp3 u-col-4-@bp5 u-max-30-<bp3">
<div class="c-card | u-w-100% u-radius-xxl">
<div class="c-card__body | o-flow | u-p-md u-p-lg-@bp2">
<h2 class="u-heading u-gamma u-fw-500">Purchase</h2>
<p>Buy outright with a fixed amount.</p>
<div class="c-vehicle__price">
<span class="c-vehicle__rrp | u-mb-0 u-tc-info u-w-100%">
<button class="c-link-bare | o-split | u-w-100% u-mb-xs" type="button" x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root }" aria-expanded="false">
<template x-ref="template">
You should contact the dealership to confirm price, specification and availability prior to viewing.
<a href="#pricing_footnote">More Pricing Information <sup>1</sup></a>
</template>
<span class="o-split__title | u-fs-sm u-fw-500 u-block u-align-start">Price:</span>
<div class="c-btn c-btn--tertiary c-btn--sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2.004 8a5.996 5.996 0 1 1 11.992 0A5.996 5.996 0 0 1 2.004 8Zm6.581-3.17A.793.793 0 1 1 7 4.83a.793.793 0 0 1 1.585 0Zm-2.17 1.585H8c.292 0 .529.236.529.528v3.7h1.057V11.7H6.415v-1.057h1.057V7.472H6.415V6.415Z"></path>
</svg>
</div>
</button>
<span class="u-heading u-beta u-tc-primary">£38,598.20</span>
</span>
<span class="c-vehicle__price-row | u-mt-xs">
<span class="c-vehicle__price-was">
<span class="u-milli">Pre-discount:</span>
<span class="c-vehicle__price-value">£40,160</span>
</span>
<span class="c-vehicle__price-save">
<span class="u-milli">You Save:</span>
<span class="c-vehicle__price-value">£1,561.80</span>
</span>
</span>
</div>
<button class="c-btn | u-w-100%" type="button" @click="dealerModal = true">Buy Now</button>
<ul class="o-list-stacked | t-list-ticked | u-space-y-xs">
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Complete ownership on purchase
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Savings on the full price
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
No mileage limits
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
No monthly payments
</li>
</ul>
</div>
</div>
</div>
<div class="o-grid__item | u-flex u-col-12 u-col-6-@bp3 u-col-4-@bp5 u-max-30-<bp3">
<div class="c-card c-card--shadow is-hightlighted | u-w-100% u-radius-xxl">
<div class="c-card__body | o-flow | u-p-md u-p-lg-@bp2">
<h2 class="u-heading u-gamma u-fw-500 u-flex">
Personal Contract Purchase
<sup class="c-badge c-badge--lg | u-ml-sm u-flex-fixed u-self-start">Popular</sup>
</h2>
<p class="u-fs-sm">Pay monthly and then buy, swap or return.</p>
<div class="c-vehicle__price">
<span class="u-heading u-beta u-tc-primary">£493.57</span>
<span class="c-vehicle__price-row | u-mt-xs">
<span class="u-fs-sm u-fw-500 u-tc-headings">per month x48 (6000 miles per year)</span>
</span>
</div>
<button class="c-btn c-btn--primary | u-w-100%" type="button" @click="dealerModal = true">Apply Now</button>
<ul class="o-list-stacked | t-list-ticked | u-space-y-xs">
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Return, exchange or own
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Full ownership with optional final payment
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Partial deposit needed
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Extras included (roadside assistance, home delivery)
</li>
</ul>
</div>
</div>
</div>
<div class="o-grid__item | u-flex u-col-12 u-col-6-@bp3 u-col-4-@bp5 u-max-30-<bp3">
<div class="c-card | u-w-100% u-radius-xxl">
<div class="c-card__body | o-flow | u-p-md u-p-lg-@bp2">
<h2 class="u-heading u-gamma u-fw-500">Volvo Loan</h2>
<p class="u-fs-sm">Pay monthly with a loan over a fixed period directly with Volvo.</p>
<div class="c-vehicle__price">
<span class="u-heading u-beta u-tc-primary">£1,080.75</span>
<span class="c-vehicle__price-row | u-mt-xs">
<span class="u-fs-sm u-fw-500 u-tc-headings">per month x36</span>
</span>
</div>
<button class="c-btn | u-w-100%" type="button" @click="dealerModal = true">Apply Now</button>
<ul class="o-list-stacked | t-list-ticked | u-space-y-xs">
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Ownership on loan start
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Flexible contract terms of 24-48 months
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
No mileage limits
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Extras included (roadside assistance, home delivery)
</li>
</ul>
</div>
</div>
</div>
<div class="o-grid__item | u-flex u-col-12 u-col-6-@bp3 u-col-4-@bp5 u-max-30-<bp3">
<div class="c-card | u-w-100% u-radius-xxl">
<div class="c-card__body | o-flow | u-p-md u-p-lg-@bp2">
<h2 class="u-heading u-gamma u-fw-500">Leasing</h2>
<p class="u-fs-sm">Pay monthly for fixed period then return.</p>
<div class="c-vehicle__price">
<span class="u-heading u-beta u-tc-primary">£445</span>
<span class="c-vehicle__price-row | u-mt-xs">
<span class="u-fs-sm u-fw-500 u-tc-headings">per month x48 (6000 miles /year)</span>
</span>
</div>
<button class="c-btn | u-w-100%" type="button" @click="dealerModal = true">Apply Now</button>
<ul class="o-list-stacked | t-list-ticked | u-space-y-xs">
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Return on contract completion
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Flexible terms of 24-48 months
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Extras included (roadside assistance, home delivery)
</li>
</ul>
</div>
</div>
</div>
<div class="o-grid__item | u-flex u-col-12 u-col-6-@bp3 u-col-4-@bp5 u-max-30-<bp3">
<div class="c-card | u-w-100% u-radius-xxl">
<div class="c-card__body | o-flow | u-p-md u-p-lg-@bp2">
<h2 class="u-heading u-gamma u-fw-500">Subscription</h2>
<p class="u-fs-sm">Pay monthly and change or return with notice.</p>
<div class="c-vehicle__price">
<span class="u-heading u-beta u-tc-primary">£799</span>
<span class="c-vehicle__price-row | u-mt-xs">
<span class="u-fs-sm u-fw-500 u-tc-headings">per month (6000 miles per year)</span>
</span>
</div>
<button class="c-btn | u-w-100%" type="button" @click="dealerModal = true">Apply Now</button>
<ul class="o-list-stacked | t-list-ticked | u-space-y-xs">
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Change or return with 3 month notice
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
All inclusive
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Fixed monthly payments
</li>
<li class="u-flex u-gap u-gap-sm">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke="#00377C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
Extras included (car switch, roadside assistance, home delivery)
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dealership Choice -->
<div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none" x-show="dealerModal" x-id="['modal-title']" x-on:keydown.escape.prevent.stop="dealerModal = false" :aria-labelledby="$id('modal-title')">
<div class="c-modal__overlay" x-show="dealerModal" x-transition.opacity @click="dealerModal = false"></div>
<div class="c-modal__body" x-show="dealerModal" x-transition.duration.300 x-on:click.stop x-trap.noscroll.inert="dealerModal">
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-delta" :id="$id('modal-title')">Select your preferred dealership</h2>
<div class="c-label">
<span class="c-label__text">Dealership:</span>
<ul class="o-list-stacked | u-space-y-xs u-fs-sm">
<li>
<a href="#">Listers Leamington Spa - Volvo Cars</a>
</li>
<li>
<a href="#">Listers Worcester - Volvo Cars</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>