<div id="page" class="site relative z-10 bg-black">
<header id="site-header" class="c-header absolute pin-t z-50 pin-l w-full md:py-0 md:flex md:items-center md:justify-end" data-bg-item>
<a href="/" class="c-header__logo text-black absolute pin-l z-50 px-1-5 md:px-2 lg:px-3">
<span class="u-vh">Our Name is Mud</span>
<i class="icon icon--ui-logo">
<svg>
<use class="no-barba pointer-events-none" xlink:href="#ui-logo"></use>
</svg>
</i>
</a>
<a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block md:hidden absolute pin-r mr-1-25 z-20 c-nav__btn lg:hidden">
<span class="u-vh">Open Menu</span>
<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
<nav id="site-menu" role="navigation" aria-label="Main menu" class="z-10 px-1-5 pt-7 pin-l pin-t w-full fixed min-h-screen invisible opacity-0 pointer-events-none md:px-2 md:my-0 md:p-0 md:min-h-px md:relative md:pin-r md:opacity-100 md:visible md:pointer-events-auto lg:px-3">
<div id="site-menu-inner" class="w-full md:flex md:items-center md:flex-row md:p-0 md:justify-end">
<ul class="list-reset mb-5 md:mb-0 md:flex">
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 md:mr-1-25 mb-1 md:mb-0">
<a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/listing"><span class="">Projects</span></a>
</li>
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 mb-1 md:mb-0">
<a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/about"><span class="">About</span></a>
</li>
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 mb-1 md:mb-0">
<a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/journal"><span class="">Journal</span></a>
</li>
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 mb-1 md:mb-0">
<a id="contact-link" data-contact-link class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/contact"><span class="">Contact</span></a>
</li>
</ul>
<div class="md:hidden">
<a class="block text-white no-underline font-light text-sm" href="tel:01225 471 465">01225 471 465</a>
<a class="block text-white no-underline font-light text-sm" href="mailto:hello@ournameismud.co.uk">hello@ournameismud.co.uk</a>
<a class="block text-white no-underline font-light text-sm" href="{ twitter }}">@asclearasmud</a>
</div>
</div>
</nav>
</header>
<div id="container" class="trans">
<main id="barba-wrapper" class="w-full bg-white trans overflow-hidden">
<div class="barba-container" data-behaviour="VideoSpy">
<div class="c-hero pt-0 c-hero--h c-hero--project relative bg-white mb-2 lg:mb-0 lg:pb-15 w-full overflow-hidden" data-behaviour="Tilt" data-tilt>
<div class="c-hero__clip c-hero__clip--project bg-gradient c-hero--h relative overflow-hidden mb-2 lg:aspect-16-9 lg:mb-0">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2000 2000w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2400 2400w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2800 2800w" alt="Kudos Header 9" />
</noscript>
<img class="lazyload object-fit h-full w-full lg:absolute lg:pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2000 2000w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2400 2400w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2800 2800w"
alt="Kudos Header 9" />
</div>
<div class="lg:absolute lg:pin lg:h-full flex items-center">
<div class="px-1-5 md:px-2 lg:px-3 flex flex-col items-start lg:grid c-hero__grid mb-1-25 xl:wrapper">
<div class="c-hero__title-col lg:mb-0">
<h1 class="c-hero__heading absolute lg:relative z-10 text-h2 text-white tracking-normal" data-motion-text data-speed="0.2">Kudos Memorabilia</h1>
</div>
<div class="c-hero__body-col" data-motion-text data-speed="0.2">
<ul class="list-reset flex items-center mb-0-5 opacity-50">
<li class="text-black lg:text-white font-light text-xs slash ">Design</li>
<li class="text-black lg:text-white font-light text-xs slash ">UI</li>
<li class="text-black lg:text-white font-light text-xs ">UX</li>
</ul>
<p class="text-black text-h6 font-light lg:text-white mb-1">Showcasing some of the finest Hollywood memorabilia</p>
<a href="https://kudosmemorabilia.com/" class="o-btn text-sm flex flex-no-wrap justify-end relative items-center text-black lg:text-white" target="_blank">
<span class="o-btn__line h-px flex-1 mr-0-5 w-full bg-currentColor opacity-25 block"></span>
<span class="block ml-auto mr-0 whitespace-no-wrap">Visit site</span>
</a>
</div>
</div>
</div>
</div>
<article class="c-page relative z-10">
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 lg:-mt-6 xl:-mt-10 xl:wrapper" data-block="video">
<div class="hidden md:block">
<div class="flex items-center justify-center p-5 video-container" style="background-color: [object Object]">
<div class="w-full max-w-full overflow-hidden relative" style="padding-top: 65%">
<video data-video-spy preload="false" muted loop class="absolute pin w-full h-full max-w-full object-fit" src="http://mud-assets.s3.amazonaws.com/media/Kudos_two.mp4" poster="" />
</div>
</div>
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="textImage">
<div class="lg:py-4 xl:py-6 s-content">
<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: 75%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1200w" alt="Placeholder" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1200w"
alt="Placeholder" />
</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">
<div class="font-light text-lg">
<p>Kudos are collectors and exhibitors of some of the most memorable items from cinema. They approached Mud to build them a website that showcased their incredible collection. Working with the wonderful brand assets
created by <a href="http://www.distilstudio.co.uk/" target="_blank" rel="noreferrer noopener">Distil Studio</a> and the incredible photography produced by the client, we crafted a gallery style site rich in
interactive details. And using the Shopify API, we developed an intuitive, easy to use shop for customers to purchase their own piece of cinematic history. </p>
</div>
</div>
</div>
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="image">
<div class="w-full relative image-container" style="padding-top: 148.0379746835443%">
<noscript>
<img class="absolute pin object-fit w-full h-full" srcset="https://mud-assets.imgix.net/projects//kudosmem_6.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudosmem_6.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" width="1580" height="2339" alt="Kudosmem 6" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/projects//kudosmem_6.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudosmem_6.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x"
width="1580" height="2339" alt="Kudosmem 6" />
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="image">
<div class="w-full relative image-container" style="padding-top: 58.9873417721519%">
<noscript>
<img class="absolute pin object-fit w-full h-full" srcset="https://mud-assets.imgix.net/projects//Kudos-Larger-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//Kudos-Larger-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" width="1580" height="932" alt="Kudos Larger Test" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/projects//Kudos-Larger-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//Kudos-Larger-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x"
width="1580" height="932" alt="Kudos Larger Test" />
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="image">
<div class="w-full relative image-container" style="padding-top: 186.58227848101265%">
<noscript>
<img class="absolute pin object-fit w-full h-full" srcset="https://mud-assets.imgix.net/projects//kudos_new-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_new-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" width="1580" height="2948" alt="Kudos New Test" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/projects//kudos_new-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_new-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x"
width="1580" height="2948" alt="Kudos New Test" />
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="image">
<div class="relative w-full image-container sm-asp-110182 lg-asp-7874">
<style>
@media (min-width:20em) {
.sm-asp-110182 {
padding-top: 181.875%;
}
}
@media (min-width:64em) {
.lg-asp-7874 {
padding-top: 74.1139240506329%;
}
}
</style>
<noscript>
<picture>
<source srcset="https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" media="(min-width: 64em)">
<source srcset="https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=480, https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=960 2x" media="(min-width: 20em)">
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" alt="Kudos 7" />
</picture>
</noscript>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=480, https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=960 2x"
media="(min-width: 20em)">
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x"
media="(min-width: 64em)">
<img class="lazyload absolute pin object-fit w-full h-full" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=480, https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=960 2x"
alt="Kudos Mobile 1" />
</picture>
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="image">
<div class="w-full relative image-container" style="padding-top: 67.40506329113924%">
<noscript>
<img class="absolute pin object-fit w-full h-full" srcset="https://mud-assets.imgix.net/projects//kudos_3.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_3.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" width="1580" height="1065" alt="Kudos 3" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/projects//kudos_3.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_3.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x"
width="1580" height="1065" alt="Kudos 3" />
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="image">
<div class="w-full relative image-container" style="padding-top: 67.40506329113924%">
<noscript>
<img class="absolute pin object-fit w-full h-full" srcset="https://mud-assets.imgix.net/projects//kudos_5.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_5.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" width="1580" height="1065" alt="Kudos 5" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/projects//kudos_5.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_5.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x"
width="1580" height="1065" alt="Kudos 5" />
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="quote">
<div class="lg:py-4 xl:py-7 s-content">
<blockquote class="c-quote px-1-5 md:px-2 lg:px-0 lg:mx-auto lg:w-su-16/24">
<div class="mb-1-5 text-h4 text-black font-light lg:mb-3">We would like to thank Matt, Meg, Dave, Max and all our friends at 'Our Name is Mud' for their outstanding work on this exciting project. It was a real pleasure working with all of you.</div>
<cite>
<span class="block text-sm text-blue font-bold">Brian White</span>
<span class="block text-sm text-black font-light">Kudos Memorabilia</span>
</cite>
</blockquote>
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="image">
<div class="w-full relative image-container" style="padding-top: 67.40506329113924%">
<noscript>
<img class="absolute pin object-fit w-full h-full" srcset="https://mud-assets.imgix.net/projects//kudos_4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_4.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x" width="1580" height="1065" alt="Kudos 4" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://mud-assets.imgix.net/projects//kudos_4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_4.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x"
width="1580" height="1065" alt="Kudos 4" />
</div>
</div>
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 xl:wrapper" data-block="video">
<div class="hidden md:block">
<div class="flex items-center justify-center p-5 video-container" style="background-color: [object Object]">
<div class="w-full max-w-full overflow-hidden relative" style="padding-top: 65%">
<video data-video-spy preload="false" muted loop class="absolute pin w-full h-full max-w-full object-fit" src="http://mud-assets.s3.amazonaws.com/media/Kudos-4.mp4" poster="" />
</div>
</div>
</div>
</div>
</article>
<aside class="mb-5 md:mb-0">
<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://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w"
alt="Unsplash Placeholder 4" />
<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://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w"
alt="Unsplash Placeholder 4" />
<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://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w"
alt="Unsplash Placeholder 4" />
</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='{"id":"56","url":"https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768","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":"https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w","alt":"Unsplash Placeholder 4"}'
href="http://localhost:3000/projects/d-young" 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">
D Young
</span>
</a>
</li>
<li class="mb-0-5">
<a data-index="1" data-image='{"id":"56","url":"https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768","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":"https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w","alt":"Unsplash Placeholder 4"}'
href="http://localhost:3000/projects/environmental-justice-foundation" 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">
Environmental Justice Foundation
</span>
</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
</main>
</div>
<footer class="c-footer pt-6 pb-0 md:pt-8 xl:pt-14 bg-black text-white text-h4 font-light relative overflow-hidden z-100">
<svg class="absolute pin z-0" style="overflow: visible" data-lines xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 571.563">
<linearGradient id='cta-grad1'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='30%' stop-color='#671eb8'/>
</linearGradient>
<linearGradient id='cta-grad2'>
<stop stop-color='#28BBDE'/>
<stop data-stop-color offset='50%' stop-color='#1C1E4B'/>
<stop data-stop-color offset='90%' stop-color='#28BBDE'/>
</linearGradient>
<path data-speed="-0.24" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#cta-grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1042.044 1.971l227.612 334.075 515.797-310.067"/>
<path data-speed="-0.64" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#cta-grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1669.292 21.926L913.734 237.454 3.211 2336.1"/>
</svg>
<div class="px-1-5 md:px-2 lg:px-3 xl:wrapper relative z-10">
<div class="lg:w-su-17/24 xl:w-su-13/24 mb-5 lg:mb-7 c-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, drop us a line. We’re always happy to chat.</p>
</div>
<div class="pb-4 md:flex md:items-start">
<address class="text-white font-light text-xs whitespace-pre-line mb-2 md:mb-0 md:mr-2 lg:mr-4">5 Princes Buildings
Bath
BA1 2ED</address>
<dl class="flex flex-col items-start justify-start mb-2 md:mb-0">
<dt class="u-vh">Tel</dt>
<dd>
<a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="tel:01225 471 465"><span>01225 471 465</span></a>
</dd>
<dt class="u-vh">Email</dt>
<dd>
<a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="mailto:hello@ournameismud.co.uk"><span>hello@ournameismud.co.uk</span></a>
</dd>
<dt class="u-vh"></dt>
<dd>
<a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="asclearasmud"><span>@asclearasmud</span></a>
</dd>
</dl>
<p class="text-white text-xs font-light md:ml-auto text-right">© 2018 Our Name is Mud <br /><span class="opacity-50">Company No. 8589415</span></p>
</div>
</div>
</footer>
</div>
<div class="c-draw hidden fixed pin-t pin-r h-screen w-full max-w-md bg-black z-0 p-1 md:p-3 xl:p-3 overflow-auto">
<h2 class="text-h3 text-white mb-1-5 font-light">Kudos Memorabilia</h2>
<div class="text-white text-body mb-3">Showcasing some of the finest Hollywood memorabilia</div>
<ul class="list-reset">
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Call us</h2>
<a href="tel:01225 471 465" class="inline-flex font-bold text-body text-blue linkee"><span>01225 471 465</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">General enquiries</h2>
<a href="mailto:hello@ournameismud.co.uk" class="inline-flex font-bold text-body text-blue linkee"><span>hello@ournameismud.co.uk</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Follow</h2>
<a target="_blank" rel="noopener" href="asclearasmud" class="inline-flex font-bold text-body text-blue linkee"><span>@asclearasmud</span></a>
</li>
<li>
<h2 class="text-h6 mb-0-5 text-white">Visit us</h2>
<address class="block font-light text-body text-white mb-1-5">5 Princes Buildings
Bath
BA1 2ED</address>
<a href="https://goo.gl/maps/S6RQRy8kSQT2" class="o-btn text-sm flex flex-no-wrap justify-end relative items-center text-white" target="_blank">
<span class="o-btn__line h-px flex-1 mr-0-5 w-full bg-currentColor opacity-25 block"></span>
<span class="block ml-auto mr-0 whitespace-no-wrap">View on Google Maps</span>
</a>
</li>
</ul>
</div>
<div id="cursor">
<div id="c1"></div>
</div>
{% import '@helpers' as h %}
{% extends craft.app.config.general.custom.wrapper ~ '_layout.twig' %}
{% block critical_css %}
<!-- build:critical-->
<!-- endbuild -->
{% endblock %}
{% block content %}
<div class="barba-container" data-behaviour="VideoSpy">
{% include '@hero--project' with hero %}
<article class="c-page relative z-10">
{% for block in blocks %}
<div class="mb-2-5 md:px-2 lg:px-3 xl:mb-5 {% if loop.index0 == 0 %}lg:-mt-6 xl:-mt-10{% endif %} xl:wrapper" data-block="{{ block.type }}">
{% if block.type == 'image' %}
{{ h.picture(block.images) }}
{% endif %}
{% if block.type == 'textImage' %}
<div class="lg:py-4 xl:py-6 s-content">
{% set partial = block.position == 'left' ? 'text-image' : 'text-image--flip' %}
{% include '@' ~ partial with block %}
</div>
{% endif %}
{% if block.type == 'quote' %}
<div class="lg:py-4 xl:py-7 s-content">
{% include '@quote' with block %}
</div>
{% endif %}
{% if block.type == 'video' %}
<div class="hidden md:block">
{% include '@video' with block.video %}
</div>
{% endif %}
{% if block.type == 'grid' %}
<div class="lg:flex lg:flex-wrap">
{% for image in block.images %}
<div class="lg:w-su-12/24 mb-1-25 {{ loop.index % 2 == 0 ? 'lg:mr-0' : 'lg:mr-su' }}">
{{ h.image(image) }}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
</article>
<aside class="mb-5 md:mb-0">
{% include '@related' with {
related: related.items
} %}
</aside>
</div>
{% endblock %}
{
"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, drop us a line. 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"
}
],
"hero": {
"image": {
"id": "248",
"url": "https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 60,
"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": "https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2000 2000w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2400 2400w, https://mud-assets.imgix.net/hero//kudos_header_9.jpg?auto=format%2Ccompress&fit=max&q=93&w=2800 2800w",
"alt": "Kudos Header 9"
},
"heading": "Kudos Memorabilia",
"tags": [
"Design",
"UI",
"UX"
],
"body": "Showcasing some of the finest Hollywood memorabilia",
"slug": "https://kudosmemorabilia.com/"
},
"blocks": [
{
"type": "video",
"video": {
"url": "http://mud-assets.s3.amazonaws.com/media/Kudos_two.mp4",
"color": {},
"poster": null
}
},
{
"type": "textImage",
"heading": null,
"body": "<p>Kudos are collectors and exhibitors of some of the most memorable items from cinema. They approached Mud to build them a website that showcased their incredible collection. Working with the wonderful brand assets created by <a href=\"http://www.distilstudio.co.uk/\" target=\"_blank\" rel=\"noreferrer noopener\">Distil Studio</a> and the incredible photography produced by the client, we crafted a gallery style site rich in interactive details. And using the Shopify API, we developed an intuitive, easy to use shop for customers to purchase their own piece of cinematic history. </p>",
"position": "right",
"image": {
"id": "414",
"url": "https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 75,
"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": "https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//placeholder.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1200w",
"alt": "Placeholder"
}
},
{
"type": "image",
"images": {
"lg": {
"breakpoint": "1024",
"id": "368",
"url": "https://mud-assets.imgix.net/projects//kudosmem_6.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudosmem_6.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x",
"alt": "Kudosmem 6",
"width": 1580,
"height": 2339
},
"sm": null
}
},
{
"type": "image",
"images": {
"lg": {
"breakpoint": "1024",
"id": "120",
"url": "https://mud-assets.imgix.net/projects//Kudos-Larger-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//Kudos-Larger-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x",
"alt": "Kudos Larger Test",
"width": 1580,
"height": 932
},
"sm": null
}
},
{
"type": "image",
"images": {
"lg": {
"breakpoint": "1024",
"id": "365",
"url": "https://mud-assets.imgix.net/projects//kudos_new-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_new-test.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x",
"alt": "Kudos New Test",
"width": 1580,
"height": 2948
},
"sm": null
}
},
{
"type": "image",
"images": {
"lg": {
"breakpoint": "1024",
"id": "78",
"url": "https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_7.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x",
"alt": "Kudos 7",
"width": 1580,
"height": 1171
},
"sm": {
"breakpoint": "320",
"id": "110",
"url": "https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=480, https://mud-assets.imgix.net/hero//kudos_mobile_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=960 2x",
"alt": "Kudos Mobile 1",
"width": 480,
"height": 873
}
}
},
{
"type": "image",
"images": {
"lg": {
"breakpoint": "1024",
"id": "74",
"url": "https://mud-assets.imgix.net/projects//kudos_3.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_3.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x",
"alt": "Kudos 3",
"width": 1580,
"height": 1065
},
"sm": null
}
},
{
"type": "image",
"images": {
"lg": {
"breakpoint": "1024",
"id": "76",
"url": "https://mud-assets.imgix.net/projects//kudos_5.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_5.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x",
"alt": "Kudos 5",
"width": 1580,
"height": 1065
},
"sm": null
}
},
{
"type": "quote",
"body": "We would like to thank Matt, Meg, Dave, Max and all our friends at 'Our Name is Mud' for their outstanding work on this exciting project. It was a real pleasure working with all of you.",
"name": "Brian White",
"client": "Kudos Memorabilia"
},
{
"type": "image",
"images": {
"lg": {
"breakpoint": "1024",
"id": "75",
"url": "https://mud-assets.imgix.net/projects//kudos_4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1580, https://mud-assets.imgix.net/projects//kudos_4.jpg?auto=format%2Ccompress&fit=max&q=93&w=3000 2x",
"alt": "Kudos 4",
"width": 1580,
"height": 1065
},
"sm": null
}
},
{
"type": "video",
"video": {
"url": "http://mud-assets.s3.amazonaws.com/media/Kudos-4.mp4",
"color": {},
"poster": null
}
}
],
"related": {
"items": [
{
"title": "D Young",
"url": "http://localhost:3000/projects/d-young",
"image": {
"id": "56",
"url": "https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768",
"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": "https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w",
"alt": "Unsplash Placeholder 4"
}
},
{
"title": "Environmental Justice Foundation",
"url": "http://localhost:3000/projects/environmental-justice-foundation",
"image": {
"id": "56",
"url": "https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768",
"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": "https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/projects//unsplash-placeholder-4.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w",
"alt": "Unsplash Placeholder 4"
}
}
]
}
}
There are no notes for this item.