Related: Posts

Test

HTML
View
Context
Assets
Info
Notes


        
        <div data-behaviour="StickyRelations" class="hidden lg:block c-related--posts bg-black py-1-5 z-20 fixed w-full pin-t pt-3">
    <div class="lg:px-3 xl:wrapper">
        <h4 class="text-lg text-white font-light mb-1-5">Related articles</h4>
        <div class="flex flex-wrap items-stretch">
            <a href="#0" class="w-su-8/24 flex mr-su">
                <div class="w-su-10/24 mr-2">
                    <div class="w-full relative image-container" style="padding-top: 66.68%">
                        <noscript>
			<img class="absolute pin object-fit w-full h-full" src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg" srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w" alt="Unsplash Placeholder 4" />
		</noscript>
                        <img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg"
                            data-srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w"
                            alt="Unsplash Placeholder 4" />
                    </div>

                </div>
                <div class="flex-1">
                    <time class="text-white font-light text-xs">12th July 2018</time>
                    <h3 class="text-lg text-white">Lorem borums</h3>
                </div>
            </a>
            <a href="#0" class="w-su-8/24 flex mr-su">
                <div class="w-su-10/24 mr-2">
                    <div class="w-full relative image-container" style="padding-top: 66.68%">
                        <noscript>
			<img class="absolute pin object-fit w-full h-full" src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg" srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w" alt="Unsplash Placeholder 4" />
		</noscript>
                        <img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg"
                            data-srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w"
                            alt="Unsplash Placeholder 4" />
                    </div>

                </div>
                <div class="flex-1">
                    <time class="text-white font-light text-xs">12th July 2018</time>
                    <h3 class="text-lg text-white">Lorem borums</h3>
                </div>
            </a>
            <a href="#0" class="w-su-8/24 flex ">
                <div class="w-su-10/24 mr-2">
                    <div class="w-full relative image-container" style="padding-top: 66.68%">
                        <noscript>
			<img class="absolute pin object-fit w-full h-full" src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg" srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w" alt="Unsplash Placeholder 4" />
		</noscript>
                        <img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg"
                            data-srcset="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w"
                            alt="Unsplash Placeholder 4" />
                    </div>

                </div>
                <div class="flex-1">
                    <time class="text-white font-light text-xs">12th July 2018</time>
                    <h3 class="text-lg text-white">Lorem borums</h3>
                </div>
            </a>
        </div>
    </div>
</div>


        {% import '@helpers' as h %}

<div data-behaviour="StickyRelations" class="hidden lg:block c-related--posts bg-black py-1-5 z-20 fixed w-full pin-t pt-3">
	<div class="lg:px-3 xl:wrapper">
		<h4 class="text-lg text-white font-light mb-1-5">Related articles</h4>
		<div class="flex flex-wrap items-stretch">
			{% for post in posts %}
				<a href="{{ post.url }}" class="w-su-8/24 flex {% if loop.index < posts|length %}mr-su{% endif %}">
					<div class="w-su-10/24 mr-2">
						{{ h.srcset(post.image) }}
					</div>
					<div class="flex-1">
						<time class="text-white font-light text-xs">{{ post.date }}</time>
						<h3 class="text-lg text-white">{{ post.heading }}</h3>
					</div>
				</a>
			{% endfor %}
		</div>
	</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
      }
    }
  ],
  "posts": [
    {
      "heading": "Lorem borums",
      "url": "#0",
      "date": "12th July 2018",
      "image": {
        "url": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg",
        "aspect": 66.68,
        "src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
        "srcset": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w",
        "alt": "Unsplash Placeholder 4"
      }
    },
    {
      "heading": "Lorem borums",
      "url": "#0",
      "date": "12th July 2018",
      "image": {
        "url": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg",
        "aspect": 66.68,
        "src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
        "srcset": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w",
        "alt": "Unsplash Placeholder 4"
      }
    },
    {
      "heading": "Lorem borums",
      "url": "#0",
      "date": "12th July 2018",
      "image": {
        "url": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg",
        "aspect": 66.68,
        "src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
        "srcset": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w",
        "alt": "Unsplash Placeholder 4"
      }
    }
  ]
}

File:

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

Handle: @related--posts
Variants (2): Default , Posts
Preview:
- With layout
- Component only
Filesystem Path: src/templates/04-components/related/related--posts.twig
References (1): @helpers
Referenced by (1): @article

There are no notes for this item.

Related: Posts

Block

Hero

Teaser

Text Image