<div class="c-block">
<div class="c-block__md">
<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="c-block__bd c-block__bd--intro">
<h2 class="text-h4 text-black mb-1-5">Lorem ipsum dolor sit amet.</h2>
<div class="text-black text-lg font-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ipsam quidem aut. Delectus, aspernatur nam?</div>
</div>
</div>
{% import '@helpers' as h %}
<div class="c-block">
<div class="c-block__md">
{{ h.srcset(image) }}
</div>
<div class="c-block__bd c-block__bd--intro">
<h2 class="text-h4 text-black mb-1-5">{{ heading }}</h2>
<div class="text-black text-lg font-light">{{ body|raw }}</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": "© 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"
}
],
"heading": "Lorem ipsum dolor sit amet.",
"body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ipsam quidem aut. Delectus, aspernatur nam?",
"link": {
"url": "#0",
"text": "View project"
},
"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"
}
}
.c-block {
@apply .px-1-5 .mb-2-5 .mx-auto;
@screen md {
@apply .px-2 .grid .mb-5;
}
@screen lg {
@apply .mb-12 .px-3;
}
@screen xl {
@apply .wrapper .mb-16 .px-5;
}
}
.c-block--job {
@apply .mb-0 .pb-2-5;
@screen lg {
@apply .pb-4;
}
@screen xl {
@apply .pb-6;
}
}
.c-block__md {
@apply .mb-1-5;
@screen md {
@apply .mb-0;
}
}
.c-block__bd {
@screen md {
@apply .pt-0-75;
}
@screen xl {
@apply .pt-2;
}
}
@screen md {
.c-block {
grid-auto-flow: dense;
}
.c-block__bd {
grid-column: 14 / span 11;
}
.c-block__md {
grid-column: 1 / span 12;
}
.c-block__bd--flip {
grid-column: 1 / span 11;
}
.c-block__md--flip {
grid-column: 13 / span 12;
}
.c-block__bd {
grid-column: 16 / span 8;
}
.c-block__md {
grid-column: 1 / span 12;
}
.c-block__bd--flip {
grid-column: 2 / span 8;
}
.c-block__md--flip {
grid-column: 13 / span 12;
}
.c-block--project {
@apply .px-0;
max-width: none;
grid-template-columns: 1fr repeat(24, minmax(auto, 1800px)) 1fr;
}
.c-block--project-0 {
.c-block__md {
grid-column: 1 / span 14;
}
}
.c-block--project-1 {
.c-block__bd {
grid-column: 3 / span 8;
}
.c-block__md--flip {
grid-column: 12 / span 13;
}
}
.c-block--project-2 {
.c-block__md {
grid-column: 2 / span 13;
}
}
.c-block--project-3 {
.c-block__md--flip {
grid-column: 12 / span 15;
}
.c-block__bd {
grid-column: 3 / span 8;
}
}
.c-block__bd--intro {
grid-column: 9 / span 16;
}
}
@screen lg {
.c-block__bd--intro {
grid-column: 14 / span 11;
}
}
@screen max {
.c-block--project {
grid-template-columns: 1fr repeat(24, #{(1200px / 24)}) 1fr;
}
}
There are no notes for this item.