<div class="Case-study-promo">
<div class="flow">
<h2 class="Case-study-promo__eyebrow eyebrow">
case studies
</h2>
<h3 class="h h-4">
We’ve recently helped
</h3>
</div>
<div class="Case-study-promo__list grid grid--7/5" role="list">
<article class="Case-study-promo__featured flow--m theme--dark">
<img class="Case-study-promo__logo" src="https://via.placeholder.com/150" alt="3m" />
<p class="h h-4">
Build the culture and the capabilities for design to flourish
</p>
<a class="combo-button focus combo-button--green" href="#">
<span class="">Read this client story</span>
<div>
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Icon--s">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
</div>
</a>
</article>
<ul class="Case-study-promo__collection" role="list">
<li class="Case-study-promo__item">
<article class="Article-signpost">
<div class="Article-signpost__wrapper focus">
<div class="flow--3xs">
<p class="eyebrow">client</p>
<p class="h h-6"><a class="Article-signpost__link" href="#">Build the culture and the capabilities for design to flourish</a></p>
</div>
<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>
</div>
</article>
</li>
<li class="Case-study-promo__item">
<article class="Article-signpost">
<div class="Article-signpost__wrapper focus">
<div class="flow--3xs">
<p class="eyebrow">client</p>
<p class="h h-6"><a class="Article-signpost__link" href="#">Build the culture and the capabilities for design to flourish</a></p>
</div>
<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>
</div>
</article>
</li>
<li class="Case-study-promo__item">
<article class="Article-signpost">
<div class="Article-signpost__wrapper focus">
<div class="flow--3xs">
<p class="eyebrow">client</p>
<p class="h h-6"><a class="Article-signpost__link" href="#">Build the culture and the capabilities for design to flourish</a></p>
</div>
<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>
</div>
</article>
</li>
</ul>
</div>
</div>
<div class="Case-study-promo">
<div class="flow">
<h2 class="Case-study-promo__eyebrow eyebrow">
{{ eyebrow }}
</h2>
<h3 class="h h-4">
{{ title }}
</h3>
</div>
<div class="Case-study-promo__list grid grid--7/5" role="list">
{% set featured = caseStudies[0] %}
<article class="Case-study-promo__featured flow--m theme--dark">
{% if featured.logo %}
<img class="Case-study-promo__logo"
src="{{ featured.logo }}"
alt="{{ featured.client }}" />
{% else %}
<h3 class="eyebrow">
{{ featured.client }}
</h3>
{% endif %}
<p class="h h-4">
{{ featured.title }}
</p>
{% include '@combo-button' with {
text: 'Read this client story',
link: featured.link,
theme: 'green'
} %}
</article>
<ul class="Case-study-promo__collection" role="list">
{% for caseStudy in caseStudies|slice(1, 3) %}
<li class="Case-study-promo__item">
{% include '@article-signpost' with {
eyebrow: caseStudy.client,
title: caseStudy.title,
link: caseStudy.link,
arrow: true
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
{
"eyebrow": "case studies",
"title": "We’ve recently helped",
"caseStudies": [
{
"title": "Build the culture and the capabilities for design to flourish",
"text": "read this client story",
"link": "#",
"logo": "https://via.placeholder.com/150",
"client": "3m"
},
{
"title": "Build the culture and the capabilities for design to flourish",
"text": "read this client story",
"link": "#",
"logo": "https://via.placeholder.com/150",
"client": "client"
},
{
"title": "Build the culture and the capabilities for design to flourish",
"text": "read this client story",
"link": "#",
"logo": "https://via.placeholder.com/150",
"client": "client"
},
{
"title": "Build the culture and the capabilities for design to flourish",
"text": "read this client story",
"link": "#",
"logo": "https://via.placeholder.com/150",
"client": "client"
}
]
}
.Case-study-promo {
&__list {
margin-top: var(--space-s-l);
align-items: center;
}
&__featured {
padding: var(--space-s-l);
position: relative;
}
&__item {
position: relative;
&:not(:last-child) {
padding-bottom: var(--space-s-m);
}
}
&__item + &__item {
border-top: 1px solid var(--grey-step-1);
padding-top: var(--space-s-m);
}
&__logo {
width: 100%;
object-fit: contain;
object-position: bottom left;
max-width: 263px;
height: 88px;
}
}
No notes defined.