Dependencies
Uses: Components: Layouts: Extends:Offers Scroller
Offer cards within a horizontally scrollable component.
- ServicingListers Extended Warranty
Avoid any unexpected future motoring costs.
- OffersThe i4, BMW's first ever fully electric Gran Coupé
The incredible new i4, BMW's first-ever fully-electric Gran Coupé, is now available for £899 per month and 11.1% APR Representative.
- OffersBMW Advanced Car Eye 3.0 from £295
The new BMW Advanced Car Eye 3.0 is here. The high-resolution QHD camera monitors your BMW whilst parked and on the road.
- OffersBook your BMW Winter Health Check
Ensure your BMW is in perfect condition for the winter months with a health check, available for just £39.99.
<section class="c-vehicle-panels | o-section o-collapse">
<div class="o-wrapper">
<section class="c-vehicle__panel | o-collapse__section" id="vehicle_offers" x-data="{open: false}">
<button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_offers_btn" type="button" aria-controls="vehicle_offers_panel"
@click="open = ! open"
:aria-expanded="open"
:class="open ? 'is-active' : 'is-inactive'"
>
<span class="c-sub-header__heading | u-mr-auto">
<h2 class="u-heading u-beta">Related Offers</h2>
</span>
<span class="c-sub-header__right | u-ml-sm">
<svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
<g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
<path d="M2 2l12 12"></path>
<path d="M14 2L2 14"></path>
</g>
</svg>
</span>
</button>
<div class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_offers_panel" role="region" aria-labelledby="vehicle_offers_btn" style="display: none;"
x-show="open" x-collapse
:class="open ? 'u-overflow-visible' : ''"
>
<div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
<div class="c-scroller | u-mb-md">
<div class="c-scroller__scroll">
<ul class="c-scroller__list | u-pb-sm">
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
srcset="/assets/img/ds/layouts/vehicle/offers/card-3x2__warranty.webp 1x,
/assets/img/ds/layouts/vehicle/offers/card-3x2__warranty-@x2.webp 2x"
loading="lazy"
width="412" height="275"
alt
/>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--orange c-badge--inverted | u-fs-xs">Servicing</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">Listers Extended Warranty</span>
<p class="u-lead u-trunc u-trunc-2">Avoid any unexpected future motoring costs.</p>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
srcset="/assets/img/ds/layouts/vehicle/offers/card-3x2__i4.webp 1x,
/assets/img/ds/layouts/vehicle/offers/card-3x2__i4-@x2.webp 2x"
loading="lazy"
width="412" height="275"
alt
>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--red c-badge--inverted | u-fs-xs">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">The i4, BMW's first ever fully electric Gran Coupé</span>
<p class="u-lead u-trunc u-trunc-2">The incredible new i4, BMW's first-ever fully-electric Gran Coupé, is now available for £899 per month and 11.1% APR Representative.</p>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
srcset="/assets/img/ds/layouts/vehicle/offers/card-3x2__bmw-car-eye.webp 1x,
/assets/img/ds/layouts/vehicle/offers/card-3x2__bmw-car-eye-@x2.webp 2x"
loading="lazy"
width="412" height="275"
alt
>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--red c-badge--inverted | u-fs-xs">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">BMW Advanced Car Eye 3.0 from £295</span>
<p class="u-lead u-trunc u-trunc-2">The new BMW Advanced Car Eye 3.0 is here. The high-resolution QHD camera monitors your BMW whilst parked and on the road.</p>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl c-card--hero" href="#">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
srcset="/assets/img/ds/layouts/vehicle/offers/card-3x2__winter-health-check.webp 1x,
/assets/img/ds/layouts/vehicle/offers/card-3x2__winter-health-check-@x2.webp 2x"
loading="lazy"
width="412" height="275"
alt
>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--red c-badge--inverted | u-fs-xs">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">Book your BMW Winter Health Check</span>
<p class="u-lead u-trunc u-trunc-2">Ensure your BMW is in perfect condition for the winter months with a health check, available for just £39.99.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<p>
<a class="c-link-bare" href="#">
View all BMW Offers
<span aria-hidden="true">→</span>
</a>
</p>
</div>
</div>
</section>
<!-- Other Sections ... -->
</div>
</section>