Dependencies
This layout uses the following components as "atoms" to create the full UI.
Uses: Layouts: Components: Utilities:Vehicle Reviews
A hero card with block quote snippet from a independent vehicle review.
Added: 21st April 2020 Read MoreThe SEAT Leon has long been a smart, under-rated pick for family hatchback buyers and was a particularly strong offering in the third generation 'Type 5F'-series design originally launched in 2012. In seeking one of these MK3 models out on the used market, you'd ideally want to stretch to one of the substantially revised versions of this design, which means going for a car produced after the 2017 facelift.
It's these later MK3 Leons that we're checking out here. In this form, the car remained good looking and sporty to drive, but it also got extra media and safety tech, an impressive extra three cylinder petrol option and a potent 'Cupra 300' performance flagship.
<section class="c-vehicle-panels | o-section o-collapse">
<div class="o-wrapper">
<div class="c-vehicle__panel | o-collapse__section" id="vehicle_reviews" x-data="{open: false}">
<button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_reviews_btn" type="button" aria-controls="vehicle_reviews_panel"
@click="open = ! open"
:aria-expanded="open"
:class="open ? 'is-active' : 'is-inactive'"
>
<span class="c-sub-header__heading | u-mr-auto">
<h2 class="u-heading u-delta">Independent Reviews</h2>
</span>
<span class="c-sub-header__right | u-ml-sm">
<svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
<path d="M2 2l12 12"></path>
<path d="M14 2L2 14"></path>
</g>
</svg>
</span>
</button>
<section class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_reviews_panel" role="region" aria-labelledby="vehicle_reviews_btn" style="display: none;"
x-show="open" x-collapse
>
<div class="o-collapse__content" :class="open ? 'is-active' : 'is-inactive'">
<!-- Content -->
<div class="o-grid | u-gap-lg u-align-middle u-py">
<div class="o-grid__item | u-col-12 u-col-6-@bp3 u-col-5-@bp4 u-self-start">
<a class="c-card c-card--lg c-card--hero" href="#">
<div class="c-card__header">
<div class="c-ratings | u-tc-white" aria-label="7.5 out of 5 Stars" width="16" height="16">
<svg class="c-icon t-icon--star" viewBox="0 0 16 16" aria-hidden="true">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon t-icon--star" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon t-icon--star" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon t-icon--star" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon t-icon--star" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon t-icon--star" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon t-icon--star" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0Z"></path>
</svg>
<svg class="c-icon t-icon--half-star" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill-rule="nonzero" d="M7.31 1.103 5.492 5.324l-4.895.338a.75.75 0 0 0-.327 1.31L3.81 9.93l-.922 4.649a.75.75 0 0 0 1.143.685L8 12.81l4.088 2.505a.75.75 0 0 0 1.037-.838l-.941-4.543L15.806 6.9a.75.75 0 0 0-.505-1.252l-4.793-.324-1.82-4.221a.75.75 0 0 0-1.377 0ZM8 3.295l1.36 3.136a.75.75 0 0 0 .59.359l3.386.228-2.531 2.125a.75.75 0 0 0-.18.657l.68 3.282c-1.96-1.212-2.967-1.827-3.02-1.845a.75.75 0 0 0-.282-.056c-.001 0-.003-2.629-.004-7.886Z"></path>
</svg>
<svg class="c-icon t-icon--hollow" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"></path>
</svg>
<svg class="c-icon t-icon--hollow" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"></path>
</svg>
</div>
</div>
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit" srcset="/assets/img/ds/layouts/vehicle/reviews/card-3x2__index.jpg 1x, /assets/img/ds/layouts/vehicle/reviews/card-3x2__index-@x2.jpg 2x" loading="lazy" width="380" height="428" alt>
</div>
<div class="c-card__footer">
<span class="u-heading u-epsilon">
<span class="u-trunc u-trunc-2">A Leon Life</span>
</span>
<span class="u-lead u-trunc u-trunc-2">Car and Driving’s Independent Used Review of the SEAT Leon (2017 - 2020)</span>
</div>
</a>
</div>
<div class="o-grid__item | u-col-12 u-col-7-@bp3">
<div class="o-focus o-focus--lg">
<blockquote class="c-quote | o-flow | u-mb-sm">
<p>The SEAT Leon has long been a smart, under-rated pick for family hatchback buyers and was a particularly strong offering in the third generation 'Type 5F'-series design originally launched in 2012. In seeking one of these MK3 models out on the used market, you'd ideally want to stretch to one of the substantially revised versions of this design, which means going for a car produced after the 2017 facelift.</p>
<p>It's these later MK3 Leons that we're checking out here. In this form, the car remained good looking and sporty to drive, but it also got extra media and safety tech, an impressive extra three cylinder petrol option and a potent 'Cupra 300' performance flagship.</p>
</blockquote>
<span class="u-fs-sm u-block u-mb">
<svg class="c-icon | u-mr-xs" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<defs>
<linearGradient id="a" x1="0%" x2="98.387%" y1="44.444%" y2="55.376%">
<stop offset="0%" stop-color="#FFF" stop-opacity="0"></stop>
<stop offset="100%" stop-color="#3A82ED"></stop>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="url(#a)" d="M2 2h8a2 2 0 0 1 2 2v2H0V4a2 2 0 0 1 2-2Z" transform="translate(2 1)"></path>
<path stroke="#00377C" stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v6.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 11.7V5.3A2.3 2.3 0 0 1 4.3 3Z"></path>
<path stroke="#00377C" stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"></path>
<path stroke="#00377C" stroke-linecap="square" stroke-width="1.5" d="M2 7h12"></path>
</g>
</svg>
<span>Added: 21st April 2020</span>
</span>
<a class="c-link-bare" href="/web/seat/reviews/2020-4-21/a-leon-life/">
Read More
<svg class="c-icon | u-ml-xs" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="M1.5 8H14M9 3l5 5-5 5"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>