Dependencies
This layout uses the following components as "atoms" to create the full UI.
Uses: Components: Utilities: Objects: JS:Standard Example
The vehicle header is a complete UI chunk for displaying primary vehicle details on the vehicle product page. Glancing information such as model, range, pricing, descriptive tags, location information and prominent image gallery.
<header class="c-vehicle-header">
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__slider">
<div class="c-slider" data-slider='{ "wrapAround": true, "cellSelector": ".c-slider__item", "pageDots": true, "prevNextButtons": true, "imagesLoaded": true, "cellAlign": "left", "percentPosition": true, "fullscreen": true, "setGallerySize": false }'>
<div class="c-slider__wrapper">
<!-- Slider Images -->
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-1.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-1.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1.webp"
width="968" height="652"
alt
>
<img class="c-slider__item--img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-2.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-2.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-3.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-3.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-4.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-4.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-5.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-5.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-6.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-6.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-6.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-6-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-7.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-7.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-7.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-7-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-8.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-8.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-8.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-8-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-9.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-9.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-9.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-9-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-10.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-10.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-10.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-10-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-11.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-11.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-11.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-11-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
</div>
</div>
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
<div class="c-vehicle__tertiary | o-split | u-align-middle">
<!-- Tags -->
<div class="c-vehicle__tags | o-split__left">
<div class="u-inline">
<button class="c-badge c-badge--lg" x-data x-tooltip.content="This car has some exciting offers available.">Offers Available</button>
</div>
</div>
<!-- Tertiary Actions -->
<div class="c-btn-fav-grp | u-self-start">
<button class="c-btn c-btn--tertiary t-btn-fav"
x-data="{ fav: false }"
@click="fav = ! fav"
:class="fav ? 'is-active' : 'is-inactive'"
x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root, hideOnClick: false }"
>
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<template x-ref="template">
<div class="u-w-12">
<p class="u-w-100% u-center" x-show="fav == true" style="display:none">Remove From Favourites</p>
<p class="u-w-100% u-center" x-show="fav != true">Add to Favourites</p>
</div>
</template>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>
</div>
<div class="u-ml-xs u-inline-flex u-self-start"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--tertiary" id="share_btn" type="button" aria-controls="share_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">Share</span>
<svg class="c-icon" icon="share" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" transform="rotate(90 8 8)">
<circle cx="4" cy="8" r="2" stroke-width="1.5"/>
<circle cx="12" cy="3" r="2" stroke-width="1.5"/>
<circle cx="12" cy="13" r="2" stroke-width="1.5"/>
<path stroke-linecap="round" stroke-width="1.5" d="m6 7 2.5-1.5m-1 5L10 12"/>
</g>
</svg>
<svg class="c-icon" icon="chevron-down" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="c-dropdown" id="share_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">Share:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-twitter" href="#twitter" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m16 2.683c-.2696686.16-1.0766618.479-1.8313314.56.4829885-.281 1.1984152-1.2 1.375511-1.931-.4638702.319-1.5304698.785-2.0597447.785l.0020125.003c-.6017232-.678-1.446953-1.1-2.3867681-1.1-1.82328159 0-3.30142762 1.592-3.30142762 3.555 0 .272.03018678.538.08552921.792h-.00100622c-2.47330357-.068-5.36419093-1.403-6.99327086-3.688-.99918245 1.866-.13483429 3.94 1.00119489 4.696-.38739702.033-1.10483618-.047-1.44192189-.399-.0231432 1.237.53028111 2.878 2.54575184 3.472-.38840325.226-1.07364317.162-1.37349853.113.10464751 1.046 1.46506509 2.413 2.9502547 2.413-.52826866.658-2.3354506 1.856-4.57128482 1.475 1.5194013.996 3.2903591 1.572 5.16395195 1.572 5.32595435 0 9.46053705-4.647 9.23916735-10.381l-.0020125-.02.0020125-.045-.0020125-.054c.4829885-.355 1.1330106-.986 1.5988932-1.818z" />
</svg>
Twitter
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-facebook" href="#facebook" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m12 5h-3v-1.3c0-.623.691-.7 1.005-.7h1.995v-3h-2.4c-2.931 0-3.6 2.044-3.6 3.354v1.646h-2v3h2v8h3v-8h2.4z"/>
</svg>
Facebook
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-purple-900" href="#link" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m9.6706951 8.96666667c.12364513-.10294449.30319913-.10294449.4268443 0 1.5339715 1.24666663 4.1017065 3.10666663 5.4956198 4.10666663.0790607.0552356.1303213.1419847.1405521.2378585s-.0215706.1914791-.0871966.2621415c-.2514003.2709642-.6040312.4254779-.9737384.4266667h-13.33888312c-.37202765.0006643-.72742929-.154004-.9804079-.4266667-.06562601-.0706624-.09742734-.1662677-.08719654-.2621415.01023079-.0958738.06149134-.1826229.14055207-.2378585 1.40058272-1 3.97498716-2.86 5.50895871-4.10666663.12364513-.10294449.30319913-.10294449.42684426 0l.73363857.66666666c.5178509.50384927 1.34292328.50384927 1.86077419 0zm5.7890753-4.92c.0989173-.08249984.2365272-.10066717.3534804-.04666667.1102946.05390759.182035.16403448.1867443.28666667v7.62666663c.0006751.125094-.0687757.2400347-.1798549.2976595-.1110793.0576247-.2450848.0482312-.347031-.0243261-1.4405993-1.04-3.4414318-2.50000003-4.7753201-3.5666667-.0764552-.06332663-.1207023-.15741545-.1207023-.25666667s.0442471-.19334003.1207023-.25666666c1.4272605-1.23333334 3.3213819-2.84 4.7619813-4.06zm-15.28268398-.08702377c.12002255-.06291246.26619815-.04696054.36981266.0403571 1.45393826 1.24666667 3.33472077 2.86 4.78865903 4.08666667.07645524.06332663.12070225.15741544.12070225.25666666s-.04424701.19334004-.12070225.25666667c-1.33388831 1.06666667-3.33472077 2.5266667-4.80866735 3.5733333-.10194619.0725574-.23595167.0819509-.34703093.0243261-.11107926-.0576247-.18052999-.1725655-.17985495-.2976594v-7.61333333c0-.13484884.05705899-.2641113.17708154-.32702377zm14.49568988-1.9596429c.4069977.00348081.790135.19251479 1.0404328.51333333.1106432.14095691.0900232.34412639-.0466861.46-2.1942462 1.86-6.04918343 5.13333334-7.18298849 6.15333334-.12591503.13248721-.30071747.20750075-.48353451.20750075s-.35761948-.07501354-.48353451-.20750075c-1.13380506-1.02-4.98874227-4.29333334-7.18298854-6.15333334-.13670928-.11587361-.15732926-.31904309-.04668609-.46.2517452-.32264807.63775893-.51188813 1.04710232-.51333333z" />
</svg>
http://lst.rs/3f3u
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body">
<div class="c-vehicle__details">
<h1 class="c-vehicle-heading | u-heading u-kilo u-mb-sm">
<span class="u-block u-mb-xs" contenteditable="true">Vehicle Model</span>
<span class="u-epsilon u-fw-500 u-leading-normal u-block u-mb" contenteditable>Vehicle Derivative</span>
</h1>
<div class="u-size-sm u-fw-400 u-mt-sm u-flex">
<span class="u-mb-xs">
<span class="c-cap-icon c-cap-icon--large c-cap-blue | u-mr-xs"></span>
<span contenteditable>Exterior Colour</span>
</span>
<span class="u-block u-ml">
<span class="c-cap-icon c-cap-icon--large c-cap-black | u-mr-xs"></span>
<span contenteditable>Interior Colour</span>
</span>
</div>
</div>
<div class="c-vehicle__price">
<span class="c-vehicle__rrp | u-mb-none u-tc-info">
<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 }">
<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-xs u-fw-600 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" width="16" height="16">
<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"/>
</svg>
</div>
</button>
<span class="u-heading u-beta u-tc-info" contenteditable>£69,000</span>
</span>
</div>
<div class="c-vehicle__actions">
<a class="c-btn c-btn--primary c-btn--lg" href="#buy">Reserve for £100</a>
<div class="c-btn-group c-btn-group--segmented">
<a class="c-btn c-btn--secondary c-btn--lg" href="#enquire">Enquire</a>
<div class="c-btn-group__dropdown"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--secondary c-btn--lg | u-flex-stunted" type="button" id="more_options_btn" aria-controls="more_options_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">More</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
</svg>
</button>
<div class="c-dropdown" id="more_options_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#finance" role="option">Apply for Finance</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#video" role="option">Request a Video Presentation</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#testdrive" role="option">Arrange a Test Drive</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#quote" role="option">Get a Finance Quote</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#information" role="option">Request More Information</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle__key-details">
<div class="o-grid">
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Located at</span>
<span class="u-fs-sm"><a href="#dealership">Listers SEAT Worcester</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Telephone</span>
<span class="u-fs-sm"><a href="tel:02476456700">02476 456 700</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Registered</span>
<span class="u-fs-sm">2017 (17)</span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Mileage</span>
<span class="u-fs-sm">43,526 miles</span>
</div>
</div>
</div>
</div>
</header>Switch Media Types
Switch between image, video, and 360 media types.
<header class="c-vehicle-header"
x-data="{ media: 'slider' }"
:class="media === 'image' ? 'c-vehicle-header--no-images' : ''"
>
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__slider"
x-show="media === 'slider'"
:aria-hidden="media === 'slider' ? 'true' : 'false'"
>
<div class="c-slider" data-slider='{"percentPosition": false, "wrapAround": true, "cellSelector": ".c-slider__item", "pageDots": true, "prevNextButtons": true, "cellAlign": "left", "fullscreen": true, "adaptiveHeight": true }'>
<div class="c-slider__wrapper">
<!-- Slider Images -->
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-1.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-1.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1.webp"
width="968" height="652"
alt
>
<img class="c-slider__item--img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-2.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-2.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-3.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-3.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-4.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-4.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-5.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-5.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__video" id="video"
style="display: none;"
x-show="media === 'video'"
:aria-hidden="media === 'video' ? 'true' : 'false'"
>
<div class="u-aspect--3x2">
<iframe class="u-aspect--16x9 u-w-100%" src="https://video.citnow.com/embed/NrLbh79_b?vid=pgmwIW&width=100%25&height=100%25&stretch=uniform&autostart=false" loading="lazy" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Media Switcher -->
<div class="c-vehicle-header__hero c-vehicle-header__hero--switcher">
<div class="c-vehicle-header__switcher | u-space-x-sm">
<button class="c-vehicle__hero-btn" id="slider" type="button"
x-data
x-tooltip.content="Open Image Gallery"
@click="media = $el.id"
:class="media === $el.id ? 'is-active' : 'is-inactive'"
data-refresh
>
<span class="u-hidden">Open Gallery</span>
<svg class="c-icon c-icon--md" viewbox="0 0 24 24" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.888 17.69h9.913a1.888 1.888 0 0 0 1.889-1.89V5.888A1.888 1.888 0 0 0 15.801 4H5.888A1.888 1.888 0 0 0 4 5.888v9.913c0 1.043.845 1.888 1.888 1.888Z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.532 21h8.857A1.61 1.61 0 0 0 21 19.39v-7.248h0"/>
</g>
<path d="M15.048 15.408H6.74a.8.8 0 0 1-.64-1.28l2.461-3.283 1.142 1.122 2.275-3.404 3.734 5.601a.8.8 0 0 1-.665 1.244ZM7.42 9.704a1.14 1.14 0 1 1 0-2.282 1.14 1.14 0 0 1 0 2.282Z"/>
</svg>
</button>
<button class="c-vehicle__hero-btn" id="video" type="button"
x-data
x-tooltip.content="Open Walk Around Video"
@click="media = $el.id"
:class="media === $el.id ? 'is-active' : 'is-inactive'"
>
<span class="u-hidden">Open Video</span>
<svg class="c-icon c-icon--md" viewbox="0 0 24 24" aria-hidden="true">
<g fill-rule="evenodd">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H3.83c-1.107 1.111-1.107 8.889 0 10H17V8Z"/>
<path fill="none" stroke-linejoin="round" stroke-width="2" d="M17 11.286 22 9v8l-5-2.286"/>
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 8V5H6"/>
<circle cx="13" cy="15" r="1"/>
<circle cx="10" cy="15" r="1"/>
<path fill="none" stroke-linecap="round" stroke-width="2" d="M13 12H7"/>
</g>
</svg>
</button>
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
<div class="c-vehicle__tertiary | o-split | u-align-middle">
<!-- Tags -->
<div class="c-vehicle__tags | o-split__left">
<div class="u-inline">
<button class="c-badge c-badge--lg" x-data x-tooltip.content="This car has some exciting offers available.">Offers Available</button>
</div>
</div>
<!-- Tertiary Actions -->
<div class="c-btn-fav-grp | u-self-start">
<button class="c-btn c-btn--tertiary t-btn-fav"
x-data="{ fav: false }"
@click="fav = ! fav"
:class="fav ? 'is-active' : 'is-inactive'"
x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root, hideOnClick: false }"
>
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<template x-ref="template">
<div class="u-w-12">
<p class="u-w-100% u-center" x-show="fav == true" style="display:none">Remove From Favourites</p>
<p class="u-w-100% u-center" x-show="fav != true">Add to Favourites</p>
</div>
</template>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>
</div>
<div class="u-ml-xs u-inline-flex u-self-start"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--tertiary" id="share_btn" type="button" aria-controls="share_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">Share</span>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" transform="rotate(90 8 8)">
<circle cx="4" cy="8" r="2" stroke-width="1.5"/>
<circle cx="12" cy="3" r="2" stroke-width="1.5"/>
<circle cx="12" cy="13" r="2" stroke-width="1.5"/>
<path stroke-linecap="round" stroke-width="1.5" d="m6 7 2.5-1.5m-1 5L10 12"/>
</g>
</svg>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="c-dropdown" id="share_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">Share:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-twitter" href="#twitter" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m16 2.683c-.2696686.16-1.0766618.479-1.8313314.56.4829885-.281 1.1984152-1.2 1.375511-1.931-.4638702.319-1.5304698.785-2.0597447.785l.0020125.003c-.6017232-.678-1.446953-1.1-2.3867681-1.1-1.82328159 0-3.30142762 1.592-3.30142762 3.555 0 .272.03018678.538.08552921.792h-.00100622c-2.47330357-.068-5.36419093-1.403-6.99327086-3.688-.99918245 1.866-.13483429 3.94 1.00119489 4.696-.38739702.033-1.10483618-.047-1.44192189-.399-.0231432 1.237.53028111 2.878 2.54575184 3.472-.38840325.226-1.07364317.162-1.37349853.113.10464751 1.046 1.46506509 2.413 2.9502547 2.413-.52826866.658-2.3354506 1.856-4.57128482 1.475 1.5194013.996 3.2903591 1.572 5.16395195 1.572 5.32595435 0 9.46053705-4.647 9.23916735-10.381l-.0020125-.02.0020125-.045-.0020125-.054c.4829885-.355 1.1330106-.986 1.5988932-1.818z" />
</svg>
Twitter
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-facebook" href="#facebook" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m12 5h-3v-1.3c0-.623.691-.7 1.005-.7h1.995v-3h-2.4c-2.931 0-3.6 2.044-3.6 3.354v1.646h-2v3h2v8h3v-8h2.4z"/>
</svg>
Facebook
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-purple-900" href="#link" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m9.6706951 8.96666667c.12364513-.10294449.30319913-.10294449.4268443 0 1.5339715 1.24666663 4.1017065 3.10666663 5.4956198 4.10666663.0790607.0552356.1303213.1419847.1405521.2378585s-.0215706.1914791-.0871966.2621415c-.2514003.2709642-.6040312.4254779-.9737384.4266667h-13.33888312c-.37202765.0006643-.72742929-.154004-.9804079-.4266667-.06562601-.0706624-.09742734-.1662677-.08719654-.2621415.01023079-.0958738.06149134-.1826229.14055207-.2378585 1.40058272-1 3.97498716-2.86 5.50895871-4.10666663.12364513-.10294449.30319913-.10294449.42684426 0l.73363857.66666666c.5178509.50384927 1.34292328.50384927 1.86077419 0zm5.7890753-4.92c.0989173-.08249984.2365272-.10066717.3534804-.04666667.1102946.05390759.182035.16403448.1867443.28666667v7.62666663c.0006751.125094-.0687757.2400347-.1798549.2976595-.1110793.0576247-.2450848.0482312-.347031-.0243261-1.4405993-1.04-3.4414318-2.50000003-4.7753201-3.5666667-.0764552-.06332663-.1207023-.15741545-.1207023-.25666667s.0442471-.19334003.1207023-.25666666c1.4272605-1.23333334 3.3213819-2.84 4.7619813-4.06zm-15.28268398-.08702377c.12002255-.06291246.26619815-.04696054.36981266.0403571 1.45393826 1.24666667 3.33472077 2.86 4.78865903 4.08666667.07645524.06332663.12070225.15741544.12070225.25666666s-.04424701.19334004-.12070225.25666667c-1.33388831 1.06666667-3.33472077 2.5266667-4.80866735 3.5733333-.10194619.0725574-.23595167.0819509-.34703093.0243261-.11107926-.0576247-.18052999-.1725655-.17985495-.2976594v-7.61333333c0-.13484884.05705899-.2641113.17708154-.32702377zm14.49568988-1.9596429c.4069977.00348081.790135.19251479 1.0404328.51333333.1106432.14095691.0900232.34412639-.0466861.46-2.1942462 1.86-6.04918343 5.13333334-7.18298849 6.15333334-.12591503.13248721-.30071747.20750075-.48353451.20750075s-.35761948-.07501354-.48353451-.20750075c-1.13380506-1.02-4.98874227-4.29333334-7.18298854-6.15333334-.13670928-.11587361-.15732926-.31904309-.04668609-.46.2517452-.32264807.63775893-.51188813 1.04710232-.51333333z" />
</svg>
http://lst.rs/3f3u
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body">
<div class="c-vehicle__details">
<h1 class="c-vehicle-heading | u-heading u-kilo u-mb-sm">
<span class="u-block u-mb-xs" contenteditable>Vehicle Model</span>
<span class="u-epsilon u-fw-500 u-leading-normal u-block u-mb" contenteditable>Vehicle Derivative</span>
</h1>
<div class="u-size-sm u-fw-400 u-mt-sm u-flex">
<span class="u-mb-xs">
<span class="c-cap-icon c-cap-icon--large c-cap-blue | u-mr-xs"></span>
<span contenteditable>Exterior Colour</span>
</span>
<span class="u-block u-ml">
<span class="c-cap-icon c-cap-icon--large c-cap-black | u-mr-xs"></span>
<span contenteditable>Interior Colour</span>
</span>
</div>
</div>
<div class="c-vehicle__price">
<span class="c-vehicle__rrp | u-mb-0 u-tc-info">
<button class="c-link-bare | o-split | u-w-100% u-mb-sm" type="button"
x-tooltip="{ content: () => $refs.template.innerHTML,
allowHTML: true,
appendTo: $root }">
<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-xs u-fw-600 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"/>
</svg>
</div>
</button>
<span class="u-heading u-beta u-tc-info" contenteditable>£69,000</span>
</span>
</div>
<div class="c-vehicle__actions">
<a class="c-btn c-btn--primary c-btn--lg" href="#buy">Reserve for £100</a>
<div class="c-btn-group c-btn-group--segmented">
<a class="c-btn c-btn--secondary c-btn--lg" href="#enquire">Enquire</a>
<div class="c-btn-group__dropdown"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--secondary c-btn--lg | u-flex-stunted" type="button" id="more_options_btn" aria-controls="more_options_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">More</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
</svg>
</button>
<div class="c-dropdown t-dropdown--default" id="more_options_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#finance" role="option">Apply for Finance</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#video" role="option">Request a Video Presentation</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#testdrive" role="option">Arrange a Test Drive</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#quote" role="option">Get a Finance Quote</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#more" role="option">Request More Information</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle__key-details">
<div class="o-grid">
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Located at</span>
<span class="u-fs-sm"><a href="#dealership">Listers SEAT Worcester</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Telephone</span>
<span class="u-fs-sm"><a href="tel:02476456700">02476 456 700</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Registered</span>
<span class="u-fs-sm">2017 (17)</span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Mileage</span>
<span class="u-fs-sm">43,526 miles</span>
</div>
</div>
</div>
</div>
</header>Finance Information
When the vehicle is available for finance, the header information changes to include finance information and a finance example.
Vehicle Model Vehicle Derivative
Exterior Colour Interior Colour
£69,000 Monthly: £150 APR: 10.9%
PCP Representative Example: Monthly payments £215.47, Term 48 months, Contract length 48 months, Car price £18,795, Cash deposit £5000, Deposit contribution £250 , Total amount of credit £13,795.00, Total amount payable £22,935.06, Representative APR 9.8%, Total charges payable £4,140.06, Fixed rate of interest pa 9.73%, Option to purchase fee £10.
Vehicle Model Vehicle Derivative
Exterior Colour Interior Colour
£69,000 Was: £69,990 You Save: £990
<header class="c-vehicle-header">
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__slider">
<div class="c-slider" data-slider='{ "percentPosition": false, "wrapAround": true, "cellSelector": ".c-slider__item", "pageDots": true, "prevNextButtons": true, "imagesLoaded": true, "cellAlign": "left", "fullscreen": true, "adaptiveHeight": true }'>
<div class="c-slider__wrapper">
<!-- Slider Images -->
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit" srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-1.webp 414w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-1.webp 768w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1.webp" width="968" height="652" alt>
<img class="c-slider__item--img c-img c-img--large | o-fit" src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1-large.webp" loading="lazy" width="1500" height="1000" alt/>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit" srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-2.webp 414w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-2.webp 768w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2.webp" loading="lazy" width="968" height="652" alt>
<img class="c-slider__item-img c-img c-img--large | o-fit" src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2-large.webp" loading="lazy" width="1500" height="1000" alt />
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit" srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-3.webp 414w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-3.webp 768w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3.webp" loading="lazy" width="968" height="652" alt>
<img class="c-slider__item-img c-img c-img--large | o-fit" src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3-large.webp" loading="lazy" width="1500" height="1000" alt />
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit" srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-4.webp 414w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-4.webp 768w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4.webp" loading="lazy" width="968" height="652" alt>
<img class="c-slider__item-img c-img c-img--large | o-fit" src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4-large.webp" loading="lazy" width="1500" height="1000" alt />
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit" srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-5.webp 414w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-5.webp 768w, /assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5.webp" loading="lazy" width="968" height="652" alt>
<img class="c-slider__item-img c-img c-img--large | o-fit" src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5-large.webp" loading="lazy" width="1500" height="1000" alt />
</div>
</div>
</div>
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
<div class="c-vehicle__tertiary | o-split | u-align-middle">
<!-- Tags -->
<div class="c-vehicle__tags | o-split__left">
<div class="u-inline">
<button class="c-badge c-badge--lg c-badge--purple" x-data x-tooltip.content="Available to buy this car with finance.">Finance Available</button>
</div>
</div>
<!-- Tertiary Actions -->
<div class="c-btn-fav-grp | u-self-start">
<button class="c-btn c-btn--tertiary t-btn-fav"
x-data="{ fav: false }"
@click="fav = ! fav"
:class="fav ? 'is-active' : 'is-inactive'"
x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root, hideOnClick: false }"
>
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<template x-ref="template">
<div class="u-w-12">
<p class="u-w-100% u-center" x-show="fav == true" style="display:none">Remove From Favourites</p>
<p class="u-w-100% u-center" x-show="fav != true">Add to Favourites</p>
</div>
</template>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>
</div>
<div class="u-ml-xs u-inline-flex u-self-start"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--tertiary" id="share_btn" type="button" aria-controls="share_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">Share</span>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" transform="rotate(90 8 8)">
<circle cx="4" cy="8" r="2" stroke-width="1.5"/>
<circle cx="12" cy="3" r="2" stroke-width="1.5"/>
<circle cx="12" cy="13" r="2" stroke-width="1.5"/>
<path stroke-linecap="round" stroke-width="1.5" d="m6 7 2.5-1.5m-1 5L10 12"/>
</g>
</svg>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="c-dropdown" id="share_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">Share:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-twitter" href="#twitter" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m16 2.683c-.2696686.16-1.0766618.479-1.8313314.56.4829885-.281 1.1984152-1.2 1.375511-1.931-.4638702.319-1.5304698.785-2.0597447.785l.0020125.003c-.6017232-.678-1.446953-1.1-2.3867681-1.1-1.82328159 0-3.30142762 1.592-3.30142762 3.555 0 .272.03018678.538.08552921.792h-.00100622c-2.47330357-.068-5.36419093-1.403-6.99327086-3.688-.99918245 1.866-.13483429 3.94 1.00119489 4.696-.38739702.033-1.10483618-.047-1.44192189-.399-.0231432 1.237.53028111 2.878 2.54575184 3.472-.38840325.226-1.07364317.162-1.37349853.113.10464751 1.046 1.46506509 2.413 2.9502547 2.413-.52826866.658-2.3354506 1.856-4.57128482 1.475 1.5194013.996 3.2903591 1.572 5.16395195 1.572 5.32595435 0 9.46053705-4.647 9.23916735-10.381l-.0020125-.02.0020125-.045-.0020125-.054c.4829885-.355 1.1330106-.986 1.5988932-1.818z" />
</svg>
Twitter
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-facebook" href="#facebook" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m12 5h-3v-1.3c0-.623.691-.7 1.005-.7h1.995v-3h-2.4c-2.931 0-3.6 2.044-3.6 3.354v1.646h-2v3h2v8h3v-8h2.4z"/>
</svg>
Facebook
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-purple-900" href="#link" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m9.6706951 8.96666667c.12364513-.10294449.30319913-.10294449.4268443 0 1.5339715 1.24666663 4.1017065 3.10666663 5.4956198 4.10666663.0790607.0552356.1303213.1419847.1405521.2378585s-.0215706.1914791-.0871966.2621415c-.2514003.2709642-.6040312.4254779-.9737384.4266667h-13.33888312c-.37202765.0006643-.72742929-.154004-.9804079-.4266667-.06562601-.0706624-.09742734-.1662677-.08719654-.2621415.01023079-.0958738.06149134-.1826229.14055207-.2378585 1.40058272-1 3.97498716-2.86 5.50895871-4.10666663.12364513-.10294449.30319913-.10294449.42684426 0l.73363857.66666666c.5178509.50384927 1.34292328.50384927 1.86077419 0zm5.7890753-4.92c.0989173-.08249984.2365272-.10066717.3534804-.04666667.1102946.05390759.182035.16403448.1867443.28666667v7.62666663c.0006751.125094-.0687757.2400347-.1798549.2976595-.1110793.0576247-.2450848.0482312-.347031-.0243261-1.4405993-1.04-3.4414318-2.50000003-4.7753201-3.5666667-.0764552-.06332663-.1207023-.15741545-.1207023-.25666667s.0442471-.19334003.1207023-.25666666c1.4272605-1.23333334 3.3213819-2.84 4.7619813-4.06zm-15.28268398-.08702377c.12002255-.06291246.26619815-.04696054.36981266.0403571 1.45393826 1.24666667 3.33472077 2.86 4.78865903 4.08666667.07645524.06332663.12070225.15741544.12070225.25666666s-.04424701.19334004-.12070225.25666667c-1.33388831 1.06666667-3.33472077 2.5266667-4.80866735 3.5733333-.10194619.0725574-.23595167.0819509-.34703093.0243261-.11107926-.0576247-.18052999-.1725655-.17985495-.2976594v-7.61333333c0-.13484884.05705899-.2641113.17708154-.32702377zm14.49568988-1.9596429c.4069977.00348081.790135.19251479 1.0404328.51333333.1106432.14095691.0900232.34412639-.0466861.46-2.1942462 1.86-6.04918343 5.13333334-7.18298849 6.15333334-.12591503.13248721-.30071747.20750075-.48353451.20750075s-.35761948-.07501354-.48353451-.20750075c-1.13380506-1.02-4.98874227-4.29333334-7.18298854-6.15333334-.13670928-.11587361-.15732926-.31904309-.04668609-.46.2517452-.32264807.63775893-.51188813 1.04710232-.51333333z" />
</svg>
http://lst.rs/3f3u
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body">
<div class="c-vehicle__details">
<h1 class="c-vehicle-heading | u-heading u-kilo u-mb-sm">
<span class="u-block u-mb-xs" contenteditable>Vehicle Model</span>
<span class="u-epsilon u-fw-500 u-leading-normal u-block u-mb" contenteditable>Vehicle Derivative</span>
</h1>
<div class="u-size-sm u-fw-400 u-mt-sm u-flex">
<span class="u-mb-xs">
<span class="c-cap-icon c-cap-icon--large c-cap-blue | u-mr-xs"></span>
<span contenteditable>Exterior Colour</span>
</span>
<span class="u-block u-ml">
<span class="c-cap-icon c-cap-icon--large c-cap-black | u-mr-xs"></span>
<span contenteditable>Interior Colour</span>
</span>
</div>
</div>
<div class="c-vehicle__price c-vehicle__price--/w-finance">
<span class="c-vehicle__rrp | u-mb-none u-tc-info">
<button class="c-link-bare | o-split | u-w-100% u-mb-sm" type="button"
x-tooltip="{ content: () => $refs.template.innerHTML,
allowHTML: true,
appendTo: $root }">
<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-xs u-fw-600 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"/>
</svg>
</div>
</button>
<span class="u-heading u-beta u-tc-info" contenteditable>£69,000</span>
</span>
<span class="c-vehicle__monthly | u-mb-none u-tc-purple-900">
<span class="c-title | u-flex u-align-middle u-fs-xs u-fw-600 u-mb-sm">Monthly:</span>
<span class="u-heading u-beta u-tc-purple-900" contenteditable>£150</span>
</span>
<span class="c-vehicle__apr | u-mb-none u-tc-purple-900">
<span class="c-title | u-flex u-align-middle u-fs-xs u-fw-600 u-mb-sm">APR:</span>
<span class="u-heading u-beta u-tc-purple-900" contenteditable>10.9%</span>
</span>
</div>
<div class="c-vehicle__actions">
<a class="c-btn c-btn--primary c-btn--lg" href="#buy">Reserve for £100</a>
<div class="c-btn-group c-btn-group--segmented">
<a class="c-btn c-btn--secondary c-btn--lg" href="#enquire">Enquire</a>
<div class="c-btn-group__dropdown"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--secondary c-btn--lg | u-flex-stunted" type="button" id="more_options_btn" aria-controls="more_options_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">More</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
</svg>
</button>
<div class="c-dropdown t-dropdown--default" id="more_options_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Apply for Finance</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Request a Video Presentation</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Arrange a Test Drive</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Get a Finance Quote</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Request More Information</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle__key-details">
<div class="o-grid">
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Located at</span>
<span class="u-fs-sm"><a href="#dealership">Listers SEAT Worcester</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Telephone</span>
<span class="u-fs-sm"><a href="tel:02476456700">02476 456 700</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Registered</span>
<span class="u-fs-sm">2017 (17)</span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Mileage</span>
<span class="u-fs-sm">43,526 miles</span>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body-btm">
<p class="u-fs-xs">
<b class="u-tc-headings">PCP Representative Example:</b>
Monthly payments £215.47, Term 48 months, Contract length 48 months, Car price £18,795, Cash deposit £5000, Deposit contribution £250 , Total amount of credit £13,795.00, Total amount payable £22,935.06, Representative APR 9.8%, Total charges payable £4,140.06, Fixed rate of interest pa 9.73%, Option to purchase fee £10.
</p>
</div>
</header><header class="c-vehicle-header">
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__slider">
<div class="c-slider" data-slider='{"percentPosition": false, "wrapAround": true, "cellSelector": ".c-slider__item", "pageDots": true, "prevNextButtons": true, "imagesLoaded": true, "cellAlign": "left", "fullscreen": true, "adaptiveHeight": true }'>
<div class="c-slider__wrapper">
<!-- Slider Images -->
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-1.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-1.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1.webp"
width="968" height="652"
alt
>
<img class="c-slider__item--img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-2.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-2.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-3.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-3.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-4.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-4.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-5.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-5.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
</div>
</div>
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
<div class="c-vehicle__tertiary | o-split | u-align-middle">
<!-- Tags -->
<div class="c-vehicle__tags | o-split__left">
<div class="u-inline">
<button class="c-badge c-badge--lg c-badge--primary" x-data x-tooltip.content="This car is available to buy online now.">Buy Online</button>
</div>
<div class="u-inline">
<button class="c-badge c-badge--lg c-badge--red" x-data x-tooltip.content="Make a saving on this car.">Discounted</button>
</div>
</div>
<!-- Tertiary Actions -->
<div class="c-btn-fav-grp | u-self-start">
<button class="c-btn c-btn--tertiary t-btn-fav"
x-data="{ fav: false }"
@click="fav = ! fav"
:class="fav ? 'is-active' : 'is-inactive'"
x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root, hideOnClick: false }"
>
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<template x-ref="template">
<div class="u-w-12">
<p class="u-w-100% u-center" x-show="fav == true" style="display:none">Remove From Favourites</p>
<p class="u-w-100% u-center" x-show="fav != true">Add to Favourites</p>
</div>
</template>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>
</div>
<div class="u-ml-xs u-inline-flex u-self-start"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--tertiary" id="share_btn" type="button" aria-controls="share_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">Share</span>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" transform="rotate(90 8 8)">
<circle cx="4" cy="8" r="2" stroke-width="1.5"/>
<circle cx="12" cy="3" r="2" stroke-width="1.5"/>
<circle cx="12" cy="13" r="2" stroke-width="1.5"/>
<path stroke-linecap="round" stroke-width="1.5" d="m6 7 2.5-1.5m-1 5L10 12"/>
</g>
</svg>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="c-dropdown" id="share_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">Share:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-twitter" href="#twitter" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m16 2.683c-.2696686.16-1.0766618.479-1.8313314.56.4829885-.281 1.1984152-1.2 1.375511-1.931-.4638702.319-1.5304698.785-2.0597447.785l.0020125.003c-.6017232-.678-1.446953-1.1-2.3867681-1.1-1.82328159 0-3.30142762 1.592-3.30142762 3.555 0 .272.03018678.538.08552921.792h-.00100622c-2.47330357-.068-5.36419093-1.403-6.99327086-3.688-.99918245 1.866-.13483429 3.94 1.00119489 4.696-.38739702.033-1.10483618-.047-1.44192189-.399-.0231432 1.237.53028111 2.878 2.54575184 3.472-.38840325.226-1.07364317.162-1.37349853.113.10464751 1.046 1.46506509 2.413 2.9502547 2.413-.52826866.658-2.3354506 1.856-4.57128482 1.475 1.5194013.996 3.2903591 1.572 5.16395195 1.572 5.32595435 0 9.46053705-4.647 9.23916735-10.381l-.0020125-.02.0020125-.045-.0020125-.054c.4829885-.355 1.1330106-.986 1.5988932-1.818z" />
</svg>
Twitter
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-facebook" href="#facebook" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m12 5h-3v-1.3c0-.623.691-.7 1.005-.7h1.995v-3h-2.4c-2.931 0-3.6 2.044-3.6 3.354v1.646h-2v3h2v8h3v-8h2.4z"/>
</svg>
Facebook
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-purple-900" href="#link" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m9.6706951 8.96666667c.12364513-.10294449.30319913-.10294449.4268443 0 1.5339715 1.24666663 4.1017065 3.10666663 5.4956198 4.10666663.0790607.0552356.1303213.1419847.1405521.2378585s-.0215706.1914791-.0871966.2621415c-.2514003.2709642-.6040312.4254779-.9737384.4266667h-13.33888312c-.37202765.0006643-.72742929-.154004-.9804079-.4266667-.06562601-.0706624-.09742734-.1662677-.08719654-.2621415.01023079-.0958738.06149134-.1826229.14055207-.2378585 1.40058272-1 3.97498716-2.86 5.50895871-4.10666663.12364513-.10294449.30319913-.10294449.42684426 0l.73363857.66666666c.5178509.50384927 1.34292328.50384927 1.86077419 0zm5.7890753-4.92c.0989173-.08249984.2365272-.10066717.3534804-.04666667.1102946.05390759.182035.16403448.1867443.28666667v7.62666663c.0006751.125094-.0687757.2400347-.1798549.2976595-.1110793.0576247-.2450848.0482312-.347031-.0243261-1.4405993-1.04-3.4414318-2.50000003-4.7753201-3.5666667-.0764552-.06332663-.1207023-.15741545-.1207023-.25666667s.0442471-.19334003.1207023-.25666666c1.4272605-1.23333334 3.3213819-2.84 4.7619813-4.06zm-15.28268398-.08702377c.12002255-.06291246.26619815-.04696054.36981266.0403571 1.45393826 1.24666667 3.33472077 2.86 4.78865903 4.08666667.07645524.06332663.12070225.15741544.12070225.25666666s-.04424701.19334004-.12070225.25666667c-1.33388831 1.06666667-3.33472077 2.5266667-4.80866735 3.5733333-.10194619.0725574-.23595167.0819509-.34703093.0243261-.11107926-.0576247-.18052999-.1725655-.17985495-.2976594v-7.61333333c0-.13484884.05705899-.2641113.17708154-.32702377zm14.49568988-1.9596429c.4069977.00348081.790135.19251479 1.0404328.51333333.1106432.14095691.0900232.34412639-.0466861.46-2.1942462 1.86-6.04918343 5.13333334-7.18298849 6.15333334-.12591503.13248721-.30071747.20750075-.48353451.20750075s-.35761948-.07501354-.48353451-.20750075c-1.13380506-1.02-4.98874227-4.29333334-7.18298854-6.15333334-.13670928-.11587361-.15732926-.31904309-.04668609-.46.2517452-.32264807.63775893-.51188813 1.04710232-.51333333z" />
</svg>
http://lst.rs/3f3u
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body">
<div class="c-vehicle__details">
<h1 class="c-vehicle-heading | u-heading u-kilo u-mb-sm">
<span class="u-block u-mb-xs" contenteditable>Vehicle Model</span>
<span class="u-epsilon u-fw-500 u-leading-normal u-block u-mb" contenteditable>Vehicle Derivative</span>
</h1>
<div class="u-size-sm u-fw-400 u-mt-sm u-flex">
<span class="u-mb-xs">
<span class="c-cap-icon c-cap-icon--large c-cap-blue | u-mr-xs"></span>
<span contenteditable>Exterior Colour</span>
</span>
<span class="u-block u-ml">
<span class="c-cap-icon c-cap-icon--large c-cap-black | u-mr-xs"></span>
<span contenteditable>Interior Colour</span>
</span>
</div>
</div>
<div class="c-vehicle__price">
<span class="c-vehicle__rrp | u-mb-0 u-tc-info">
<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 }"
>
<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-xs u-fw-600 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"/>
</svg>
</div>
</button>
<span class="u-heading u-beta u-tc-purple-900" contenteditable>£69,000</span>
</span>
<span class="c-vehicle__price-row | u-mt-xs">
<span class="c-vehicle__price-was">
<span class="u-milli">Was:</span>
<span class="c-vehicle__price-value" contenteditable>£69,990</span>
</span>
<span class="c-vehicle__price-save">
<span class="u-milli">You Save:</span>
<span class="c-vehicle__price-value" contenteditable>£990</span>
</span>
</span>
</div>
<div class="c-vehicle__actions">
<a class="c-btn c-btn--primary c-btn--lg" href="#">Reserve for £100</a>
<div class="c-btn-group c-btn-group--segmented">
<a class="c-btn c-btn--secondary c-btn--lg" href="#enquire">Enquire</a>
<div class="c-btn-group__dropdown"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--secondary c-btn--lg | u-flex-stunted" type="button" id="more_options_btn" aria-controls="more_options_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">More</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
</svg>
</button>
<div class="c-dropdown" id="more_options_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Apply for Finance</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Request a Video Presentation</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Arrange a Test Drive</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Get a Finance Quote</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Request More Information</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle__key-details">
<div class="o-grid">
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Located at</span>
<span class="u-fs-sm"><a href="#dealership">Listers SEAT Worcester</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Telephone</span>
<span class="u-fs-sm"><a href="tel:02476456700">02476 456 700</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Registered</span>
<span class="u-fs-sm">2017 (17)</span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Mileage</span>
<span class="u-fs-sm">43,526 miles</span>
</div>
</div>
</div>
</div>
</header>Vehicle Header States
The vehicle header changes according to different states, i.e. is the vehicle sold or under offer. Is it available for pre-order, etc etc.
Vehicle Model Vehicle Derivative
Exterior Colour Interior Colour
£69,000
Pre-Order for March 1st
Pre-Order Vehicle Model Vehicle Derivative
Exterior Colour Interior Colour
Vehicle Model Vehicle Derivative
Exterior Colour Interior Colour
<header class="c-vehicle-header">
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__slider">
<div class="c-slider" data-slider='{ "percentPosition": false, "wrapAround": true, "cellSelector": ".c-slider__item", "pageDots": true, "prevNextButtons": true, "imagesLoaded": true, "cellAlign": "left", "fullscreen": true, "adaptiveHeight": true }'>
<div class="c-slider__wrapper">
<!-- Slider Images -->
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-1.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-1.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1.webp"
width="968" height="652"
alt
>
<img class="c-slider__item--img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-2.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-2.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-2-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-3.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-3.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-3-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-4.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-4.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-4-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
<div class="c-slider__item | u-aspect--3x2">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-5.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-5.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5.webp"
loading="lazy"
width="968" height="652"
alt
>
<img class="c-slider__item-img c-img c-img--large | o-fit"
src="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-5-large.webp"
loading="lazy"
width="1500" height="1000"
alt
>
</div>
</div>
</div>
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
<div class="c-vehicle__tertiary | o-split | u-align-middle">
<!-- Tags -->
<div class="c-vehicle__tags | o-split__left">
<div class="u-inline">
<button class="c-badge c-badge--lg c-badge--blue" x-data x-tooltip.content="You can pre-order this car online." aria-expanded="false">Pre-Order Online</button>
</div>
<div class="u-inline">
<button class="c-badge c-badge--lg" x-data x-tooltip.content="This car has some exciting offers available.">Offers Available</button>
</div>
</div>
<!-- Tertiary Actions -->
<div class="c-btn-fav-grp | u-self-start">
<button class="c-btn c-btn--tertiary t-btn-fav"
x-data="{ fav: false }"
@click="fav = ! fav"
:class="fav ? 'is-active' : 'is-inactive'"
x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root, hideOnClick: false }"
>
<span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
<span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
<template x-ref="template">
<div class="u-w-12">
<p class="u-w-100% u-center" x-show="fav == true" style="display:none">Remove From Favourites</p>
<p class="u-w-100% u-center" x-show="fav != true">Add to Favourites</p>
</div>
</template>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>
</div>
<div class="u-ml-xs u-inline-flex u-self-start"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--tertiary" id="share_btn" type="button" aria-controls="share_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">Share</span>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" transform="rotate(90 8 8)">
<circle cx="4" cy="8" r="2" stroke-width="1.5"/>
<circle cx="12" cy="3" r="2" stroke-width="1.5"/>
<circle cx="12" cy="13" r="2" stroke-width="1.5"/>
<path stroke-linecap="round" stroke-width="1.5" d="m6 7 2.5-1.5m-1 5L10 12"/>
</g>
</svg>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="c-dropdown" id="share_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">Share:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-twitter" href="#twitter" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m16 2.683c-.2696686.16-1.0766618.479-1.8313314.56.4829885-.281 1.1984152-1.2 1.375511-1.931-.4638702.319-1.5304698.785-2.0597447.785l.0020125.003c-.6017232-.678-1.446953-1.1-2.3867681-1.1-1.82328159 0-3.30142762 1.592-3.30142762 3.555 0 .272.03018678.538.08552921.792h-.00100622c-2.47330357-.068-5.36419093-1.403-6.99327086-3.688-.99918245 1.866-.13483429 3.94 1.00119489 4.696-.38739702.033-1.10483618-.047-1.44192189-.399-.0231432 1.237.53028111 2.878 2.54575184 3.472-.38840325.226-1.07364317.162-1.37349853.113.10464751 1.046 1.46506509 2.413 2.9502547 2.413-.52826866.658-2.3354506 1.856-4.57128482 1.475 1.5194013.996 3.2903591 1.572 5.16395195 1.572 5.32595435 0 9.46053705-4.647 9.23916735-10.381l-.0020125-.02.0020125-.045-.0020125-.054c.4829885-.355 1.1330106-.986 1.5988932-1.818z" />
</svg>
Twitter
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-facebook" href="#facebook" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m12 5h-3v-1.3c0-.623.691-.7 1.005-.7h1.995v-3h-2.4c-2.931 0-3.6 2.044-3.6 3.354v1.646h-2v3h2v8h3v-8h2.4z"/>
</svg>
Facebook
</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link | u-tc-purple-900" href="#link" role="option">
<svg class="c-icon | u-mx-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m9.6706951 8.96666667c.12364513-.10294449.30319913-.10294449.4268443 0 1.5339715 1.24666663 4.1017065 3.10666663 5.4956198 4.10666663.0790607.0552356.1303213.1419847.1405521.2378585s-.0215706.1914791-.0871966.2621415c-.2514003.2709642-.6040312.4254779-.9737384.4266667h-13.33888312c-.37202765.0006643-.72742929-.154004-.9804079-.4266667-.06562601-.0706624-.09742734-.1662677-.08719654-.2621415.01023079-.0958738.06149134-.1826229.14055207-.2378585 1.40058272-1 3.97498716-2.86 5.50895871-4.10666663.12364513-.10294449.30319913-.10294449.42684426 0l.73363857.66666666c.5178509.50384927 1.34292328.50384927 1.86077419 0zm5.7890753-4.92c.0989173-.08249984.2365272-.10066717.3534804-.04666667.1102946.05390759.182035.16403448.1867443.28666667v7.62666663c.0006751.125094-.0687757.2400347-.1798549.2976595-.1110793.0576247-.2450848.0482312-.347031-.0243261-1.4405993-1.04-3.4414318-2.50000003-4.7753201-3.5666667-.0764552-.06332663-.1207023-.15741545-.1207023-.25666667s.0442471-.19334003.1207023-.25666666c1.4272605-1.23333334 3.3213819-2.84 4.7619813-4.06zm-15.28268398-.08702377c.12002255-.06291246.26619815-.04696054.36981266.0403571 1.45393826 1.24666667 3.33472077 2.86 4.78865903 4.08666667.07645524.06332663.12070225.15741544.12070225.25666666s-.04424701.19334004-.12070225.25666667c-1.33388831 1.06666667-3.33472077 2.5266667-4.80866735 3.5733333-.10194619.0725574-.23595167.0819509-.34703093.0243261-.11107926-.0576247-.18052999-.1725655-.17985495-.2976594v-7.61333333c0-.13484884.05705899-.2641113.17708154-.32702377zm14.49568988-1.9596429c.4069977.00348081.790135.19251479 1.0404328.51333333.1106432.14095691.0900232.34412639-.0466861.46-2.1942462 1.86-6.04918343 5.13333334-7.18298849 6.15333334-.12591503.13248721-.30071747.20750075-.48353451.20750075s-.35761948-.07501354-.48353451-.20750075c-1.13380506-1.02-4.98874227-4.29333334-7.18298854-6.15333334-.13670928-.11587361-.15732926-.31904309-.04668609-.46.2517452-.32264807.63775893-.51188813 1.04710232-.51333333z" />
</svg>
http://lst.rs/3f3u
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body">
<div class="c-vehicle__details">
<h1 class="c-vehicle-heading | u-heading u-kilo u-mb-sm">
<span class="u-block u-mb-xs" contenteditable>Vehicle Model</span>
<span class="u-epsilon u-fw-500 u-leading-normal u-block u-mb" contenteditable>Vehicle Derivative</span>
</h1>
<div class="u-size-sm u-fw-400 u-mt-sm u-flex">
<span class="u-mb-xs">
<span class="c-cap-icon c-cap-icon--large c-cap-blue | u-mr-xs"></span>
<span contenteditable>Exterior Colour</span>
</span>
<span class="u-block u-ml">
<span class="c-cap-icon c-cap-icon--large c-cap-black | u-mr-xs"></span>
<span contenteditable>Interior Colour</span>
</span>
</div>
</div>
<div class="c-vehicle__price">
<span class="c-vehicle__rrp | u-mb-none u-tc-info">
<button class="c-link-bare | o-split | u-w-100% u-mb-sm" type="button"
x-tooltip="{ content: () => $refs.template.innerHTML,
allowHTML: true,
appendTo: $root }">
<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-xs u-fw-600 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>
<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"/>
</svg>
</div>
</button>
<span class="u-heading u-beta u-tc-info" contenteditable>£69,000</span>
</span>
</div>
<div class="c-vehicle__actions">
<div class="c-vehicle__actions-note">
<span class="u-fw-500 u-tc-info">Pre-Order for March 1<sup>st</sup></span>
</div>
<a class="c-btn c-btn--info c-btn--lg" href="#preorder">Pre-Order</a>
<div class="c-btn-group c-btn-group--segmented">
<a class="c-btn c-btn--secondary c-btn--lg" href="#enquire">Enquire</a>
<div class="c-btn-group__dropdown"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--secondary c-btn--lg | u-flex-stunted" type="button" id="more_options_btn" aria-controls="more_options_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:class="{ 'is-active': drop }"
:aria-expanded="drop"
>
<span class="u-hidden">More</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
</svg>
</button>
<div class="c-dropdown" id="more_options_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Apply for Finance</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Request a Video Presentation</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Arrange a Test Drive</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Get a Finance Quote</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#" role="option">Request More Information</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-vehicle__key-details">
<div class="o-grid">
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Located at</span>
<span class="u-fs-sm"><a href="#dealership">Listers SEAT Worcester</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Telephone</span>
<span class="u-fs-sm"><a href="tel:02476456700">02476 456 700</a></span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Registered</span>
<span class="u-fs-sm">2017 (17)</span>
</div>
<div class="o-grid__item | u-col-6 u-col-3-@bp2 u-col-6-@bp4">
<span class="u-tc-headings u-fw-500 u-block">Mileage</span>
<span class="u-fs-sm">43,526 miles</span>
</div>
</div>
</div>
</div>
</header><header class="c-vehicle-header">
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__image">
<img class="c-slider__item-img c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-1.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-1.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1.webp"
width="968" height="652"
alt
>
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
<div class="c-vehicle__tertiary | o-split | u-align-middle">
<!-- Tags -->
<div class="c-vehicle__tags | o-split__left">
<div class="u-inline">
<button class="c-badge c-badge--lg" x-data x-tooltip.content="This car is not available to buy now.">Not Available</button>
</div>
<div class="u-inline">
<button class="c-badge c-badge--lg c-badge--mono c-badge--inverted" x-data x-tooltip.content="This car has been reserved.">Reserved</button>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body">
<div class="c-vehicle__details">
<h1 class="c-vehicle-heading | u-heading u-kilo u-mb-sm">
<span class="u-block u-mb-xs" contenteditable>Vehicle Model</span>
<span class="u-epsilon u-fw-500 u-leading-normal u-block u-mb" contenteditable>Vehicle Derivative</span>
</h1>
<div class="u-size-sm u-fw-400 u-mt-sm u-flex">
<span class="u-mb-xs">
<span class="c-cap-icon c-cap-icon--large c-cap-blue | u-mr-xs"></span>
<span contenteditable>Exterior Colour</span>
</span>
<span class="u-block u-ml">
<span class="c-cap-icon c-cap-icon--large c-cap-black | u-mr-xs"></span>
<span contenteditable>Interior Colour</span>
</span>
</div>
</div>
<div class="c-vehicle__actions">
<a class="c-btn c-btn--lg" href="#search">
Search for a similar BMW 1 Series
<svg class="c-icon u-ml-sm" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="nonzero" d="M8.003 1a6.996 6.996 0 0 0-6.977 6.405A6.999 6.999 0 0 0 6.818 14.9a6.993 6.993 0 0 0 7.946-5.15h-1.819A5.244 5.244 0 0 1 2.789 7.405 5.247 5.247 0 0 1 8.003 2.75c1.39.002 2.72.563 3.691 1.558L8.881 7.125H15V1l-2.055 2.056A6.959 6.959 0 0 0 8.003 1Z"/>
</svg>
</a>
</div>
</div>
</header><header class="c-vehicle-header c-vehicle-header--sold">
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__image">
<img class="c-img c-img--normal | o-fit"
srcset="/assets/img/ds/layouts/vehicle/hero/vehicle-hero__mobile-1.webp 414w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__tablet-1.webp 768w,
/assets/img/ds/layouts/vehicle/hero/vehicle-hero__desktop-1.webp"
width="968" height="652"
alt
>
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
<div class="c-vehicle__tertiary | o-split | u-align-middle">
<!-- Tags -->
<div class="c-vehicle__tags | o-split__left">
<div class="u-inline">
<button class="c-badge c-badge--lg" x-data x-tooltip.content="This car is not available to buy now.">Not Available</button>
</div>
<div class="u-inline">
<button class="c-badge c-badge--lg c-badge--red c-badge--inverted" x-data x-tooltip.content="This car has been sold.">Sold</button>
</div>
</div>
</div>
</div>
<div class="c-vehicle-header__body">
<div class="c-vehicle__details">
<h1 class="c-vehicle-heading | u-heading u-kilo u-mb-sm">
<span class="u-block u-mb-xs" contenteditable>Vehicle Model</span>
<span class="u-epsilon u-fw-500 u-leading-normal u-block u-mb" contenteditable>Vehicle Derivative</span>
</h1>
<div class="u-size-sm u-fw-400 u-mt-sm u-flex">
<span class="u-mb-xs">
<span class="c-cap-icon c-cap-icon--large c-cap-blue | u-mr-xs"></span>
<span contenteditable>Exterior Colour</span>
</span>
<span class="u-block u-ml">
<span class="c-cap-icon c-cap-icon--large c-cap-black | u-mr-xs"></span>
<span contenteditable>Interior Colour</span>
</span>
</div>
</div>
<div class="c-vehicle__actions">
<a class="c-btn c-btn--lg" href="#restart">
Restart Search
<svg class="c-icon u-ml-sm" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="nonzero" d="M8.003 1a6.996 6.996 0 0 0-6.977 6.405A6.999 6.999 0 0 0 6.818 14.9a6.993 6.993 0 0 0 7.946-5.15h-1.819A5.244 5.244 0 0 1 2.789 7.405 5.247 5.247 0 0 1 8.003 2.75c1.39.002 2.72.563 3.691 1.558L8.881 7.125H15V1l-2.055 2.056A6.959 6.959 0 0 0 8.003 1Z"/>
</svg>
</a>
</div>
</div>
</header>Awaiting Photos
When the vehicle has no photos, change the look to allow customers to request images of the vehicle.
This vehicle is awaiting photos. Images are for illustrative purposes only. Request Images for this Vehicle 
+<header class="c-vehicle-header c-vehicle-header--no-images">
-<header class="c-vehicle-header">
<!-- Media -->
<div class="c-vehicle-header__hero">
<div class="c-vehicle-header__image" data-vehicle-media="images">
<strong class="c-content">
<span class="u-heading u-tc-primary u-fw-500 u-mb-0">This vehicle is awaiting photos.</span>
<small class="u-tc-slate-600">Images are for illustrative purposes only.</small>
</strong>
<a href="#request-images" class="c-btn c-btn--tertiary">Request Images for this Vehicle</a>
<img class="c-img" src="/assets/img/ds/layouts/vehicle/hero/mineral-grey__front-left.webp" width="968" height="652" alt />
</div>
</div>
<!-- Body -->
<div class="c-vehicle-header__body-top">
...
</div>
<div class="c-vehicle-header__body">
... Body Details ...
</div>
</header>