Dependencies
Uses: Layouts: Objects: Components: Extends:Vehicle Specifications Section
Categories of vehicle technical specifications laid out in a categorised list format.
- Height: 1,431 mm Width: 1903 mm Width (inc. mirrors): 2068 mm
Wheelbase: 2,900 mm Length: 4,900 mm
-
Engine and Drive Train
- Fuel Delivery
- Twin Turbo
- Transmission
- Semi-Auto
- Cylinders
- 6
- Gears
- 8 Speed
-
Performance
- 0-60
- 3.9 Seconds
- Top Speed
- 155 mph
- Engine Power
- 510 BHP/PS
- Engine Torque
- 6,250 RPM
-
Fuel Consumption
- Low
- 18.6 mpg
- Medium
- 28.5 mpg
- High
- 33.6 mpg
- Combined
- 28.8 mpg
-
Emissions
- CO2 Low
- 345 g/km
- Co2 Medium
- 225 g/km
- CO2 High
- 191 g/km
- CO2 Combined
- 224 g/km
-
General
- Wheel Type
- 20" Alloy
- Luggage Capacity
- 480 Litres
- No. of Seats
- 5
- Max Load Weight
- 480 kg
- Fuel Tank Capacity
- 59 Litres
- Manufacturers Warranty
- 3 Years
<section class="c-vehicle-panels | o-section o-collapse">
<div class="o-wrapper">
<div class="c-vehicle__panel | o-collapse__section" id="vehicle_specifications" 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_specifications_btn" type="button" aria-controls="vehicle_specifications_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">Technical Specifications</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">
<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_specifications_panel" role="region" aria-labelledby="vehicle_specifications_btn" style="display: none;"
x-show="open" x-collapse
>
<div class="o-collapse__content" :class="open ? 'is-active' : 'is-inactive'">
<ul class="c-vehicle-tech-category | o-list-bare | u-pv">
<li class="c-vehicle-dimensions | o-list__item">
<div class="o-grid | u-gap-flush u-gap-x-@bp3">
<div class="o-grid__item | u-col-12 u-col-6-@bp3">
<div class="u-aspect u-aspect--3x2 | u-relative">
<span class="c-scale c-scale--height"><b>Height</b>: 1,431 mm</span>
<!-- <span class="c-scale c-scale--height-rooftails"><b>Height (inc. roof rails)</b>: 1,413mm</span> -->
<span class="c-scale c-scale--width"><b>Width</b>: 1903 mm</span>
<span class="c-scale c-scale--width-mirrors"><b>Width (inc. mirrors)</b>: 2068 mm</span>
<img class="c-img-vehicle-dimensions--scale c-img | o-fit | u-absolute" src="/assets/img/ui/vehicle/dimensions/front-scale.svg" loading="lazy" width="653" height="436" alt>
<img class="c-vehicle-front c-img | o-fit | u-absolute" src="/assets/img/ds/layouts/vehicle/hero/mineral-grey__front.webp" loading="lazy" width="654" height="436" alt>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3">
<div class="u-aspect u-aspect--3x2 | u-relative">
<span class="c-scale c-scale--wheelbase"><b>Wheelbase</b>: 2,900 mm</span>
<span class="c-scale c-scale--length"><b>Length</b>: 4,900 mm</span>
<img class="c-img-vehicle-dimensions--scale c-img | o-fit | u-absolute" src="/assets/img/ui/vehicle/dimensions/side-scale.svg" loading="lazy" width="654" height="436" alt>
<img class="c-vehicle-side c-img | o-fit | u-absolute" src="/assets/img/ds/layouts/vehicle/hero/mineral-grey__side-right.webp" loading="lazy" width="654" height="436" alt>
</div>
</div>
</div>
</li>
<li class="c-vehicle-tech-category__item | o-list__item">
<div class="o-grid">
<div class="o-grid__item | u-col-12 u-col-4-@bp4">
<div class="o-split">
<h3 class="u-heading u-epsilon | o-split__title | u-mb-sm-@bp4">Engine and Drive Train</h3>
<button class="c-link-bare | u-fs-sm u-w-100%-@bp4" type="button" onclick="window.engine.showModal();">
Full Specs
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m9.5 6.5 5-5m-4.5 0h4.5V6m-8 3.5-5 5m4 0h-4v-4"/>
</svg>
</button>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp4">
<div class="o-grid | u-gap-flush u-gap-x-lg-@bp3">
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Fuel Delivery</dt>
<dd class="u-fw-500 u-ml">Twin Turbo</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Transmission</dt>
<dd class="u-fw-500 u-ml">Semi-Auto</dd>
</dl>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Cylinders</dt>
<dd class="u-fw-500 u-ml">6</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Gears</dt>
<dd class="u-fw-500 u-ml">8 Speed</dd>
</dl>
</div>
</div>
</div>
</div>
</li>
<li class="c-vehicle-tech-category__item | o-list__item">
<div class="o-grid">
<div class="o-grid__item | u-col-12 u-col-4-@bp4">
<div class="o-split">
<h3 class="u-heading u-epsilon | o-split__title | u-mb-sm-@bp4">Performance</h3>
<button class="c-link-bare | u-fs-sm u-w-100%-@bp4" type="button" onclick="window.perf.showModal();">
Full Specs
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m9.5 6.5 5-5m-4.5 0h4.5V6m-8 3.5-5 5m4 0h-4v-4"/>
</svg>
</button>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp4">
<div class="o-grid | u-gap-flush u-gap-x-lg-@bp3">
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">0-60</dt>
<dd class="u-fw-500 u-ml">3.9 Seconds</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Top Speed</dt>
<dd class="u-fw-500 u-ml">155 mph</dd>
</dl>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Engine Power</dt>
<dd class="u-fw-500 u-ml">510 BHP/PS</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Engine Torque</dt>
<dd class="u-fw-500 u-ml">6,250 RPM</dd>
</dl>
</div>
</div>
</div>
</div>
</li>
<li class="c-vehicle-tech-category__item | o-list__item">
<div class="o-grid">
<div class="o-grid__item | u-col-12 u-col-4-@bp4">
<div class="o-split">
<h3 class="u-heading u-epsilon | o-split__title | u-mb-sm-@bp4">Fuel Consumption</h3>
<button class="c-link-bare | u-fs-sm u-w-100%-@bp4" type="button" onclick="window.fuel.showModal();">
Full Specs
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m9.5 6.5 5-5m-4.5 0h4.5V6m-8 3.5-5 5m4 0h-4v-4"/>
</svg>
</button>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp4">
<div class="o-grid | u-gap-flush u-gap-x-lg-@bp3">
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Low</dt>
<dd class="u-fw-500 u-ml">18.6 mpg</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Medium</dt>
<dd class="u-fw-500 u-ml">28.5 mpg</dd>
</dl>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">High</dt>
<dd class="u-fw-500 u-ml">33.6 mpg</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Combined</dt>
<dd class="u-fw-500 u-ml">28.8 mpg</dd>
</dl>
</div>
</div>
</div>
</div>
</li>
<li class="c-vehicle-tech-category__item | o-list__item">
<div class="o-grid">
<div class="o-grid__item | u-col-12 u-col-4-@bp4">
<div class="o-split">
<h3 class="u-heading u-epsilon | o-split__title | u-mb-sm-@bp4">Emissions</h3>
<button class="c-link-bare | u-fs-sm u-w-100%-@bp4" type="button" onclick="window.emissions.showModal();">
Full Specs
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m9.5 6.5 5-5m-4.5 0h4.5V6m-8 3.5-5 5m4 0h-4v-4"/>
</svg>
</button>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp4">
<div class="o-grid | u-gap-flush u-gap-x-lg-@bp3">
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">CO<sup>2</sup> Low</dt>
<dd class="u-fw-500 u-ml">345 g/km</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Co<sup>2</sup> Medium</dt>
<dd class="u-fw-500 u-ml">225 g/km</dd>
</dl>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">CO<sup>2</sup> High</dt>
<dd class="u-fw-500 u-ml">191 g/km</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">CO<sup>2</sup> Combined</dt>
<dd class="u-fw-500 u-ml">224 g/km</dd>
</dl>
</div>
</div>
</div>
</div>
</li>
<li class="c-vehicle-tech-category__item | o-list__item">
<div class="o-grid">
<div class="o-grid__item | u-col-12 u-col-4-@bp4">
<div class="o-split">
<h3 class="u-heading u-epsilon | o-split__title | u-mb-sm-@bp4">General</h3>
<button class="c-link-bare | u-fs-sm u-w-100%-@bp4" type="button" onclick="window.general.showModal();">
Full Specs
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m9.5 6.5 5-5m-4.5 0h4.5V6m-8 3.5-5 5m4 0h-4v-4"/>
</svg>
</button>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp4">
<div class="o-grid | u-gap-flush u-gap-x-lg-@bp3">
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Wheel Type</dt>
<dd class="u-fw-500 u-ml">20" Alloy</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Luggage Capacity</dt>
<dd class="u-fw-500 u-ml">480 Litres</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">No. of Seats</dt>
<dd class="u-fw-500 u-ml">5</dd>
</dl>
</div>
<div class="o-grid__item | u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Max Load Weight</dt>
<dd class="u-fw-500 u-ml">480 kg</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Fuel Tank Capacity</dt>
<dd class="u-fw-500 u-ml">59 Litres</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-none">
<dt class="o-split__title">Manufacturers Warranty</dt>
<dd class="u-fw-500 u-ml">3 Years</dd>
</dl>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>Specs Modals
Each specification section opens up to reveal more information if the user/customer wishes to see it.
<!--
Repeat for as many sections
as needed:
-->
<dialog class="c-modal c-modal--box c-modal--box-lg" id="engine">
<div class="c-modal__body">
<div class="c-modal__body-content">
<div class="o-grid | u-gap-0 u-gap-x-lg-@bp3">
<div class="o-grid__item o-split | u-col-12 u-align-middle | u-mb">
<h2 class="u-heading u-beta | o-split__title">Engine and Drive Train</h2>
<button class="c-btn | u-round u-aspect" onclick="window.engine.close();">
<span class="u-hidden">Close</span>
<svg class="c-icon c-icon--md" viewbox="0 0 24 24" aria-hidden="true" width="24" height="24">
<path fill="none" stroke-linecap="round" stroke-width="2" d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Cylinders: Bore</dt>
<dd class="u-fw-500 u-ml">84.5 mm</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Cylinders: Stroke</dt>
<dd class="u-fw-500 u-ml">92.8 mm</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">CC</dt>
<dd class="u-fw-500 u-ml">5,204</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Cylinders</dt>
<dd class="u-fw-500 u-ml">10</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Cylinder Layout</dt>
<dd class="u-fw-500 u-ml">V10</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Number of Valves</dt>
<dd class="u-fw-500 u-ml">40</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Camshaft</dt>
<dd class="u-fw-500 u-ml">DOHC</dd>
</dl>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3">
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Fuel Delivery</dt>
<dd class="u-fw-500 u-ml">Multi Point Fuel Injections</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Catalytic Convertor</dt>
<dd class="u-fw-500 u-ml">Yes</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Engine Layout</dt>
<dd class="u-fw-500 u-ml">Mid Engine North South</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Transmission</dt>
<dd class="u-fw-500 u-ml">Semi-Auto</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Gears</dt>
<dd class="u-fw-500 u-ml">7 Speed</dd>
</dl>
<dl class="c-vehicle-tech-specs-list | o-split | u-mb-sm">
<dt class="o-split__title">Engine Code</dt>
<dd class="u-fw-500 u-ml">4Sprde</dd>
</dl>
</div>
</div>
</div>
</div>
</dialog>