<div class="c-teaser pb-1-5 relative">
<div class="mb-1-5 trans c-teaser__img">
<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>
<date class="text-black font-light text-xs mb-0-25 block">12th July 2017</date>
<h5 class="text-black text-h4 mb-1 relative z-10">
<a href="#0" class="text-black hover:text-blue trans">
Mr Blam Blops
</a>
</h5>
<div class="text-black font-light text-lg mb-1-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>
</div>
<a href="#0" class="block absolute pin opacity-0 w-full h-full">Mr Blam Blops</a>
</div>
{% import '@helpers' as h %}
<div class="c-teaser pb-1-5 relative">
<div class="mb-1-5 trans c-teaser__img">
{{ h.srcset(image) }}
</div>
<date class="text-black font-light text-xs mb-0-25 block">{{ date }}</date>
<h5 class="text-black text-h4 mb-1 relative z-10">{{ h.maybeLink(heading, { url: url }, { className: 'text-black hover:text-blue trans'} ) }}</h5>
<div class="text-black font-light text-lg mb-1-5">
{{ body|raw }}
</div>
<a href="{{ url }}" class="block absolute pin opacity-0 w-full h-full">{{ heading }}</a>
</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://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"
},
"url": "#0",
"heading": "Mr Blam Blops",
"date": "12th July 2017",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>"
}
.c-teaser {
&:hover {
.c-teaser__img {
opacity: 0.95;
}
}
}
There are no notes for this item.