<div class="c-related bg-white md:bg-black md:pt-4 md:pb-6 lg:pt-6 lg:pb-8 xl:pb-14 relative" data-behaviour="BgSwitch">
<img id="related-image-base" class="hidden md:block absolute pin object-fit h-full w-full opacity-25 lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<div id="related-image-container" class="absolute pin">
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d"
data-srcset="" alt="Herobleugh" />
</div>
<div class="xl:wrapper px-1-5 md:px-2 relative z-10">
<h4 class="font-light text-white font-body mb-1">Other featured projects</h4>
<ul class="list-reset md:flex flex-wrap items-center justify-start lg:w-su-20/24 xl:w-su-19/24">
<li class="mb-0-5">
<a data-index="0" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class="md:slash flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
Environmental Justice Foundation
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="1" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class="md:slash flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
Birleys Sandwiches
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="2" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class="md:slash flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
Straightline
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="3" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class="md:slash flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
Kudos Memorabilia
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="4" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class="md:slash flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
Searchstar
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="5" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class="md:slash flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
Warminster
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="6" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class="md:slash flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
Godolphin School
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="7" data-image='{"url":"https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d","alt":"Herobleugh","width":1600,"height":900}'
href="#0" class=" flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
D Young
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="c-related bg-white md:bg-black md:pt-4 md:pb-6 lg:pt-6 lg:pb-8 xl:pb-14 relative" data-behaviour="BgSwitch">
<img id="related-image-base" class="hidden md:block absolute pin object-fit h-full w-full opacity-25 lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="{{ related[0].image.url }}" data-srcset="{{ related[0].image.srcset }}" alt="{{ related[0].image.alt }}" />
<div id="related-image-container" class="absolute pin">
{% for entry in related %}
<img data-related-image class="hidden md:block absolute pin object-fit h-full w-full opacity-0 trans" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="{{ entry.image.url }}" data-srcset="{{ entry.image.srcset }}" alt="{{ entry.image.alt }}" />
{% endfor %}
</div>
<div class="xl:wrapper px-1-5 md:px-2 relative z-10">
<h4 class="font-light text-white font-body mb-1">Other featured projects</h4>
<ul class="list-reset md:flex flex-wrap items-center justify-start lg:w-su-20/24 xl:w-su-19/24">
{% for entry in related %}
<li class="mb-0-5">
{% set className = loop.index < related|length ? 'md:slash' : '' %}
<a data-index="{{ loop.index0 }}" data-image='{{ entry.image|json_encode }}' href="{{ entry.url }}" class="{{ className }} flex flex-no-wrap justify-start items-center no-underline text-black font-bold text-h4 block md:text-white">
<span class="md:opacity-50 hover:opacity-100 trans trans-opacity">
{{ entry.title }}
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "01225 471 465",
"phone": "01225 471 465",
"email": "hello@ournameismud.co.uk",
"twitter": "asclearasmud",
"copyright": "© 2018 Our Name is Mud",
"siteUrl": "/components/preview/home",
"address": "5 Princes Buildings \nBath \nBA1 2ED",
"cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself, <a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
"entries": [
{
"title": "Projects",
"url": "/components/preview/listing"
},
{
"title": "About",
"url": "/components/preview/about"
},
{
"title": "Journal",
"url": "/components/preview/journal"
},
{
"title": "Contact",
"url": "/components/preview/contact"
}
],
"image": {
"url": "http://unsplash.it/g/1600/900?random&gravity=center",
"alt": "Herobleugh",
"width": 1600,
"height": 900
},
"related": [
{
"title": "Environmental Justice Foundation",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
},
{
"title": "Birleys Sandwiches",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
},
{
"title": "Straightline",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
},
{
"title": "Kudos Memorabilia",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
},
{
"title": "Searchstar",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
},
{
"title": "Warminster",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
},
{
"title": "Godolphin School",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
},
{
"title": "D Young",
"url": "#0",
"image": {
"url": "https://images.unsplash.com/photo-1520454818757-c439e247d304?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&s=7c399a12883381e8348ad5e9ef81328d",
"alt": "Herobleugh",
"width": 1600,
"height": 900
}
}
]
}
.c-related--posts {
transform: translate3d(0, -100%, 0);
transition: transform 300ms ease;
position: fixed;
&.is-visible {
transform: translate3d(0, 0, 0);
}
}
There are no notes for this item.