Dependencies
This layout uses the following components as "atoms" to create the full UI.
Extends: Layouts: Components:Standard view
The home hero is altered version of the hero component modified for the listers homepage. It container a heading, tertiary menu, and set of search tools overlaid at the bottom.
Welcome to Listers
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<header class="c-hero c-hero--overlay c-hero--home">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/home/hero/single/hero--example--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/single/hero--example--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/single/hero--example--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/single/hero--example--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/single/hero--example--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/single/hero--example--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/single/hero--example--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/single/hero--example--desktop.webp"
width="1620" height="540"
alt
>
</picture>
</div>
<div class="c-hero__body">
<div class="c-hero__body-description">
<span class="c-hero-welcome u-heading">
<span class="u-gamma">
<span class="u-fw-500">Welcome to</span>
<span class="c-font-logo">
<span class="u-hidden">Listers</span>
<i class="c-logo__swoosh" aria-hidden="true"></i>
<i class="c-logo__type" aria-hidden="true"></i>
</span>
</span>
</span>
<h1 class="c-hero-heading | u-heading u-kilo">Hero Title</h1>
<p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="c-hero__menu">
<ul class="c-hero__menu-list | o-list-stacked u-space-y-sm">
<li class="o-list__item">
<a class="c-hero-menu__link" href="#book_a_service">Book a service or MOT</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#offers">Browse offers</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#sell">Sell your car</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#careers">Find a career</a>
</li>
</ul>
</div>
</header> CMS Options:
- In page media: add your hero image.
- In page data: add a block for the single image.
- If the hero is a promotion, add "" page data.
Fader view
Rather than a static media image, rotate between a set of images for different brands.
Welcome to Listers
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<header class="c-hero c-hero--overlay c-hero--home">
<div class="c-hero__media">
<div class="c-slider c-slider--fade | is-not-interactive"
data-slider='{ "fade": true, "wrapAround": true, "cellSelector": ".c-slider__item", "prevNextButtons": false, "pageDots": false, "draggable": false, "autoPlay": 8000, "pauseAutoPlayOnHover": false, "setGallerySize": false }'
>
<div class="c-slider__wrapper">
<div class="c-slider__item" id="hero_1">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-audi-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-audi-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-audi-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-audi-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-audi-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-audi-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-audi-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-audi-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_2">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-bmw-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-bmw-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-bmw-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-bmw-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-bmw-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-bmw-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-bmw-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-bmw-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_3">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-cupra-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-cupra-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-cupra-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-cupra-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-cupra-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-cupra-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-cupra-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-cupra-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_4">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-honda-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-honda-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-honda-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-honda-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-honda-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-honda-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-honda-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-honda-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_5">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-jaguar-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_6">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-landrover-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-landrover-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-landrover-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-landrover-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-landrover-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-landrover-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-landrover-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-landrover-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_7">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-lexus-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-lexus-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-lexus-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-lexus-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-lexus-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-lexus-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-lexus-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-lexus-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_10">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-porsche-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-porsche-mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-porsche-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-porsche-tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-porsche-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-porsche-desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/fader/hero-porsche-widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/fader/hero-porsche-desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
</div>
</div>
</div>
<div class="c-hero__body">
<div class="c-hero__body-description">
<span class="c-hero-welcome u-heading">
<span class="u-gamma">
<span class="u-fw-500">Welcome to</span>
<span class="c-font-logo">
<span class="u-hidden">Listers</span>
<i class="c-logo__swoosh" aria-hidden="true"></i>
<i class="c-logo__type" aria-hidden="true"></i>
</span>
</span>
</span>
<h1 class="c-hero-heading | u-heading u-kilo">Hero Title</h1>
<p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="c-hero__menu">
<ul class="c-hero__menu-list | o-list-stacked u-space-y-sm">
<li class="o-list__item">
<a class="c-hero-menu__link" href="#book_a_service">Book a service or MOT</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#offers">Browse offers</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#sell">Sell your car</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#careers">Find a career</a>
</li>
</ul>
</div>
</header>Events view
Occasionally the homepage hero is modified to host a special event theme.
Welcome to Listers
Enjoy the Platinum Jubilee Celebrations.
Our sales departments will be open 10am to 4pm during the bank holidays.
<header class="c-hero c-hero--overlay c-hero--home">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/home/hero/event/hero--jubilee--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/event/hero--jubilee--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/event/hero--jubilee--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/event/hero--jubilee--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/event/hero--jubilee--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/event/hero--jubilee--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/event/hero--jubilee--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/event/hero--jubilee--desktop.webp"
width="1620" height="540"
alt
>
</picture>
</div>
<div class="c-hero__body c-hero__body--vertical">
<div class="c-hero__body-description">
<span class="c-hero-welcome u-heading">
<span class="u-gamma">
<span class="u-fw-500">Welcome to</span>
<span class="c-font-logo">
<span class="u-hidden">Listers</span>
<i class="c-logo__swoosh" aria-hidden="true"></i>
<i class="c-logo__type" aria-hidden="true"></i>
</span>
</span>
</span>
<h1 class="c-hero-heading | u-heading u-kilo">Enjoy the Platinum Jubilee Celebrations.</h1>
<p class="c-hero-lead | u-lead u-gamma">Our sales departments will be open 10am to 4pm during the bank holidays.</p>
</div>
<div class="c-hero__body-actions">
<a class="c-btn c-btn--lg c-btn--primary" href="#">
Contact Us
<span class="u-ml-xs" aria-hidden="true">→</span>
</a>
</div>
</div>
<div class="c-hero__menu">
<ul class="c-hero__menu-list | o-list-stacked u-space-y-sm">
<li class="o-list__item">
<a class="c-hero-menu__link" href="#book_a_service">Book a Service or MOT</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#offers">Browse Offers</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#sell">Sell Your Car</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#careers">Find a Career</a>
</li>
</ul>
</div>
</header> CMS Options:
- In page media: add your hero image.
- In page data: add a block for the event image.
Christmas Themes
During the festive period, use a Christmas theme across the website to provide some seasonal sprinkles.
<header class="c-hero c-hero--overlay c-hero--home c-snow">
<div class="c-hero__media">
<div class="c-slider c-slider--fade | is-not-interactive"
data-slider='{ "fade": true, "wrapAround": true, "cellSelector": ".c-slider__item", "prevNextButtons": false, "pageDots": false, "draggable": false, "autoPlay": 8000, "pauseAutoPlayOnHover": false, "setGallerySize": false }'
>
<div class="c-slider__wrapper">
<div class="c-slider__item" id="hero_1">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/her--audi--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--audi--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--audi--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--audi--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--audi--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--audi--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--audi--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--audi--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_2">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--bmw--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_3">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--cupra--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_4">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--honda--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero-–honda--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--honda--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--honda--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--honda--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--honda--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--honda--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--honda--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_5">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--jaguar--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_6">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--landrover--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_7">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--lexus--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
<div class="c-slider__item" id="hero_10">
<picture class="c-slider__item-img">
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--mobile-xl.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--tablet-xl.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--desktop.webp"
media="(min-width: 1265px) and (max-width: 1800px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--widescreen.webp"
media="(min-width: 1800px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/home/hero/christmas/hero--porsche--desktop.webp"
width="2000" height="900"
alt
>
</picture>
</div>
</div>
</div>
</div>
<div class="c-hero__body">
<div class="c-hero__body-description">
<img class="c-img u-w-50% u-w-40%-@bp1 u-w-auto-@bp4 u-nml-sm" src="//st.listers.co.uk/img/ui/christmas/santa-sleigh.svg" width="271" height="86" alt>
<img class="c-img u-w-80% u-w-60%-@bp2 u-w-83.33%-@bp3 u-w-auto-@bp4 u-nml-sm u-block" src="//st2.listers.co.uk/img/ui/christmas/seasons-greetings.svg" width="472" height="124" alt>
<img class="c-img u-w-50% u-w-30%-@bp1 u-w-20%-@bp2 u-w-auto-@bp3 u-ml u-nmt-@bp3" src="//st1.listers.co.uk/img/ui/christmas/from-listers.svg" width="204" height="82" alt>
</div>
</div>
<div class="c-hero__menu">
<ul class="c-hero__menu-list | o-list-stacked u-space-y-sm">
<li class="o-list__item">
<a class="c-hero-menu__link" href="#book_a_service">Book a service or MOT</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#offers">Browse offers</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#sell">Sell your car</a>
</li>
<li class="o-list__item">
<a class="c-hero-menu__link" href="#careers">Find a career</a>
</li>
</ul>
</div>
</header> CMS Options:
- Add Christmas/Winter themed images for all represented brands in the image uploader.
- Give each image uploaded a consistent prefix label (such as "Winter" or "Xmas"). i.e "WinterAudi".
- Set page data: CoverReferencesStartWith with the same label i.e "Winter" or "Xmas".
- Schedule or publish the page with new images on the 1st of December.
- The UI will automatically change theme on the 1st of December to a specified ending.
- The specified ending can be changed by using the page data JanDayThatEndsXmas which is normally set "2", i.e. 2nd January.