<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": "&copy; 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,&nbsp;<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
      }
    }
  ]
}
  • Content:
    .c-related--posts {
    	transform: translate3d(0, -100%, 0);
    	transition: transform 300ms ease;
    	position: fixed;
    
    	&.is-visible {
    		transform: translate3d(0, 0, 0);
    	}
    }
    
  • URL: /components/raw/related/_related.scss
  • Filesystem Path: src/templates/04-components/related/_related.scss
  • Size: 168 Bytes

There are no notes for this item.