<div class="c-text-image lg:grid">
<div class="c-text-image__md c-text-image__md--flip mb-3 lg:mb-0">
<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-text-image__bd c-text-image__bd--flip px-1-5 md:px-0 mb-3 lg:mb-0 xl:pt-1-5">
<h3 class="text-h3 mb-1">Readjusting to the real world.</h3>
<div class="font-light text-lg">Launched by the Prison Radio Association, Straightline helps those leaving prison readjust to the real world by providing an inspirational collection of audio and visual stories. Equipped with a brand developed by our friends at Supple Studio,
we built an online home and native apps for this powerful content, as well as the functionality for people to share their own stories. For continuity of experience, a React framework allows the media player to move around the website with
the user, uninterrupted.</div>
</div>
</div>
{% import '@helpers' as h %}
<div class="c-text-image lg:grid">
<div class="c-text-image__md c-text-image__md--flip mb-3 lg:mb-0">
{{ h.srcset(image) }}
</div>
<div class="c-text-image__bd c-text-image__bd--flip px-1-5 md:px-0 mb-3 lg:mb-0 xl:pt-1-5">
{% if heading|length %}
<h3 class="text-h3 mb-1">{{ heading }}</h3>
{% endif %}
<div class="font-light text-lg">{{ 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"
}
],
"type": "textImage",
"heading": "Readjusting to the real world.",
"body": "Launched by the Prison Radio Association, Straightline helps those leaving prison readjust to the real world by providing an inspirational collection of audio and visual stories. Equipped with a brand developed by our friends at Supple Studio, we built an online home and native apps for this powerful content, as well as the functionality for people to share their own stories. For continuity of experience, a React framework allows the media player to move around the website with the user, uninterrupted.",
"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-text-image {
grid-auto-flow: dense;
}
@screen lg {
.c-text-image__md {
grid-column: 1 / 13;
}
.c-text-image__bd {
grid-column: 15 / 24;
}
.c-text-image__md--flip {
grid-column: 13 / 25;
}
.c-text-image__bd--flip {
grid-column: 2 / 10;
}
}
There are no notes for this item.