<figure class="Quote">
<blockquote class="Quote__quote body">
<p>Clearleft are one of only a few agencies in the world who consistently and predictably deliver successful projects. This shouldn’t be a rare skill amongst agencies, but in my experience it is.”</p>
</blockquote>
<footer class="Quote__footer">
<img class="Quote__image" src="https://www.fillmurray.com/400/400" alt="Josh Seiden" />
<div class="Quote__cite small">
<cite class="Quote__author">Josh Seiden</cite>
<cite class="Quote__company">seiden consulting</cite>
</div>
</footer>
</figure>
<figure class="Quote">
<blockquote class="Quote__quote body">
{{ quote|raw }}
</blockquote>
{% if citation is defined and citation %}
<footer class="Quote__footer">
{% if image %}
<img class="Quote__image" src="{{ image.src }}" alt="{{ image.alt }}" />
{% endif %}
<div class="Quote__cite small">
<cite class="Quote__author">{{ citation }}</cite>
{% if qualifier is defined %}
<cite class="Quote__company">{{ qualifier }}</cite>
{% endif %}
</div>
</footer>
{% endif %}
</figure>
{
"quote": "<p>Clearleft are one of only a few agencies in the world who consistently and predictably deliver successful projects. This shouldn’t be a rare skill amongst agencies, but in my experience it is.”</p>",
"citation": "Josh Seiden",
"qualifier": "seiden consulting",
"image": {
"alt": "Josh Seiden",
"src": "https://www.fillmurray.com/400/400"
}
}
.Quote {
position: relative;
padding-top: 37px;
color: var(--dark);
&:after {
content: '';
width: 44px;
height: 37px;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 65 54'%3E%3Cdefs/%3E%3Cpath fill='%232fa58a' d='M37.1722 54V39.0572C37.1722 31.2252 38.0964 24.8015 39.9447 19.7863C41.8615 14.771 45.079 10.5114 49.5972 7.00763C54.1153 3.50382 59.2496 1.16794 65 0V11.9542C60.961 14.2901 58.6677 17.416 58.1201 21.3321H65V54H37.1722ZM0 54V39.0572C0 31.2252 0.924171 24.8015 2.77251 19.7863C4.68931 14.771 7.90679 10.5114 12.425 7.00763C17.0116 3.50382 22.1459 1.16794 27.8278 0V11.9542C23.7888 14.2901 21.4955 17.416 20.9479 21.3321H27.8278V54H0Z'/%3E%3C/svg%3E");
}
&__quote {
padding-top: var(--space-s-m);
orphans: 2;
color: var(--green-step--2);
max-width: 65ch;
}
&__image {
width: var(--space-xl);
height: var(--space-xl);
object-fit: cover;
border-radius: 99px;
margin-right: var(--space-s);
}
&__footer {
display: flex;
margin-top: var(--space-s);
align-items: center;
}
&__cite > * {
font-style: normal;
display: block;
}
}
/* media */
@media screen and (min-width: 50rem) {
.Quote {
padding-top: 44px;
&:after {
content: '';
width: 52px;
height: 44px;
}
}
}
No notes defined.