Drive Way Card
Vehicles stored in the driveway are housed within `cards` components.
- Vehicle Services
- Book a service
- Book a bodywork repair
- Sell this car
Aston Martin DB11
- Mileage: 24,000 miles
- Registration: TX21 NFS
- Tax Due Date:24/08/24
- MOT Due Date:12/04/24
<div class="c-card c-card--vehicle | u-w-50%-@bp2">
<div class="c-card__thumb | u-aspect u-aspect--3x2">
<div class="c-card__thumb-item c-card__thumb-item--top-right"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-btn c-btn--tertiary | u-font-body u-fs-xs" type="button"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
<span class="u-hidden">Menu</span>
<svg class="c-icon" viewBox="0 0 16 16">
<path fill-rule="nonzero" d="M14 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/>
</svg>
</button>
<!-- Dropdown -->
<div class="c-dropdown" id="dropdown_1_1" 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 | u-py-xs">
<span class="c-dropdown__heading | u-fs-sm u-ml-sm">Vehicle Services</span>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#book">Book a service</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#book">Book a bodywork repair</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#sell">Sell this car</a>
</li>
</ul>
</div>
</div>
<img class="c-img c-card__thumb-img o-contain" src="/assets/img/content/new/aston-martin/db11/silver--front-left.webp" loading="lazy" alt>
</div>
<div class="c-card__body | o-flow u-flex u-flex-column u-px-sm">
<div class="c-card__body-head">
<div class="o-split | u-align-start">
<div class="o-split__title">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xxs">Aston Martin</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">DB11</span>
</span>
</div>
</div>
</div>
<ul class="o-grid | u-gap-y-xs u-justify-start u-fs-sm">
<li class="o-grid__item | u-col-12">
<div class="o-split">
<span class="o-split__left">
<svg class="c-icon | u-tc-primary u-mr-xs" width="16" height="16" viewBox="0 0 16 16">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 13.5 8 11l2 2.5"/>
<path fill="none" stroke-linecap="round" stroke-width="1.5" d="M8 7v1.5m0-6V4M1 14 5 1m6 0 4 13"/>
</svg>
Mileage:
</span>
<strong class="u-sub-heading">24,000 miles</strong>
</div>
</li>
<li class="o-grid__item | u-col-12">
<div class="o-split">
<span class="o-split__left">
<svg class="c-icon | u-tc-primary u-mr-xs" width="16" height="16" viewBox="0 0 16 16">
<path d="M6.5 2.75a.75.75 0 1 0 0-1.5v1.5ZM2.296 5.767l.73.175-.73-.175Zm.61-2.54-.73-.175.73.175Zm.363 3.023a.25.25 0 0 1-.25-.25h-1.5c0 .966.783 1.75 1.75 1.75v-1.5ZM3.019 6c0-.02.002-.04.006-.058l-1.458-.35A1.75 1.75 0 0 0 1.519 6h1.5Zm.006-.058.61-2.54-1.459-.35-.61 2.54 1.46.35Zm.61-2.54a.85.85 0 0 1 .827-.652v-1.5a2.35 2.35 0 0 0-2.286 1.802l1.46.35Zm.827-.652H5.5v-1.5H4.462v1.5Zm1.038 0h1v-1.5h-1v1.5Z"/>
<g fill="none">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 7H3.632a2 2 0 0 0-1.715.971L1 9.5V12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1"/>
<path stroke-linecap="round" stroke-width="1.5" d="M4 11h1M1 6h1m1 9h1m8 0h1m-2-4h1"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m8.667 4.877 2.014 2.014L14.997 2"/>
</g>
</svg>
Registration:
</span>
<strong class="u-sub-heading">TX21 NFS</strong>
</div>
</li>
<li class="o-grid__item | u-col-12">
<div class="o-split">
<div class="o-split__left">
<svg class="c-icon | u-tc-primary u-mr-xs" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<path d="M2 2h8a2 2 0 0 1 2 2v2H0V4a2 2 0 0 1 2-2Z" transform="translate(2 1)"/>
<path stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v6.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 11.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
<path stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
<path stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
</g>
</svg>
Tax Due Date:
</div>
<strong class="u-sub-heading">24/08/24</strong>
</div>
</li>
<li class="o-grid__item | u-col-12">
<div class="o-split">
<div class="o-split__left">
<svg class="c-icon | u-tc-primary u-mr-xs" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<path d="M2 2h8a2 2 0 0 1 2 2v2H0V4a2 2 0 0 1 2-2Z" transform="translate(2 1)"/>
<path stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v6.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 11.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
<path stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
<path stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
</g>
</svg>
MOT Due Date:
</div>
<strong class="u-sub-heading">12/04/24</strong>
</div>
</li>
</ul>
<div class="c-card__body-footer u-flex u-justify-end u-space-x-sm u-pt u-mt-auto">
<button class="c-btn c-btn--tertiary | u-font-body u-fs-xs u-w-4" type="button">
<span>Verify</span>
</button>
<button class="c-btn c-btn--tertiary" type="button">
<svg class="c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.345 2h-4.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14h8.69c.914 0 1.655-.741 1.655-1.655V10"/>
<path fill-rule="evenodd" d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 9l1 .984L9.5 7.5l2.665 3.256A.8.8 0 0 1 11.5 12Z" clip-rule="evenodd"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12.5 1.25v5.5M9.75 4l5.5.002"/>
<path fill-rule="evenodd" d="M4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" clip-rule="evenodd"/>
</svg>
<span class="u-hidden">Add images</span>
</button>
<button class="c-btn c-btn--tertiary" type="button">
<svg class="c-icon | u-tc-negative" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9.993 5.91-.252 6.545m-3.482 0-.252-6.546m7.25-2.334c.248.038.496.078.743.12m-.743-.12-.777 10.097a1.636 1.636 0 0 1-1.632 1.51H5.152a1.636 1.636 0 0 1-1.632-1.51L2.743 3.575m10.514 0a34.988 34.988 0 0 0-2.53-.289m-7.984.289a31.72 31.72 0 0 0-.743.12m.743-.12c.84-.127 1.683-.223 2.53-.289m5.454 0V2.62c0-.858-.662-1.574-1.52-1.6a37.79 37.79 0 0 0-2.414 0c-.858.026-1.52.743-1.52 1.6v.666m5.454 0a35.465 35.465 0 0 0-5.454 0"></path>
</svg>
<span class="u-hidden"></span>
</button>
</div>
</div>
</div>Add Vehicle
Add a vehicle to the driveway, using a quick modal form.
Add a vehicle to your driveway
FX23 YTC
Toyota C-HR Icon HEV CVT
- 2023
- 12,000 miles
- Quartz Grey
- Automatic
- Hybrid
Describe your vehicle below ...
Your Vehicle:
<button class="c-btn c-btn--empty t-btn-empty--light | o-flow-sm | u-h-10 u-aspect--3x1 u-w-100%" type="button"
@click="addVehicle = true"
>
<svg class="c-icon c-icon--md" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M6.5 2.75a.75.75 0 1 0 0-1.5v1.5ZM2.296 5.767l.73.175-.73-.175Zm.61-2.54-.73-.175.73.175Zm.363 3.023a.25.25 0 0 1-.25-.25h-1.5c0 .966.783 1.75 1.75 1.75v-1.5ZM3.019 6c0-.02.002-.04.006-.058l-1.458-.35A1.75 1.75 0 0 0 1.519 6h1.5Zm.006-.058.61-2.54-1.459-.35-.61 2.54 1.46.35Zm.61-2.54a.85.85 0 0 1 .827-.652v-1.5a2.35 2.35 0 0 0-2.286 1.802l1.46.35Zm.827-.652H5.5v-1.5H4.462v1.5Zm1.038 0h1v-1.5h-1v1.5Z"/>
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7H3.632a2 2 0 0 0-1.715.971L1 9.5V12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1"/>
<path fill="none" stroke-linecap="round" stroke-width="1.5" d="M4 11h1M1 6h1m1 9h1m8 0h1m-2-4h1m.75-9.75v5.5M10 4l5.5.002"/>
</svg>
<span class="u-body-type u-fw-500 u-mt-xs">Add a new vehicle</span>
</button>
<!-- Modal -->
<div class="c-modal c-modal--box c-modal--box-md" role="dialog" aria-modal="true" style="display: none"
x-show="addVehicle"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="addVehicle = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="addVehicle"
x-transition.opacity
@click="addVehicle = false"
>
</div>
<div class="c-modal__close">
<button class="c-btn c-btn--clear" type="button"
@click="addVehicle = false"
>
<span class="u-hidden">Close Dialog</span>
<svg class="c-icon c-icon--lg" viewbox="0 0 24 24" width="16" height="16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-width="2" d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="c-modal__body"
x-show="addVehicle"
x-transition.duration.300
x-trap.noautofocus.noscroll="addVehicle"
>
<div class="c-modal__body-header">
<h2 class="u-heading u-delta u-fw-500" :id="$id('modal-title')">Add a vehicle to your driveway</h2>
</div>
<div class="c-modal__body-content" x-data="{ new_reg: '', stage: 1 }">
<!-- Step 1 -->
<div class="is-step-1"
x-show="stage === 1"
x-collapse
>
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="usr_reg">
<span class="o-split">
<span class="c-label__text | o-split__left">Your Registration</span>
<span></span>
</span>
</label>
</div>
<div class="o-grid__item">
<span class="c-label | u-w-100%">
<span class="c-label__input">
<input class="c-input c-input--text | t-input-reg" id="usr_reg" type="text" value="FX23YTC" x-modal="new_reg" autocomplete="off" maxlength="10" pattern="(?<Current>^[A-Z]{2}[0-9]{2}[A-Z]{3}$)|(?<Prefix>^[A-Z][0-9]{1,3}[A-Z]{3}$)|(?<Suffix>^[A-Z]{3}[0-9]{1,3}[A-Z]$)|(?<DatelessLongNumberPrefix>^[0-9]{1,4}[A-Z]{1,2}$)|(?<DatelessShortNumberPrefix>^[0-9]{1,3}[A-Z]{1,3}$)|(?<DatelessLongNumberSuffix>^[A-Z]{1,2}[0-9]{1,4}$)|(?<DatelessShortNumberSufix>^[A-Z]{1,3}[0-9]{1,3}$)|(?<DatelessNorthernIreland>^[A-Z]{1,3}[0-9]{1,4}$)|(?<DiplomaticPlate>^[0-9]{3}[DX]{1}[0-9]{3}$)" required>
</span>
</span>
</div>
<div class="o-grid__item | u-col-12 u-col-content-@bp2">
<button class="c-btn c-btn--primary" type="button" @click="stage = 2">
Search Vehicle
<span class="u-font-body | u-ml-xs" aria-hidden="true">-></span>
</button>
</div>
</div>
</div>
<!-- Step 2 FX23YTC -->
<div class="is-step-2" style="display: none;"
x-show="stage === 2 || new_reg === 'FX23YTC'"
x-collapse
>
<button class="c-link-bare | u-mb" @click="stage = 1">
<span class="u-font-body u-mr-xs" aria-hidden="true">‹</span>
Back
</button>
<div>
<span class="c-reg c-plate | u-alpha">FX23 YTC</span>
</div>
<div class="o-media | u-flex">
<div class="o-media__thumb | u-w-12 u-nml-md">
<img class="c-img | u-aspect--3x2" src="/assets/img/content/new/toyota/c-hr/2023/quartz-grey--front-left.webp" width="192" height="128" alt>
</div>
<div class="o-media__body | o-flow-sm | u-mt">
<span class="u-heading u-epsilon u-mt">Toyota C-HR Icon HEV CVT</span>
<ul class="o-list-inline | u-size-sm u-fw-500 u-mb-xs">
<li class="o-list__item o-delimit-item" data-delimit="•">2023</li>
<li class="o-list__item o-delimit-item" data-delimit="•">12,000 miles</li>
<li class="o-list__item o-delimit-item" data-delimit="•">Quartz Grey</li>
<li class="o-list__item o-delimit-item" data-delimit="•">Automatic</li>
<li class="o-list__item o-delimit-item" data-delimit="•">Hybrid</li>
</ul>
</div>
</div>
<div class="u-mt u-flex u-justify-end u-space-x-sm">
<button class="c-btn c-btn--tertiary" type="button" @click="addVehicle = false">
<svg class="c-icon | u-tc-positive u-mr-xs" width="16" height="16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
This is my vehicle
</button>
<button class="c-btn c-btn--tertiary" type="button" @click="stage = 'nan'">
<svg class="c-icon | u-tc-negative u-mr-xs">
<path fill="none" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
This isn't my vehicle
</button>
</div>
</div>
<!-- Step 3 Not my Car -->
<div class="is-step-3" style="display: none;"
x-show="stage === 'nan' || new_reg === 'not-found'"
x-collapse
>
<button class="c-link-bare | u-mb" @click="stage = 2">
<span class="u-font-body u-mr-xs" aria-hidden="true">‹</span>
Back
</button>
<div class="o-grid"
x-data="{ manufacturer: '', range: '', model: '', derivative: '' }"
>
<div class="o-grid__item | u-col-12">
<strong class="u-sub-heading">Describe your vehicle below ...</strong>
</div>
<fieldset class="o-grid__item | u-col-6" id="choice_manufacturer">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100% u-mb-xxs" for="manufacturer">
<span class="c-label__text">Manufacturer</span>
</label>
<div class="o-grid | u-gap-x-sm u-flex-nowrap">
<div class="o-grid__item | u-col-auto">
<select class="c-input c-input--select | u-w-100%" id="manufacturer" x-model="manufacturer">
<option value="" disabled>Select a manufacturer</option>
<option>Audi</option>
<option>BMW</option>
<option>CUPRA</option>
<option>Honda</option>
<option>Jaguar</option>
<option>Land Rover</option>
<option>Lexus</option>
<option>Mercedes Benz</option>
<option>MINI</option>
<option>SEAT</option>
<option>Škoda</option>
<option>Smart</option>
<option>Toyota</option>
<option>Volkswagen</option>
<option>Volvo</option>
</select>
</div>
<div class="o-grid__item | u-w-1 u-flex u-place-center">
<svg class="c-icon | u-tc-positive" width="16" height="16" viewBox="0 0 16 16" x-show.important="manufacturer != false">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</g>
</svg>
<span class="u-hidden" x-show.important="manufacturer != false">Manufacturer entered</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="o-grid__item | u-col-6" id="choice_range" x-show="manufacturer.length > 0" x-collapse>
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100% u-mb-xxs" for="range">
<span class="c-label__text">Range</span>
</label>
<div class="o-grid | u-gap-x-sm u-flex-nowrap">
<div class="o-grid__item | u-col-auto">
<select class="c-input c-input--select | u-w-100%" id="range" x-model="range">
<option value="" disabled>Select a range</option>
<option>A1</option>
<option>A3</option>
<option>A5</option>
<option>A6</option>
<option>A7</option>
<option>A8</option>
<option>Etron GT</option>
</select>
</div>
<div class="o-grid__item | u-w-1 u-flex u-place-center">
<svg class="c-icon | u-tc-positive" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" x-show.important="range != false">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</g>
</svg>
<span class="u-hidden" x-show.important="range != false">Range entered</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="o-grid__item | u-col-6" id="choice_model" x-show="range.length > 0" x-collapse>
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100% u-mb-xxs" for="range">
<span class="c-label__text">Model</span>
</label>
<div class="o-grid | u-gap-x-sm u-flex-nowrap">
<div class="o-grid__item | u-col-auto">
<select class="c-input c-input--select | u-w-100%" id="model" x-model="model">
<option value="" disabled>Select a range</option>
<option value="Avant (2019 - )">Avant (2019 - )</option>
<option value="Diesel Avant (2019 - )">Diesel Avant (2019 - )</option>
<option value="Diesel Saloon (2019 - )">Diesel Saloon (2019 - )</option>
<option value="Saloon (2019 - )">Saloon (2019 - )</option>
<option value="Avant (2008 - 2011)">Avant (2008 - 2011)</option>
<option value="Avant (2012 - 2015)">Avant (2012 - 2015)</option>
<option value="Avant (2015 - 2018)">Avant (2015 - 2018)</option>
<option value="Avant (2018 - 2019)">Avant (2018 - 2019)</option>
<option value="Avant Special Editions (2010 - 2012)">Avant Special Editions (2010 - 2012)</option>
</select>
</div>
<div class="o-grid__item | u-w-1 u-flex u-place-center">
<svg class="c-icon | u-tc-positive" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" x-show="model != false">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</g>
</svg>
<span class="u-hidden" x-show="model != false">Model entered</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="o-grid__item | u-col-6" id="choice_derivative" x-show="model.length > 0" x-collapse>
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100% u-mb-xxs" for="range">
<span class="c-label__text">Derivative</span>
</label>
<div class="o-grid | u-gap-x-sm u-flex-nowrap">
<div class="o-grid__item | u-col-auto">
<select class="c-input c-input--select | u-w-100%" id="derivative" x-model="derivative">
<option value="" disabled>Select a derivative</option>
<option value="35 TFSI Black Edition 5dr S Tronic">35 TFSI Black Edition 5dr S Tronic</option>
<option value="35 TFSI Black Edition 5dr S Tronic [Tech Pack]">35 TFSI Black Edition 5dr S Tronic [Tech Pack]</option>
<option value="35 TFSI Black Edition 5dr S Tronic [Tech Pro]">35 TFSI Black Edition 5dr S Tronic [Tech Pro]</option>
<option value="35 TFSI S Line 5dr S Tronic">35 TFSI S Line 5dr S Tronic</option>
<option value="35 TFSI S Line 5dr S Tronic [Tech Pack]">35 TFSI S Line 5dr S Tronic [Tech Pack]</option>
<option value="35 TFSI S Line 5dr S Tronic [Tech Pro]">35 TFSI S Line 5dr S Tronic [Tech Pro]</option>
<option value="35 TFSI Sport 5dr S Tronic [17“ Alloy]">35 TFSI Sport 5dr S Tronic [17" Alloy]</option>
<option value="35 TFSI Sport 5dr S Tronic [Tech Pack]">35 TFSI Sport 5dr S Tronic [Tech Pack]</option>
<option value="35 TFSI Sport 5dr S Tronic [Tech Pro]">35 TFSI Sport 5dr S Tronic [Tech Pro]</option>
</select>
</div>
<div class="o-grid__item | u-w-1 u-flex u-place-center">
<svg class="c-icon | u-tc-positive" width="16" height="16" viewBox="0 0 16 16" x-show="derivative.length > 0">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</g>
</svg>
<span class="u-hidden" x-show="derivative != false">Derivative entered</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="o-grid__item | u-col-12" id="choice_colour" x-show="derivative.length > 0" x-collapse>
<span class="c-label c-label__text">
What is the colour of your car?
</span>
<ul class="o-list-inline | u-space-x-sm">
<li>
<label class="c-label c-label--radio | u-m-0">
<input class="c-input c-input--radio | c-cap-black" type="radio" id="black" name="vehicle_color">
</label>
</li>
<li>
<label class="c-label c-label--radio | u-m-0">
<input class="c-input c-input--radio | c-cap-grey" type="radio" id="grey" name="vehicle_color">
</label>
</li>
<li>
<label class="c-label c-label--radio | u-m-0">
<input class="c-input c-input--radio | c-cap-slate" type="radio" id="slate" name="vehicle_color">
</label>
</li>
</ul>
</fieldset>
<div class="o-grid__item | u-col-12 u-bg-ui-100 u-radius-lg u-p-sm" x-show="manufacturer != false" x-collapse>
<span class="c-label__text">Your Vehicle:</span>
<span class="u-fs-sm" x-text="manufacturer + ' ' + range + ' ' + model + ' ' + derivative"></span>
</div>
</div>
<div class="u-mt u-flex u-justify-end u-space-x-sm">
<button class="c-btn c-btn--tertiary" type="button" @click="stage = 2">
<svg class="c-icon | u-tc-positive u-mr-xs" width="16" height="16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.5 8.5 6 12l7.5-8.5"/>
</svg>
This is my vehicle
</button>
</div>
</div>
</div>
</div>
</div>