Dependencies
Needs the following to work.
Uses: Components: Objects: JS:Default Example
The site footer sits globally at the bottom of all pages on site-server. A last ditch navigation area for users to find their way around.
<footer class="c-site-footer" role="contentinfo">
<div class="o-wrapper">
<div class="o-grid | u-gap-0">
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-9-@bp4 u-order-1 u-order-reset-@bp3">
<div class="o-grid | u-gap-x-lg">
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-5-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Brands
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare o-columns-2 | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#audi">Audi</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#bmw">BMW</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#cupra">CUPRA</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#honda">Honda</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#jaguar">Jaguar</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#landrover">Landrover</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#lexus">Lexus</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#mercedes">Mercedes-Benz</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#mini">MINI</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#porsche">Porsche</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#seat">SEAT</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#skoda">Škoda</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#smart">smart</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#toyota">Toyota</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volkswagen">Volkswagen</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volkswagen_commercial">Volkswagen Commercials</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volvo">Volvo</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#listers_u">Listers U</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-4-@bp3 u-col-3-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Cars and Vans
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#used">Browse Used</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#new">Browse New</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#electric">Electric and Hybrid</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#motability">Motability</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#finance">Finance</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#leasing">Leasing</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#fleet">Business Users</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-3-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Services
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#book">Book a Service or MOT</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#servicing">Servicing</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#parts">Genuine Parts</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#safeguard">Safeguard your Vehicle</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#bodyshop">Paint and Body Repair</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#accident">Accident Management</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-12-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Other
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare o-list-inline-@bp4 | u-gap u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#careers">Careers</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#about">About Us</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#car_reviews">Car Reviews</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#sitemap">Sitemap</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#support">Support</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-4-@bp3 u-col-3-@bp4 u-center u-right-@bp3 u-order-3 u-order-reset-@bp3 u-mb">
<ul class="o-list-inline | u-gap-sm u-mb u-justify-center u-justify-end-@bp3">
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://twitter.com/ListersGroup" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on X (formerly Twitter).">
<span class="u-hidden">Visit X (formerly Twitter)</span>
<svg class="c-icon | u-tc-x" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M12.026 2h2.147l-4.69 5.36L15 14.655h-4.32L7.296 10.23l-3.871 4.424H1.276L6.293 8.92 1 2h4.43l3.058 4.044L12.026 2Zm-.754 11.37h1.19L4.783 3.217H3.507l7.765 10.153Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://en-gb.facebook.com/ListersGroup/" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on Facebook.">
<span class="u-hidden">Visit Facebook</span>
<svg class="c-icon | u-tc-facebook" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M11 5.375H8.375V4.237c0-.545.605-.612.88-.612H11V1H8.9C6.335 1 5.75 2.788 5.75 3.935v1.44H4V8h1.75v7h2.625V8h2.1L11 5.375Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://www.youtube.com/channel/UCK30dRLpeeNzqjn1_aekvXw" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on YouTube">
<span class="u-hidden">Visit YouTube</span>
<svg class="c-icon | u-tc-youtube" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="nonzero" d="M8.01 13.2h-.016c-.05 0-5.008-.01-6.259-.349a1.998 1.998 0 0 1-1.41-1.41 21.178 21.178 0 0 1-.324-3.846 21.24 21.24 0 0 1 .333-3.85A2.05 2.05 0 0 1 1.745 2.32C2.962 2 7.784 2 7.988 2h.017c.05 0 5.022.01 6.26.35a2.002 2.002 0 0 1 1.408 1.409A20.17 20.17 0 0 1 16 7.62a21.237 21.237 0 0 1-.335 3.846 2.006 2.006 0 0 1-1.412 1.409c-1.215.322-6.037.325-6.242.325Zm-1.6-7.999-.004 4.796L10.573 7.6 6.411 5.201Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://www.instagram.com/listersgroup/" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on Instagram">
<span class="u-hidden">Visit Instagram</span>
<svg class="c-icon | u-tc-instagram" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M6.827 0h2.347l1.02.009c.419.007.695.019 1.106.038.852.038 1.434.174 1.943.372.526.204.972.478 1.417.923a3.9 3.9 0 0 1 .923 1.417c.176.452.302.962.355 1.668l.045.962c.009.286.014.598.017 1.086l-.002 3.31c-.006.678-.019.985-.043 1.515-.039.852-.174 1.434-.372 1.943a3.922 3.922 0 0 1-.923 1.417 3.921 3.921 0 0 1-1.417.923c-.453.176-.963.302-1.669.355l-.962.045A42 42 0 0 1 9.527 16l-3.31-.002a34.326 34.326 0 0 1-1.516-.043c-.851-.039-1.433-.174-1.942-.372a3.922 3.922 0 0 1-1.417-.923 3.922 3.922 0 0 1-.923-1.417c-.176-.453-.303-.963-.356-1.669L.047 11.3A39.53 39.53 0 0 1 0 9.174l.002-2.82C.008 5.576.021 5.266.047 4.7c.039-.85.173-1.432.372-1.94.204-.526.478-.973.923-1.417A3.923 3.923 0 0 1 2.759.419c.452-.176.962-.303 1.668-.356l.274-.016A40.1 40.1 0 0 1 6.827 0Zm-.283 1.443c-.88.005-1.18.017-1.777.044-.78.036-1.204.166-1.486.276a2.48 2.48 0 0 0-.92.598 2.48 2.48 0 0 0-.598.92l-.068.188c-.08.243-.157.577-.195 1.075l-.038.83c-.014.422-.02.873-.021 1.881l.002 2.203c.005.879.017 1.18.044 1.776.036.78.166 1.204.276 1.486.145.374.318.64.598.92.28.28.547.454.92.6l.188.066c.243.08.577.158 1.075.195l.83.039c.422.014.872.02 1.881.02l2.203-.001a35.73 35.73 0 0 0 1.776-.044c.78-.036 1.204-.166 1.486-.276a2.48 2.48 0 0 0 .92-.599c.28-.28.454-.546.6-.92l.066-.188c.08-.243.158-.576.195-1.074l.039-.83c.014-.422.02-.873.02-1.882l-.003-2.395a33.67 33.67 0 0 0-.042-1.584c-.036-.78-.166-1.204-.276-1.486a2.48 2.48 0 0 0-.599-.92 2.479 2.479 0 0 0-.92-.598l-.188-.068a4.474 4.474 0 0 0-1.074-.195l-.83-.038a41.39 41.39 0 0 0-1.17-.019H6.544ZM8 3.892a4.11 4.11 0 1 1 0 8.218 4.11 4.11 0 0 1 0-8.218Zm0 1.441a2.667 2.667 0 1 0 0 5.335 2.667 2.667 0 0 0 0-5.335Zm4.272-2.564a.96.96 0 1 1 0 1.92.96.96 0 0 1 0-1.92Z" clip-rule="evenodd"/>
</svg>
</a>
</li>
</ul>
<a class="c-link-bare | u-w-12 u-inline-block u-mb" href="https://www.justgiving.com/campaign/listersgroup" target="_blank" rel="noopener noreferrer">
<img class="c-img" src="/assets/img/ui/footer/macmillan.png" width="227" height="97" alt="Listers is proud to be in partnership with Macmillan Cancer Support"/>
</a>
<ul class="o-list-stacked | u-gap-sm u-justify-center u-justify-end-@bp3">
<li class="o-list__item">
<a class="c-site-footer__link c-site-footer__link--alt" href="#contact">Contact Us</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link c-site-footer__link--alt" href="#dealerships">Dealership Locator</a>
</li>
</ul>
</div>
<div class="o-grid__item | u-col-12 u-order-4 u-order-reset-@bp3 u-mb">
<div class="c-legalese">
<p class="o-focus o-focus--lg | u-fs-sm u-center u-left-@bp3 u-mx-auto-<bp3">
Copyright © 2004-2024 Listers Group Limited. All rights reserved. <a href="#company">Full Company Details</a>.<br>
Listers.co.uk uses cookies. For more information, visit our <a href="#cookies">What are cookies?</a> page.<br>
Listers Group is directly authorised and regulated by the FCA for the purposes of insurance mediation and consumer credit activities under FRN 311543. <a href="#fca">Full details</a>.
</p>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-10-@bp4 u-order-2 u-order-reset-@bp3 u-mb" x-data="{ open: false }">
<button class="c-site-footer__section-link | u-removed-@bp3" type="button" @click="open = ! open" :aria-expanded="open">
Legal Links
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-flex-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-inline o-list-stacked-<bp3 | u-gap-x-sm u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#terms">Terms and Conditions</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#privacy">Privacy Policy</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#complaints-procedure">Complaints Procedure</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#update-your-records">Update Your Records</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#other">Other Legal and Statutory Notices</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>Event Footer
During a specific event (i.e. the Platinum Jubilee), we may want to place a theme on the site footer.
<footer class="c-site-footer" role="contentinfo">
<div class="o-wrapper">
<div class="o-grid | u-gap-0">
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-9-@bp4 u-order-1 u-order-reset-@bp3">
<div class="o-grid | u-gap-x-lg">
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-5-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Brands
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare o-columns-2 | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#audi">Audi</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#bmw">BMW</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#cupra">CUPRA</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#honda">Honda</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#jaguar">Jaguar</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#landrover">Landrover</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#lexus">Lexus</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#mercedes">Mercedes-Benz</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#mini">MINI</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#porsche">Porsche</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#seat">SEAT</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#skoda">Škoda</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#smart">smart</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#toyota">Toyota</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volkswagen">Volkswagen</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volkswagen_commercial">Volkswagen Commercials</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volvo">Volvo</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#listers_u">Listers U</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-4-@bp3 u-col-3-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Cars and Vans
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#used">Browse Used</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#new">Browse New</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#electric">Electric and Hybrid</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#motability">Motability</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#finance">Finance</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#leasing">Leasing</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#fleet">Business Users</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-3-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Services
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#book">Book a Service or MOT</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#servicing">Servicing</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#parts">Genuine Parts</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#safeguard">Safeguard your Vehicle</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#bodyshop">Paint and Body Repair</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#accident">Accident Management</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-12-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Other
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare o-list-inline-@bp4 | u-gap u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#careers">Careers</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#about">About Us</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#car_reviews">Car Reviews</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#sitemap">Sitemap</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#support">Support</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-4-@bp3 u-col-3-@bp4 u-center u-right-@bp3 u-order-3 u-order-reset-@bp3 u-mb">
<ul class="o-list-inline | u-gap-sm u-mb u-justify-center u-justify-end-@bp3">
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://twitter.com/ListersGroup" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on X (formerly Twitter).">
<span class="u-hidden">Visit X (formerly Twitter)</span>
<svg class="c-icon | u-tc-x" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M12.026 2h2.147l-4.69 5.36L15 14.655h-4.32L7.296 10.23l-3.871 4.424H1.276L6.293 8.92 1 2h4.43l3.058 4.044L12.026 2Zm-.754 11.37h1.19L4.783 3.217H3.507l7.765 10.153Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://en-gb.facebook.com/ListersGroup/" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on Facebook.">
<span class="u-hidden">Visit Facebook</span>
<svg class="c-icon | u-tc-facebook" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M11 5.375H8.375V4.237c0-.545.605-.612.88-.612H11V1H8.9C6.335 1 5.75 2.788 5.75 3.935v1.44H4V8h1.75v7h2.625V8h2.1L11 5.375Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://www.youtube.com/channel/UCK30dRLpeeNzqjn1_aekvXw" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on YouTube">
<span class="u-hidden">Visit YouTube</span>
<svg class="c-icon | u-tc-youtube" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="nonzero" d="M8.01 13.2h-.016c-.05 0-5.008-.01-6.259-.349a1.998 1.998 0 0 1-1.41-1.41 21.178 21.178 0 0 1-.324-3.846 21.24 21.24 0 0 1 .333-3.85A2.05 2.05 0 0 1 1.745 2.32C2.962 2 7.784 2 7.988 2h.017c.05 0 5.022.01 6.26.35a2.002 2.002 0 0 1 1.408 1.409A20.17 20.17 0 0 1 16 7.62a21.237 21.237 0 0 1-.335 3.846 2.006 2.006 0 0 1-1.412 1.409c-1.215.322-6.037.325-6.242.325Zm-1.6-7.999-.004 4.796L10.573 7.6 6.411 5.201Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://www.instagram.com/listersgroup/" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on Instagram">
<span class="u-hidden">Visit Instagram</span>
<svg class="c-icon | u-tc-instagram" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M6.827 0h2.347l1.02.009c.419.007.695.019 1.106.038.852.038 1.434.174 1.943.372.526.204.972.478 1.417.923a3.9 3.9 0 0 1 .923 1.417c.176.452.302.962.355 1.668l.045.962c.009.286.014.598.017 1.086l-.002 3.31c-.006.678-.019.985-.043 1.515-.039.852-.174 1.434-.372 1.943a3.922 3.922 0 0 1-.923 1.417 3.921 3.921 0 0 1-1.417.923c-.453.176-.963.302-1.669.355l-.962.045A42 42 0 0 1 9.527 16l-3.31-.002a34.326 34.326 0 0 1-1.516-.043c-.851-.039-1.433-.174-1.942-.372a3.922 3.922 0 0 1-1.417-.923 3.922 3.922 0 0 1-.923-1.417c-.176-.453-.303-.963-.356-1.669L.047 11.3A39.53 39.53 0 0 1 0 9.174l.002-2.82C.008 5.576.021 5.266.047 4.7c.039-.85.173-1.432.372-1.94.204-.526.478-.973.923-1.417A3.923 3.923 0 0 1 2.759.419c.452-.176.962-.303 1.668-.356l.274-.016A40.1 40.1 0 0 1 6.827 0Zm-.283 1.443c-.88.005-1.18.017-1.777.044-.78.036-1.204.166-1.486.276a2.48 2.48 0 0 0-.92.598 2.48 2.48 0 0 0-.598.92l-.068.188c-.08.243-.157.577-.195 1.075l-.038.83c-.014.422-.02.873-.021 1.881l.002 2.203c.005.879.017 1.18.044 1.776.036.78.166 1.204.276 1.486.145.374.318.64.598.92.28.28.547.454.92.6l.188.066c.243.08.577.158 1.075.195l.83.039c.422.014.872.02 1.881.02l2.203-.001a35.73 35.73 0 0 0 1.776-.044c.78-.036 1.204-.166 1.486-.276a2.48 2.48 0 0 0 .92-.599c.28-.28.454-.546.6-.92l.066-.188c.08-.243.158-.576.195-1.074l.039-.83c.014-.422.02-.873.02-1.882l-.003-2.395a33.67 33.67 0 0 0-.042-1.584c-.036-.78-.166-1.204-.276-1.486a2.48 2.48 0 0 0-.599-.92 2.479 2.479 0 0 0-.92-.598l-.188-.068a4.474 4.474 0 0 0-1.074-.195l-.83-.038a41.39 41.39 0 0 0-1.17-.019H6.544ZM8 3.892a4.11 4.11 0 1 1 0 8.218 4.11 4.11 0 0 1 0-8.218Zm0 1.441a2.667 2.667 0 1 0 0 5.335 2.667 2.667 0 0 0 0-5.335Zm4.272-2.564a.96.96 0 1 1 0 1.92.96.96 0 0 1 0-1.92Z" clip-rule="evenodd"/>
</svg>
</a>
</li>
</ul>
<a class="c-link-bare | u-w-12 u-inline-block u-mb" href="https://www.justgiving.com/campaign/listersgroup" target="_blank" rel="noopener noreferrer">
<img class="c-img" src="/assets/img/ui/footer/macmillan.png" width="227" height="97" alt="Listers is proud to be in partnership with Macmillan Cancer Support"/>
</a>
<ul class="o-list-stacked | u-gap-sm u-justify-center u-justify-end-@bp3">
<li class="o-list__item">
<a class="c-site-footer__link c-site-footer__link--alt" href="#contact">Contact Us</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link c-site-footer__link--alt" href="#dealerships">Dealership Locator</a>
</li>
</ul>
</div>
<div class="o-grid__item | u-col-12 u-order-4 u-order-reset-@bp3 u-mb">
<div class="c-legalese">
<p class="o-focus o-focus--lg | u-fs-sm u-center u-left-@bp3 u-mx-auto-<bp3">
Copyright © 2004-2024 Listers Group Limited. All rights reserved. <a href="#company">Full Company Details</a>.<br>
Listers.co.uk uses cookies. For more information, visit our <a href="#cookies">What are cookies?</a> page.<br>
Listers Group is directly authorised and regulated by the FCA for the purposes of insurance mediation and consumer credit activities under FRN 311543. <a href="#fca">Full details</a>.
</p>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-10-@bp4 u-order-2 u-order-reset-@bp3 u-mb" x-data="{ open: false }">
<button class="c-site-footer__section-link | u-removed-@bp3" type="button" @click="open = ! open" :aria-expanded="open">
Legal Links
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-flex-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-inline o-list-stacked-<bp3 | u-gap-x-sm u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#terms">Terms and Conditions</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#privacy">Privacy Policy</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#complaints-procedure">Complaints Procedure</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#update-your-records">Update Your Records</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#other">Other Legal and Statutory Notices</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>Christmas Footer
During the festive period, use a Christmas theme across the website to provide some seasonal sprinkles.
<footer class="c-site-footer" role="contentinfo">
<div class="o-wrapper">
<div class="o-grid | u-gap-0">
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-9-@bp4 u-order-1 u-order-reset-@bp3">
<div class="o-grid | u-gap-x-lg">
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-5-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Brands
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare o-columns-2 | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#audi">Audi</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#bmw">BMW</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#cupra">CUPRA</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#honda">Honda</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#jaguar">Jaguar</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#landrover">Landrover</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#lexus">Lexus</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#mercedes">Mercedes-Benz</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#mini">MINI</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#porsche">Porsche</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#seat">SEAT</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#skoda">Škoda</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#smart">smart</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#toyota">Toyota</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volkswagen">Volkswagen</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volkswagen_commercial">Volkswagen Commercials</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#volvo">Volvo</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#listers_u">Listers U</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-4-@bp3 u-col-3-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Cars and Vans
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#used">Browse Used</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#new">Browse New</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#electric">Electric and Hybrid</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#motability">Motability</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#finance">Finance</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#leasing">Leasing</a>
</li>
<li class="o-list-bare">
<a class="c-site-footer__link" href="#fleet">Business Users</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-3-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Services
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare | u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#book">Book a Service or MOT</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#servicing">Servicing</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#parts">Genuine Parts</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#safeguard">Safeguard your Vehicle</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#bodyshop">Paint and Body Repair</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#accident">Accident Management</a>
</li>
</ul>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-12-@bp4" x-data="{ open: false }">
<button class="c-site-footer__section-link" type="button" @click="open = ! open" :aria-expanded="open">
Other
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-block-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-bare o-list-inline-@bp4 | u-gap u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#careers">Careers</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#about">About Us</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#car_reviews">Car Reviews</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#sitemap">Sitemap</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#support">Support</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-4-@bp3 u-col-3-@bp4 u-center u-right-@bp3 u-order-3 u-order-reset-@bp3 u-mb">
<ul class="o-list-inline | u-gap-sm u-mb u-justify-center u-justify-end-@bp3">
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://twitter.com/ListersGroup" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on X (formerly Twitter).">
<span class="u-hidden">Visit X (formerly Twitter)</span>
<svg class="c-icon | u-tc-x" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M12.026 2h2.147l-4.69 5.36L15 14.655h-4.32L7.296 10.23l-3.871 4.424H1.276L6.293 8.92 1 2h4.43l3.058 4.044L12.026 2Zm-.754 11.37h1.19L4.783 3.217H3.507l7.765 10.153Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://en-gb.facebook.com/ListersGroup/" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on Facebook.">
<span class="u-hidden">Visit Facebook</span>
<svg class="c-icon | u-tc-facebook" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M11 5.375H8.375V4.237c0-.545.605-.612.88-.612H11V1H8.9C6.335 1 5.75 2.788 5.75 3.935v1.44H4V8h1.75v7h2.625V8h2.1L11 5.375Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://www.youtube.com/channel/UCK30dRLpeeNzqjn1_aekvXw" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on YouTube">
<span class="u-hidden">Visit YouTube</span>
<svg class="c-icon | u-tc-youtube" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="nonzero" d="M8.01 13.2h-.016c-.05 0-5.008-.01-6.259-.349a1.998 1.998 0 0 1-1.41-1.41 21.178 21.178 0 0 1-.324-3.846 21.24 21.24 0 0 1 .333-3.85A2.05 2.05 0 0 1 1.745 2.32C2.962 2 7.784 2 7.988 2h.017c.05 0 5.022.01 6.26.35a2.002 2.002 0 0 1 1.408 1.409A20.17 20.17 0 0 1 16 7.62a21.237 21.237 0 0 1-.335 3.846 2.006 2.006 0 0 1-1.412 1.409c-1.215.322-6.037.325-6.242.325Zm-1.6-7.999-.004 4.796L10.573 7.6 6.411 5.201Z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-card c-site-footer__social | u-aspect u-round u-flex u-justify-center u-align-middle" href="https://www.instagram.com/listersgroup/" target="_blank" rel="noopener noreferrer" x-data x-tooltip.content="Visit Listers on Instagram">
<span class="u-hidden">Visit Instagram</span>
<svg class="c-icon | u-tc-instagram" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M6.827 0h2.347l1.02.009c.419.007.695.019 1.106.038.852.038 1.434.174 1.943.372.526.204.972.478 1.417.923a3.9 3.9 0 0 1 .923 1.417c.176.452.302.962.355 1.668l.045.962c.009.286.014.598.017 1.086l-.002 3.31c-.006.678-.019.985-.043 1.515-.039.852-.174 1.434-.372 1.943a3.922 3.922 0 0 1-.923 1.417 3.921 3.921 0 0 1-1.417.923c-.453.176-.963.302-1.669.355l-.962.045A42 42 0 0 1 9.527 16l-3.31-.002a34.326 34.326 0 0 1-1.516-.043c-.851-.039-1.433-.174-1.942-.372a3.922 3.922 0 0 1-1.417-.923 3.922 3.922 0 0 1-.923-1.417c-.176-.453-.303-.963-.356-1.669L.047 11.3A39.53 39.53 0 0 1 0 9.174l.002-2.82C.008 5.576.021 5.266.047 4.7c.039-.85.173-1.432.372-1.94.204-.526.478-.973.923-1.417A3.923 3.923 0 0 1 2.759.419c.452-.176.962-.303 1.668-.356l.274-.016A40.1 40.1 0 0 1 6.827 0Zm-.283 1.443c-.88.005-1.18.017-1.777.044-.78.036-1.204.166-1.486.276a2.48 2.48 0 0 0-.92.598 2.48 2.48 0 0 0-.598.92l-.068.188c-.08.243-.157.577-.195 1.075l-.038.83c-.014.422-.02.873-.021 1.881l.002 2.203c.005.879.017 1.18.044 1.776.036.78.166 1.204.276 1.486.145.374.318.64.598.92.28.28.547.454.92.6l.188.066c.243.08.577.158 1.075.195l.83.039c.422.014.872.02 1.881.02l2.203-.001a35.73 35.73 0 0 0 1.776-.044c.78-.036 1.204-.166 1.486-.276a2.48 2.48 0 0 0 .92-.599c.28-.28.454-.546.6-.92l.066-.188c.08-.243.158-.576.195-1.074l.039-.83c.014-.422.02-.873.02-1.882l-.003-2.395a33.67 33.67 0 0 0-.042-1.584c-.036-.78-.166-1.204-.276-1.486a2.48 2.48 0 0 0-.599-.92 2.479 2.479 0 0 0-.92-.598l-.188-.068a4.474 4.474 0 0 0-1.074-.195l-.83-.038a41.39 41.39 0 0 0-1.17-.019H6.544ZM8 3.892a4.11 4.11 0 1 1 0 8.218 4.11 4.11 0 0 1 0-8.218Zm0 1.441a2.667 2.667 0 1 0 0 5.335 2.667 2.667 0 0 0 0-5.335Zm4.272-2.564a.96.96 0 1 1 0 1.92.96.96 0 0 1 0-1.92Z" clip-rule="evenodd"/>
</svg>
</a>
</li>
</ul>
<a class="c-link-bare | u-w-12 u-inline-block u-mb" href="https://www.justgiving.com/campaign/listersgroup" target="_blank" rel="noopener noreferrer">
<img class="c-img" src="/assets/img/ui/footer/macmillan.png" width="227" height="97" alt="Listers is proud to be in partnership with Macmillan Cancer Support"/>
</a>
<ul class="o-list-stacked | u-gap-sm u-justify-center u-justify-end-@bp3">
<li class="o-list__item">
<a class="c-site-footer__link c-site-footer__link--alt" href="#contact">Contact Us</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link c-site-footer__link--alt" href="#dealerships">Dealership Locator</a>
</li>
</ul>
</div>
<div class="o-grid__item | u-col-12 u-order-4 u-order-reset-@bp3 u-mb">
<div class="c-legalese">
<p class="o-focus o-focus--lg | u-fs-sm u-center u-left-@bp3 u-mx-auto-<bp3">
Copyright © 2004-2024 Listers Group Limited. All rights reserved. <a href="#company">Full Company Details</a>.<br>
Listers.co.uk uses cookies. For more information, visit our <a href="#cookies">What are cookies?</a> page.<br>
Listers Group is directly authorised and regulated by the FCA for the purposes of insurance mediation and consumer credit activities under FRN 311543. <a href="#fca">Full details</a>.
</p>
</div>
</div>
<div class="o-grid__item | u-col-12 u-col-8-@bp3 u-col-10-@bp4 u-order-2 u-order-reset-@bp3 u-mb" x-data="{ open: false }">
<button class="c-site-footer__section-link | u-removed-@bp3" type="button" @click="open = ! open" :aria-expanded="open">
Legal Links
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<div class="u-flex-@bp3 u-h-auto-@bp3" x-show="open" x-collapse>
<ul class="o-list-inline o-list-stacked-<bp3 | u-gap-x-sm u-pb">
<li class="o-list__item">
<a class="c-site-footer__link" href="#terms">Terms and Conditions</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#privacy">Privacy Policy</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#complaints-procedure">Complaints Procedure</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#update-your-records">Update Your Records</a>
</li>
<li class="o-list__item">
<a class="c-site-footer__link" href="#other">Other Legal and Statutory Notices</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>