<div class="Contact-methods flow--l">
<h3 class="h h-4">
Come over to our place
</h3>
<div class="grid grid--of-three">
<figure class="flow">
<img class="Contact-methods__image" alt="" src="https://www.fillmurray.com/400/400" loading="lazy" />
<figcaption>
<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>View on Google Maps</span></a>
</figcaption>
</figure>
<figure class="flow">
<img class="Contact-methods__image" alt="" src="https://www.fillmurray.com/400/400" loading="lazy" />
</figure>
<figure class="flow">
<img class="Contact-methods__image" alt="" src="https://www.fillmurray.com/400/400" loading="lazy" />
</figure>
</div>
<div class="grid grid--8/4">
<div class="body flow">
<p>
There’s nothing like meeting face-to-face.</p>
<p>
It’s a pleasant 15-minute walk from Brighton train station to the Clearleft studio. Just head towards of the sea and we’ll be on the left. Or paddle over – we’re right on the beach front.</p>
<p>
We’re a bike-friendly office so bring your wheels with you.There are several car parks within a short walk from the studio.
</p>
</div>
<div class="body flow">
<address class="Contact-methods__address">
Clearleft, 68 Middle Street, Brighton, BN1 1AL
</address>
<p><a class="Contact-methods__wtw focus" href="#">crowned.tones.enter</a></p>
<p>50° 49' 18.156" N 0° 8' 34.728" W</p>
</div>
</div>
</div>
</div>
<div class="Contact-methods flow--l">
<h3 class="h h-4">
{{ title }}
</h3>
<div class="grid grid--of-three">
{% for item in items %}
<figure class="flow">
{% if item.image.src is defined %}
<img class="Contact-methods__image" alt="{{ item.image.alt }}" src="{{ item.image.src }}" loading="lazy" />
{% endif %}
{% if item.link is defined and item.link %}
<figcaption>
{% include '@twi' with {
text: item.link.text,
link: item.link.url,
icon: item.link.icon
} only %}
</figcaption>
{% endif %}
</figure>
{% endfor %}
</div>
<div class="grid grid--8/4">
<div class="body flow">
{{ body|raw }}
</div>
<div class="body flow">
<address class="Contact-methods__address">
{{ address|raw }}
</address>
{% if whatThreeWordsLink is defined and whatThreeWordsLink.url is defined and whatThreeWordsLink.url %}
<p><a class="Contact-methods__wtw focus" href="{{ whatThreeWordsLink.url }}">{{ whatThreeWordsLink.text }}</a></p>
{% endif %}
<p>{{ coordinates}}</p>
</div>
</div>
</div>
</div>
{
"title": "Come over to our place",
"body": "<p>\n There’s nothing like meeting face-to-face.</p><p>\n It’s a pleasant 15-minute walk from Brighton train station to the Clearleft studio. Just head towards of the sea and we’ll be on the left. Or paddle over – we’re right on the beach front.</p><p>\n We’re a bike-friendly office so bring your wheels with you.There are several car parks within a short walk from the studio.\n </p>",
"address": "Clearleft, 68 Middle Street, Brighton, BN1 1AL",
"whatThreeWordsLink": {
"text": "crowned.tones.enter",
"url": "#"
},
"coordinates": "50° 49' 18.156\" N 0° 8' 34.728\" W",
"items": [
{
"link": {
"url": "#",
"text": "View on Google Maps",
"icon": "arrow-right"
},
"image": {
"src": "https://www.fillmurray.com/400/400"
}
},
{
"image": {
"src": "https://www.fillmurray.com/400/400"
}
},
{
"image": {
"src": "https://www.fillmurray.com/400/400"
}
}
]
}
.Contact-methods {
&__image {
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
}
&__address {
font-style: normal;
}
&__wtw {
&::before {
content: '///';
color: var(--red);
margin-right: var(--space-3xs);
}
}
}
@media screen and (min-width: 50rem) {
.Contact-methods {
&__image {
aspect-ratio: 1;
}
}
}
No notes defined.