Dependencies
Uses: Objects: Utilities: Extends: Components:Vehicle Card
Extending the base card component, the vehicle card is specific component for showing glancing vehicle information in a search result grid. It contains user centric content to help users make informed decisions when click through to a vehicle.
<a class="c-card c-card--vehicle | u-max-20" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<strong class="c-card__banner c-card__banner--coming-soon">
<span class="u-hidden">Coming Soon</span>
</strong>
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a>Vehicle Card Banners
Apply a vehicle banner for some specific vehicle scenarios.
<a class="c-card c-card--vehicle | u-max-20" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<strong class="c-card__banner c-card__banner--coming-soon">
<span class="u-hidden">Coming Soon</span>
</strong>
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a><a class="c-card c-card--vehicle | u-max-20" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<strong class="c-card__banner c-card__banner--just-in">
<span class="u-hidden">Just Arrived</span>
</strong>
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a><a class="c-card c-card--vehicle | u-max-20" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<strong class="c-card__banner c-card__banner--sold">
<span class="u-hidden">Sold</span>
</strong>
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a>Vehicle Card Tags
Apply a vehicle tag for certain vehicle scenarios.
<a class="c-card c-card--vehicle | u-max-20" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<div class="c-card__thumb-item c-card__thumb-item--top-right | c-badge c-badge--mono">
Offers Available
</div>
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a><a class="c-card c-card--vehicle | u-max-20" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<div class="c-card__thumb-item c-card__thumb-item--top-right | c-badge c-badge--purple c-badge--inverted">
0% Finance
</div>
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a><a class="c-card c-card--vehicle | u-max-20" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<div class="c-card__thumb-item c-card__thumb-item--top-right | c-badge c-badge--negative c-badge--inverted">
Stock Clearance
</div>
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a>Favourite State
Vehicles Cards can be added to favourites from the search, and a favourite button to the top right of the card to facilitate that. Click to show the interaction.
<a class="c-card c-card--vehicle | u-max-20" href="#1" :class="fav == true ? 'is-saved' : ''">
<object class="c-card__fav">
<button class="c-card__fav-btn" @click="fav = ! fav">
<div x-show="fav != true">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<path class="path-1" 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 class="path-2" stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
<span class="u-hidden">Save to your Favourites</span>
</div>
<div x-show="fav == true" style="display: none;">
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="false">
<path class="path-1" stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path class="path-2" 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>
<span class="u-hidden">Saved in Favourites</span>
</div>
</button>
</object>
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a>Horizontal Alignment.
Change the main axis of the card content, to flow horizontally. Used for mobile search pages mostly.
<a class="c-card c-card--vehicle c-card--vehicle-horizontal | u-max-30" href="#">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price-was">
<span class="c-price-was__value">£14,000</span>
</span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
<div class="c-price-save | o-split">
<span class="o-split__title">Save:</span>
<span>£112</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://via.placeholder.com/346x220/F5F5F5?text=+" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer | u-bg-ui-200 u-tc-purple-900">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</a>