Dependencies
This layout uses the following components as "atoms" to create the full UI.
Extends: Layouts: Uses: Components: JS:Hero Slider
A hero slider for housing multiple containers of information in a swipe-able, flick-able touch enabled component.
Offers The A8 Sportback. Style. Agility. Intelligence.
Luxurious by design. £7000 deposit contribution and 4.9% APR representative.
Listers Group is authorised and regulated by the Financial Conduct Authority.
Offers Audi Q2 Sport Offers
Affordable monthly payments - 6.8% APR representative. Test drive today.
Offers The all new Audi e-tron GT.
£1,900 contribution, 6.7% APR representative.
<div class="c-hero c-hero--slider" data-hero-slider>
<div class="c-hero__slider c-slider">
<div class="c-slider__wrapper">
<div class="c-hero__slide c-slider__item c-hero--overlay">
<picture class="c-hero__picture c-hero__slide-img">
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-1-hero-mobile.webp"
media="(max-width: 414px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-1-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-1-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-1-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-1-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-1-hero-desktop.webp"
media="(min-width: 1265px)"
type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/site/hero/slider/1-1-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
<div class="c-hero__body c-hero__body--vertical">
<div class="c-hero__body-description">
<span class="c-badge c-badge--md c-badge--negative c-badge--inverted">Offers</span>
<span class="c-hero-heading u-heading u-alpha">The A8 Sportback. Style. Agility. Intelligence.</span>
<p class="c-hero-lead u-lead u-epsilon">Luxurious by design. £7000 deposit contribution and 4.9% APR representative.</p>
</div>
<div class="c-hero__body-actions">
<a class="c-btn c-btn--primary c-btn--lg" href="#">Find Out More</a>
</div>
</div>
<div class="c-hero__body c-hero__body-print">
<small>Listers Group is authorised and regulated by the Financial Conduct Authority.</small>
</div>
</div>
<div class="c-hero__slide c-slider__item c-hero--overlay">
<picture class="c-hero__picture c-hero__slide-img">
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-2-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-2-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-2-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-2-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-2-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-2-hero-desktop.webp"
media="(min-width: 1265px)"
type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/site/hero/slider/1-2-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
<div class="c-hero__body c-hero__body--vertical">
<div class="c-hero__body-description">
<span class="c-badge c-badge--md c-badge--negative c-badge--inverted">Offers</span>
<span class="c-hero-heading u-heading u-alpha">Audi Q2 Sport Offers</span>
<p class="c-hero-lead u-lead">Affordable monthly payments - 6.8% APR representative. Test drive today.</p>
</div>
<div class="c-hero__body-actions">
<a class="c-btn c-btn--primary c-btn--lg" href="#">Book a Test Drive</a>
</div>
</div>
</div>
<div class="c-hero__slide c-slider__item c-hero--overlay">
<picture class="c-hero__picture c-hero__slide-img">
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)"
type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/slider/1-3-hero-desktop.webp"
media="(min-width: 1265px)"
type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/site/hero/slider/1-3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
<div class="c-hero__body c-hero__body--vertical">
<div class="c-hero__body-description">
<span class="c-badge c-badge--md c-badge--negative c-badge--inverted">Offers</span>
<span class="c-hero-heading u-heading u-alpha">The all new Audi e-tron GT.</span>
<p class="c-hero-lead u-lead">£1,900 contribution, 6.7% APR representative.</p>
</div>
<div class="c-hero__body-actions">
<a class="c-btn c-btn--primary c-btn--lg" href="#">Book a Test Drive</a>
</div>
</div>
</div>
</div>
</div>
</div>