Dependencies
This layout uses the following framework items as "atoms" to create the full UI.
Uses: Components: Layouts:Scroller
Scroller with typically sized `News` cards.
- NewsAudi e-tron GT wins at the 2022 World Car Awards The e-tron GT quattro has won the title of World Performance Car at the 2022 World Car Awards - a ceremony which is dubbed the 'Oscars of the automotive world'.
- NewsThe all-new BMW iX3 revealed The all-new BMW iX3 has been revealed, with a refreshed exterior design and more striking appearance.
- NewsCUPRA to Launch new electric SUVs in 2024 CURPA are set to grow its electric vehicle line up, with a brand-new compact SUV.
- NewsHonda Civic Type R The all-new Honda Civic Type R has been named 'Car of the Year 2022' as wel as 'Hot Hatch of the Year' at the legendary annial TopGear.com awards.
- NewsThe Jaguar F-Type is bowing out. To celebrate the final Model Year of the F-Type and 75 years of Jaguar sports cars in 2023, customers can choose the new F-Type 75 or F-Type R 75 special editions.
- NewsThe Defender Collection • Capable by Nature. Meet the Defender Collection: greatness comes in all shapes, sizes and body designs.
- NewsLexus add more accolades to its collection. Lexus had been awarded the most reliable brand by Auto Trader and What Car?
- NewsHow to set up a Mercedes me account A Mercedes me account is required to purchase a new Mercedes-Benz and also provides additional functionality during ownership.
- NewsPorsche pledges to further reduce their CO2 emissions Porsche is calling for its suppliers, roughly 1,300, to reduce their emissions by using exclusively renewable energy in the manufacture of Porsche components.
- NewsSEAT Leon keeps the What Car? Award in the family The SEAT Leon has retained the ‘Best Family Car of the Year’ accolade at the What Car? Car of the Year Awards 2022.
<div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_1">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--audi_gt_etron.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--audi_gt_etron-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Audi e-tron GT wins at the 2022 World Car Awards</span>
</span>
<span class="u-lead u-trunc u-trunc-2">The e-tron GT quattro has won the title of World Performance Car at the 2022 World Car Awards - a ceremony which is dubbed the 'Oscars of the automotive world'.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_2">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--bmw_ix3_reveal.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--bmw_ix3_reveal-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">The all-new BMW iX3 revealed</span>
</span>
<span class="u-lead u-trunc u-trunc-2">The all-new BMW iX3 has been revealed, with a refreshed exterior design and more striking appearance.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_3">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--cupra_suv.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--cupra_suv-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">CUPRA to Launch new electric SUVs in 2024</span>
</span>
<span class="u-lead u-trunc u-trunc-2">CURPA are set to grow its electric vehicle line up, with a brand-new compact SUV.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_4">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--honda_civic_typer.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--honda_civic_typer-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Honda Civic Type R</span>
</span>
<span class="u-lead u-trunc u-trunc-2">The all-new Honda Civic Type R has been named 'Car of the Year 2022' as wel as 'Hot Hatch of the Year' at the legendary annial TopGear.com awards.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_5">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--jaguar_f_type.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--jaguar_f_type-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">The Jaguar F-Type is bowing out.</span>
</span>
<span class="u-lead u-trunc u-trunc-2">To celebrate the final Model Year of the F-Type and 75 years of Jaguar sports cars in 2023, customers can choose the new F-Type 75 or F-Type R 75 special editions.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_6">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--lr_defender_collection.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--lr_defender_collection-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">The Defender Collection • Capable by Nature.</span>
</span>
<span class="u-lead u-trunc u-trunc-2">Meet the Defender Collection: greatness comes in all shapes, sizes and body designs.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_7">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--lexus_accolades.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--lexus_accolades-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Lexus add more accolades to its collection.</span>
</span>
<span class="u-lead u-trunc u-trunc-2">Lexus had been awarded the most reliable brand by Auto Trader and What Car?</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_8">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--mercedes_me_account.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--mercedes_me_account-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">How to set up a Mercedes me account</span>
</span>
<span class="u-lead u-trunc u-trunc-2">A Mercedes me account is required to purchase a new Mercedes-Benz and also provides additional functionality during ownership.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_9">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--porsche_co2_emissions.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--porsche_co2_emissions-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Porsche pledges to further reduce their CO<sup>2</sup> emissions</span>
</span>
<span class="u-lead u-trunc u-trunc-2">Porsche is calling for its suppliers, roughly 1,300, to reduce their emissions by using exclusively renewable energy in the manufacture of Porsche components.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--xl" href="#lg_hero_9">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" srcset="/assets/img/ds/layouts/articles/scroller/card_xs--3x2--seat_leon_whatcar.webp, /assets/img/ds/layouts/articles/scroller/card_xl--3x2--seat_leon_whatcar-@x2.webp 2x" width="480" height="320" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--blue c-badge--lg c-badge--inverted">News</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">SEAT Leon keeps the What Car? Award in the family</span>
</span>
<span class="u-lead u-trunc u-trunc-2">The SEAT Leon has retained the ‘Best Family Car of the Year’ accolade at the What Car? Car of the Year Awards 2022.</span>
</div>
</a>
</li>
</ul>
</div>
</div>Featured Scroller
A scroller with featured card along with a 2 row layout with typically sized `offer` cards.
-
OffersUp to 2 years of benefits with an approved used Electric Audi Browse our latest selection of approved used e-tron range vehicles in stock, ready for immediate delivery. -
OffersExperience the power of electric with the BMW iX1
OffersCUPRA is ready for your business -
OffersUnmissable savings on genuine Honda accessory packs
OfferApproved Used I-Pace with a huge contribution to your deposit -
OffersLand Rover Discovery Sport • Available as plug-in hybrid
RedDiscover new horizons with the Lexus UX -
FinanceSave £2,500 on selected new Mercedes-Benz A Class models
OffersOne years free car insurance with new MINI models
<div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--feature" href="#lg_featured_1">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_featured--1x1--audi_approved_used.webp, /assets/img/ds/layouts/articles/scroller/card_featured--1x1--audi_approved_used-@x2.webp 2x" width="450" height="450" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/audi@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta u-gamma-@bp2">
<span class="u-trunc u-trunc-2">Up to 2 years of benefits with an approved used Electric Audi</span>
</span>
<span class="u-lead u-trunc u-trunc-2">Browse our latest selection of approved used e-tron range vehicles in stock, ready for immediate delivery.</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_1">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--bmw_ix1_finance.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--bmw_ix1_finance-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/bmw@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Experience the power of electric with the BMW iX1</span>
</span>
</div>
</a>
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_2">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--cupra_business.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--cupra_business-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/cupra@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">CUPRA is ready for your business</span>
</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_3">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--honda_accessories.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--honda_accessories-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/honda@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Unmissable savings on genuine Honda accessory packs</span>
</span>
</div>
</a>
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_4">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--jaguar_ipace.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--jaguar_ipace-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/jaguar@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Offer</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Approved Used I-Pace with a huge contribution to your deposit</span>
</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_5">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--lr_discovery_finance.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--lr_discovery_finance-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/landrover@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Land Rover Discovery Sport • Available as plug-in hybrid</span>
</span>
</div>
</a>
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_6">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--lexus_ux_finance.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--lexus_ux_finance-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/lexus@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Red</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Discover new horizons with the Lexus UX</span>
</span>
</div>
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_7">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--merc_a_class.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--merc_a_class-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/mercedes-benz@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Finance</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">Save £2,500 on selected new Mercedes-Benz A Class models</span>
</span>
</div>
</a>
<a class="c-card c-card--hero c-card--lg" href="#lg_featured_8">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/articles/scroller/card_lg--3x2--mini_insurance.webp, /assets/img/ds/layouts/articles/scroller/card_lg--3x2--mini_insurance-@x2.webp 2x" width="380" height="252" alt>
</div>
<div class="c-card__logo">
<img class="c-img | o-fit" src="/assets/img/brands/mini@100.webp" loading="lazy" width="32" height="32" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--lg c-badge--inverted c-badge--red">Offers</span>
</div>
<div class="c-card__footer">
<span class="u-heading u-delta">
<span class="u-trunc u-trunc-2">One years free car insurance with new MINI models</span>
</span>
</div>
</a>
</li>
</ul>
</div>
</div>