Vehicle Running Costs
Show users/customers how much their vehicle will cost over time, with both fuel calculator and servicing fees/links.
Calculate approximately how much a year's worth of fuel would cost according to usage:
Efficiency
- EC Urban
- 25.2 mpg
- EC Extra Urban
- 40.9 mpg
- EC Combined
- 33.2 mpg
Filling Up
- Tank Size
- 59 Litres
- Cost to Fill
- £85.99
Fuel Estimates
- Total Fuel Use
- 1,578.50 Litres
- Total Fuel Cost
- £2,300.51
Tax Estimates
- CO2 Emissions
- 114 g/km
- Annual Tax
- £165
Servicing and Ownership Costs
- ServicingSEAT Service Plans
Spread the cost of servicing with a plan to suit you and your budget.
- ServicingSEAT Fixed Priced Servicing
Your SEAT is special to you, and deserves special treatment when it's time for a service or repair.
- ServicingSEAT MOT's
Be sure that your SEAT will receive the best MOT service by SEAT approved technicians.
- Servicing
Be life ready with SEAT Accessories Make it your SEAT, with personal accessories design specifically for your car.
- ServicingAll-In Servicing
Our 2 year plan for 3-5 year old SEAT's, covering servicing, MOTs and much more.
<section class="c-vehicle-panels | o-section o-collapse">
<div class="o-wrapper">
<section class="c-vehicle__panel | o-collapse__section" id="vehicle_costs" x-data="{open: false}">
<button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_costs_btn" type="button" aria-controls="vehicle_costs_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">Running Costs</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="vehicle_costs_panel" role="region" aria-labelledby="vehicle_costs_btn" style="display: none;"
x-show="open" x-collapse
:class="open ? 'u-overflow-visible' : ''"
>
<div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
<div class="o-grid | u-gap-lg u-pv">
<div class="o-grid__item | u-col-12">
<p>Calculate approximately how much a year's worth of fuel would cost according to usage:</p>
</div>
<div class="o-grid__item | u-col-12 u-col-3-@bp4">
<div class="o-grid">
<div class="o-grid__item | u-col-12 u-col-6-@bp2 u-col-12-@bp4">
<label class="c-label | u-mb">
<span class="c-label__text">Petrol Cost Per Litre:</span>
<span class="c-field">
<span class="c-field__addon | u-bg-white">£</span>
<span class="c-label__input">
<input class="c-input c-input--text" type="number" value="146.33" min="0.0" step="1">
</span>
<span class="c-field__addon | u-bg-white">p</span>
</span>
</label>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp2 u-col-12-@bp4">
<label class="c-label | u-mb">
<span class="c-label__text">Estimated Annual Mileage:</span>
<span class="c-field">
<span class="c-label__input">
<input class="c-input c-input--text" type="number" value="10000" min="5000" step="1000">
</span>
<span class="c-field__addon | u-bg-white">Miles</span>
</span>
</label>
</div>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-9-@bp4 u-mb-md">
<div class="o-grid | u-gap-lg u-mb-sm">
<div class="o-grid__item | u-col-6-@bp3">
<div class="c-card c-card--shadow | u-h-100%">
<div class="c-card__body | u-p">
<h3 class="u-heading u-epsilon | u-mb-sm">Efficiency</h3>
<dl class="u-fs-sm u-right u-mb-0">
<dt class="u-float-left">EC Urban</dt>
<dd class="u-mb-xs u-tc-heading">
<b>25.2 mpg</b>
</dd>
<dt class="u-float-left">EC Extra Urban</dt>
<dd class="u-mb-xs u-tc-heading">
<b>40.9 mpg</b>
</dd>
<dt class="u-float-left">EC Combined</dt>
<dd class="u-mb-xs u-tc-heading">
<b>33.2 mpg</b>
</dd>
</dl>
</div>
</div>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<div class="c-card c-card--shadow | u-h-100%">
<div class="c-card__body | u-p">
<h3 class="u-heading u-epsilon | u-mb-sm">Filling Up</h3>
<dl class="u-fs-sm u-right u-mb-0">
<dt class="u-float-left">Tank Size</dt>
<dd class="u-mb-xs u-tc-heading">
<b>59 Litres</b>
</dd>
<dt class="u-float-left">Cost to Fill</dt>
<dd class="u-mb-xs u-tc-heading">
<mark><b>£85.99</b></mark>
</dd>
</dl>
</div>
</div>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<div class="c-card c-card--shadow | u-h-100%">
<div class="c-card__body | u-p">
<h3 class="u-heading u-epsilon | u-mb-sm">Fuel Estimates</h3>
<dl class="u-fs-sm u-right u-mb-0">
<dt class="u-float-left">Total Fuel Use</dt>
<dd class="u-mb-xs u-tc-heading"><b>1,578.50 Litres</b></dd>
<dt class="u-float-left">Total Fuel Cost</dt>
<dd class="u-mb-xs u-tc-heading">
<mark><b>£2,300.51</b></mark>
</dd>
</dl>
</div>
</div>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<div class="c-card c-card--shadow | u-h-100%">
<div class="c-card__body | u-p">
<h3 class="u-heading u-epsilon | u-mb-sm">Tax Estimates</h3>
<dl class="u-fs-sm u-right u-mb-0">
<dt class="u-float-left">
CO<sub>2</sub> Emissions
</dt>
<dd class="u-mb-xs u-tc-heading">
<b>114 g/km</b>
</dd>
<dt class="u-float-left">Annual Tax</dt>
<dd class="u-mb-xs u-tc-heading">
<mark><b>£165</b></mark>
</dd>
</dl>
</div>
</div>
</div>
</div>
<p class="u-fs-sm u-mb-0 u-right">
<a href="#terms">See important information about efficiency data.</a>
</p>
</div>
<div class="o-grid__item | u-col-12">
<hr class="c-rule | u-mb-md">
</div>
<div class="o-grid__item | u-col-12">
<h3 class="u-heading u-epsilon | u-mb">Servicing and Ownership Costs</h3>
<div class="c-scroller">
<div class="c-scroller__scroll">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#servicing-plan">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/vehicle/running-costs/card-3x2__servicing-plans.webp, /assets/img/ds/layouts/vehicle/running-costs/card-3x2__servicing-plans-@x2.webp 2x" loading="lazy" width="412" height="275" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--orange c-badge--inverted | u-fs-xs">Servicing</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-epsilon">SEAT Service Plans</span>
<p class="u-lead u-trunc-2">Spread the cost of servicing with a plan to suit you and your budget.</p>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#fixed-price-servicing">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/vehicle/running-costs/card-3x2__fixed-price.webp, /assets/img/ds/layouts/vehicle/running-costs/card-3x2__fixed-price-@x2.webp 2x" loading="lazy" width="412" height="275" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--orange c-badge--inverted | u-fs-xs">Servicing</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-epsilon">SEAT Fixed Priced Servicing</span>
<p class="u-lead u-trunc-2">Your SEAT is special to you, and deserves special treatment when it's time for a service or repair.</p>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#mots">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/vehicle/running-costs/card-3x2__mot.webp, /assets/img/ds/layouts/vehicle/running-costs/card-3x2__mot-@x2.webp 2x" loading="lazy" width="412" height="275" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--orange c-badge--inverted | u-fs-xs">Servicing</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-epsilon">SEAT MOT's</span>
<p class="u-lead u-trunc-2">Be sure that your SEAT will receive the best MOT service by SEAT approved technicians.</p>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#accessories">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/vehicle/running-costs/card-3x2__accessories.webp, /assets/img/ds/layouts/vehicle/running-costs/card-3x2__accessories-@x2.webp 2x" loading="lazy" width="412" height="275" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--orange c-badge--inverted | u-fs-xs">Servicing</span>
</div>
<dov class="c-card__footer">
<span class="u-heading u-epsilon">Be life ready with SEAT Accessories</span>
<p class="u-lead u-trunc-2">Make it your SEAT, with personal accessories design specifically for your car.</p>
</dov>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#all-in">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/vehicle/running-costs/card-3x2__all-in.webp, /assets/img/ds/layouts/vehicle/running-costs/card-3x2__all-in-@x2.webp 2x" loading="lazy" width="412" height="275" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--orange c-badge--inverted | u-fs-xs">Servicing</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-epsilon">All-In Servicing</span>
<p class="u-lead u-trunc-2">Our 2 year plan for 3-5 year old SEAT's, covering servicing, MOTs and much more.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>