<article class="Case-study-listing grid grid--of-two">
<figure class="Case-study-listing__figure">
<a href="#" title="Redesigning UCL’s prospectus and application process">
<img src="https://via.placeholder.com/600" alt="alt" />
</a>
</figure>
<div class="Case-study-listing__content flow--m">
<h3 class="text-red small">
Client name
</h3>
<img class="Case-study-listing__logo" src="https://via.placeholder.com/50" alt="alt" loading="lazy" />
<div class="flow--2xs">
<h2 class="h h-4">
Redesigning UCL’s prospectus and application process
</h2>
<p class="body text-grey">
How do you help people to make life-changing decisions with confidence?
</p>
</div>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Read the case study</span></a>
</div>
</article>
<article class="Case-study-listing grid grid--of-two">
<figure class="Case-study-listing__figure">
<a href="{{ url }}" title="{{ title }}">
{% if thumbnail is defined and thumbnail.src is defined %}
<img src="{{ thumbnail.src }}" alt="{{ thumbnail.alt }}" />
{% endif %}
</a>
</figure>
<div class="Case-study-listing__content flow--m">
<h3 class="text-red small">
{{ tag }}
</h3>
{% if logo is defined and logo.src is defined %}
<img class="Case-study-listing__logo"
src="{{ logo.src }}"
alt="{{ logo.alt }}"
loading="lazy" />
{% endif %}
<div class="flow--2xs">
<h2 class="h h-4">
{{ title }}
</h2>
<p class="body text-grey">
{{ description }}
</p>
</div>
{% include '@twi' with {
text: 'Read the case study',
link: url,
icon: 'arrow-right'
} %}
</div>
</article>
{
"tag": "Client name",
"logo": {
"src": "https://via.placeholder.com/50",
"alt": "alt"
},
"thumbnail": {
"src": "https://via.placeholder.com/600",
"alt": "alt"
},
"url": "#",
"title": "Redesigning UCL’s prospectus and application process",
"description": "How do you help people to make life-changing decisions with confidence?"
}
.Case-study-listing {
&__figure {
aspect-ratio: 16 / 9;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__content {
border-bottom: 1px solid var(--light-grey-step--1);
padding-bottom: var(--gutter);
}
&__logo {
max-height: 80px;
max-width: 200px;
}
}
@media screen and (min-width: 50rem) {
.Case-study-listing {
&__content {
border-top: 1px solid var(--light-grey-step--1);
border-bottom: 0;
padding: var(--gutter) 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
&__figure {
aspect-ratio: 1/1;
}
}
}
No notes defined.