<div class="Background Background--grey">

    <header class="SiteHeader">

        <a href="" class="Logo Logo--sea-serpent-blue" title="Home">
            <svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" width="154" height="55" viewBox="0 0 154 54">
                <title id="clearleft-logo">Clearleft</title>
                <style>
                    .Logo-streak {
                        mask-repeat: no-repeat;
                        stroke-dasharray: 150% 150%;
                        stroke-dashoffset: 150%;
                    }

                    .animateLogo-streak {
                        animation: swipe 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0.8s forwards;
                    }

                    @keyframes swipe {
                        from {
                            stroke-dashoffset: 150%;
                        }

                        to {
                            stroke-dashoffset: 0%;
                        }
                    }
                </style>
                <path class="Logo-text" fill="#25333A" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z" />
                <clipPath id="mask">
                    <path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2" />
                </clipPath>
                <path class="Logo-streak animateLogo-streak" clip-path="url(#mask)" fill-rule="evenodd" fill="none" stroke="#23D8A0" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6" />
            </svg>
        </a>

        <nav class="PrimaryNavigation PrimaryNavigation--sea-serpent-blue" aria-label="Primary Navigation" data-component="PrimaryNavigation">
            <a href="#offcanvas" class="PrimaryNavigation-menu" aria-hidden="true">Menu</a>
            <ul class="PrimaryNavigation-list">
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link is-active ">Case Studies</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Team</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Posts</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Events</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div class="Masthead Masthead--chimney" role="banner">

        <div class="Masthead-container">

            <div class="Masthead-primary">

                <h1 class="Heading Heading--main">Case<br>studies.</h1>

            </div>
            <!--/.Masthead-primary-->

        </div>

    </div>
    <!--/.Masthead-->
</div>

<main id="main-content">

    <div class="Work">

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0-heading">provident dolor et</h2>

                            </a>
                        </header>
                        <p class="Card-description">Aliquid earum nam. Rerum eos explicabo. Error ea id non recusandae sed et fugit architecto laudantium.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1-heading">praesentium suscipit ea</h2>

                            </a>
                        </header>
                        <p class="Card-description">Et consequatur eos quas eius odit consectetur id rerum. Quaerat eaque qui consectetur exercitationem. Doloremque voluptatem eos et blanditiis ducimus dolorem. Ratione et consequatur quibusdam eum non provident est porro. Dolor reiciendis ut quia natus sed error eveniet est. Voluptates dolor dolore error.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2-heading">necessitatibus totam similique</h2>

                            </a>
                        </header>
                        <p class="Card-description">Veritatis explicabo quia occaecati blanditiis quia. Vel vel suscipit voluptatem sed totam suscipit. Quod ullam quia omnis minima voluptas aspernatur dolorem aut sit. Porro odit laboriosam rerum quisquam reprehenderit tempora.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3-heading">minima eos unde</h2>

                            </a>
                        </header>
                        <p class="Card-description">Earum sed aut fugiat ad consequuntur. Enim aspernatur consequatur accusantium illum laborum error ea voluptatem qui. Et eum rerum nobis a. Molestias et qui quos aut voluptatem beatae dolor aut. Harum dolore voluptatibus.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0b-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0b-heading">provident dolor et</h2>

                            </a>
                        </header>
                        <p class="Card-description">Aliquid earum nam. Rerum eos explicabo. Error ea id non recusandae sed et fugit architecto laudantium.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1b-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1b-heading">praesentium suscipit ea</h2>

                            </a>
                        </header>
                        <p class="Card-description">Et consequatur eos quas eius odit consectetur id rerum. Quaerat eaque qui consectetur exercitationem. Doloremque voluptatem eos et blanditiis ducimus dolorem. Ratione et consequatur quibusdam eum non provident est porro. Dolor reiciendis ut quia natus sed error eveniet est. Voluptates dolor dolore error.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2b-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2b-heading">necessitatibus totam similique</h2>

                            </a>
                        </header>
                        <p class="Card-description">Veritatis explicabo quia occaecati blanditiis quia. Vel vel suscipit voluptatem sed totam suscipit. Quod ullam quia omnis minima voluptas aspernatur dolorem aut sit. Porro odit laboriosam rerum quisquam reprehenderit tempora.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3b-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3b-heading">minima eos unde</h2>

                            </a>
                        </header>
                        <p class="Card-description">Earum sed aut fugiat ad consequuntur. Enim aspernatur consequatur accusantium illum laborum error ea voluptatem qui. Et eum rerum nobis a. Molestias et qui quos aut voluptatem beatae dolor aut. Harum dolore voluptatibus.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0c-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0c-heading">provident dolor et</h2>

                            </a>
                        </header>
                        <p class="Card-description">Aliquid earum nam. Rerum eos explicabo. Error ea id non recusandae sed et fugit architecto laudantium.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1c-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1c-heading">praesentium suscipit ea</h2>

                            </a>
                        </header>
                        <p class="Card-description">Et consequatur eos quas eius odit consectetur id rerum. Quaerat eaque qui consectetur exercitationem. Doloremque voluptatem eos et blanditiis ducimus dolorem. Ratione et consequatur quibusdam eum non provident est porro. Dolor reiciendis ut quia natus sed error eveniet est. Voluptates dolor dolore error.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2c-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2c-heading">necessitatibus totam similique</h2>

                            </a>
                        </header>
                        <p class="Card-description">Veritatis explicabo quia occaecati blanditiis quia. Vel vel suscipit voluptatem sed totam suscipit. Quod ullam quia omnis minima voluptas aspernatur dolorem aut sit. Porro odit laboriosam rerum quisquam reprehenderit tempora.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3c-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3c-heading">minima eos unde</h2>

                            </a>
                        </header>
                        <p class="Card-description">Earum sed aut fugiat ad consequuntur. Enim aspernatur consequatur accusantium illum laborum error ea voluptatem qui. Et eum rerum nobis a. Molestias et qui quos aut voluptatem beatae dolor aut. Harum dolore voluptatibus.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0d-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0d-heading">provident dolor et</h2>

                            </a>
                        </header>
                        <p class="Card-description">Aliquid earum nam. Rerum eos explicabo. Error ea id non recusandae sed et fugit architecto laudantium.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1d-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1d-heading">praesentium suscipit ea</h2>

                            </a>
                        </header>
                        <p class="Card-description">Et consequatur eos quas eius odit consectetur id rerum. Quaerat eaque qui consectetur exercitationem. Doloremque voluptatem eos et blanditiis ducimus dolorem. Ratione et consequatur quibusdam eum non provident est porro. Dolor reiciendis ut quia natus sed error eveniet est. Voluptates dolor dolore error.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2d-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2d-heading">necessitatibus totam similique</h2>

                            </a>
                        </header>
                        <p class="Card-description">Veritatis explicabo quia occaecati blanditiis quia. Vel vel suscipit voluptatem sed totam suscipit. Quod ullam quia omnis minima voluptas aspernatur dolorem aut sit. Porro odit laboriosam rerum quisquam reprehenderit tempora.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3d-heading">
                    <div class="Bar"></div>
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3d-heading">minima eos unde</h2>

                            </a>
                        </header>
                        <p class="Card-description">Earum sed aut fugiat ad consequuntur. Enim aspernatur consequatur accusantium illum laborum error ea voluptatem qui. Et eum rerum nobis a. Molestias et qui quos aut voluptatem beatae dolor aut. Harum dolore voluptatibus.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

    </div>

    <div class="Banner">
        <div class="Banner-content">
            <a href="" class="MegaLink">

            </a>
        </div>
        <!--Banner-content-->
    </div>
    <!--/.Banner-->
    <div class="Hello" role="complementary" aria-labelledby="hello-heading">
        <div class="Hello-container">
            <figure class="Hello-image">
                <img src="https://clearleft-v5.s3.amazonaws.com/uploads/DC.png" alt="Dan Caplin">
                <figcaption>This is Dan</figcaption>
            </figure>
            <div>
                <h3 class="Hello-title Heading Heading--inverted Heading--medium" id="hello-heading">Open the conversation.</h3>
                <div class="Hello-body">

                    <p> Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on + 44(0) 845 838 6163 or <a href="#"> get in touch </a></p>
                </div>
            </div>
        </div>
    </div>
    <!--/.Hello-->

</main>

<footer class="SiteFooter Texture-border Texture-border--top">
    <div class="SiteFooter-container">
        <div class="SiteFooter-callToAction">
            <div class="InputGroup InputGroup--highlight">
                <form action="" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--bump" for="ID2">Get notified with updates</label>
                    <div class="Input InputGroup-combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="Enter email address" id="ID2" />
                        <button type="submit" class="InputGroup-submit">Join the mailing list</button>
                    </div>
                </form>
                <small class="InputGroup-microcopy">Low volume mailing list. Just for events & conference updates. <a href="#">See an example</a></small>
            </div>
            <small class="Heading Heading--context"></small>
        </div>

        <ul class="SiteFooter-icons">
            <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-github.svg" alt="Find us on Github"></a></li>
            <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-instagram.svg" alt="Find us on Instagram"></a></li>
            <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-linkedin.svg" alt="Find us on LinkedIn"></a></li>
            <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-medium.svg" alt="Find us on Medium"></a></li>
            <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-flickr.svg" alt="Find us on Flickr"></a></li>
            <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-instagram.svg" alt="Find us on Instagram"></a></li>
        </ul>
        <!--/.SiteFooter-icons-->

        <nav class="SiteFooter-navigation" aria-label="Site Footer Navigation">
            <ul class="SiteFooter-navigationLinks">
                <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Test Lab</a></li>
                <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Accessibility</a></li>
                <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Cookies</a></li>
                <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Styleguide</a></li>
                <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Jobs</a></li>
            </ul>
            <!--/.SiteFooter-navigationLinks-->
            <div class="SiteFooter-small">
                © 2005‑now Clearleft Ltd. All rights reserved.
            </div>
            <!--/.SiteFooter-small-->
        </nav>
    </div>
    <!--/.Cols-->
</footer>
<!--/.SiteFooter-->
<div class="Background Background--grey">
    {% include '@site-header' %}
    {% include '@masthead' %}
</div>

<main id="main-content">

    <div class="Work">

        <div class="Work-grid">
            {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-grid">
            {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId ~ 'b'
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-grid">
        {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId ~ 'c'
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-grid">
            {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId ~ 'd'
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

    </div>

    {% include '@megalink-banner' %}

    {% include '@hello' %}

</main>

{% include '@site-footer' %}
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "primaryNavModifiers": [
    "--sea-serpent-blue"
  ],
  "logoModifiers": [
    "--sea-serpent-blue"
  ],
  "mastheadTitle": "Case<br>studies.",
  "mastheadModifier": "--chimney",
  "penguinModifier": "--tall",
  "penguinQuestion": "How do you bring more than 700 brands together into one website?",
  "penguinTitle": "Create a new universe.",
  "penguinLinkUrl": "#",
  "penguinLogoSrc": "/assets/img/work/penguin/penguin-logo.svg",
  "penguinLogoAlt": "Penguin logo",
  "ch4Modifier": "--tall",
  "ch4Question": "How do you create a new kind of news service?",
  "ch4Title": "Focus on the intelligent story.",
  "ch4LinkUrl": "#",
  "ch4LogoSrc": "/assets/img/work/ch4/ch4-logo.svg",
  "ch4LogoAlt": "ch4 logo",
  "evoModifier": "--tall",
  "evoQuestion": "How do you reimagine a physical magazine?",
  "evoTitle": "Drive reader engagement.",
  "evoLinkUrl": "#",
  "evoLogoSrc": "/assets/img/work/evo/evo-logo.svg",
  "evoLogoAlt": "evo logo",
  "posts": [
    {
      "cardTitle": "provident dolor et",
      "cardDescription": "Aliquid earum nam. Rerum eos explicabo. Error ea id non recusandae sed et fugit architecto laudantium.",
      "cardId": "card-0"
    },
    {
      "cardTitle": "praesentium suscipit ea",
      "cardDescription": "Et consequatur eos quas eius odit consectetur id rerum. Quaerat eaque qui consectetur exercitationem. Doloremque voluptatem eos et blanditiis ducimus dolorem. Ratione et consequatur quibusdam eum non provident est porro. Dolor reiciendis ut quia natus sed error eveniet est. Voluptates dolor dolore error.",
      "cardId": "card-1"
    },
    {
      "cardTitle": "necessitatibus totam similique",
      "cardDescription": "Veritatis explicabo quia occaecati blanditiis quia. Vel vel suscipit voluptatem sed totam suscipit. Quod ullam quia omnis minima voluptas aspernatur dolorem aut sit. Porro odit laboriosam rerum quisquam reprehenderit tempora.",
      "cardId": "card-2"
    },
    {
      "cardTitle": "minima eos unde",
      "cardDescription": "Earum sed aut fugiat ad consequuntur. Enim aspernatur consequatur accusantium illum laborum error ea voluptatem qui. Et eum rerum nobis a. Molestias et qui quos aut voluptatem beatae dolor aut. Harum dolore voluptatibus.",
      "cardId": "card-3"
    }
  ],
  "helloImgSrc": "https://clearleft-v5.s3.amazonaws.com/uploads/DC.png",
  "helloImgAlt": "Dan Caplin",
  "helloImgText": "This is Dan",
  "helloHeading": "Open the conversation.",
  "helloBody": "\n            <p> Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on + 44(0) 845 838 6163 or <a href =\"#\"> get in touch </a></p>",
  "footerLinks": [
    {
      "title": "Test Lab",
      "url": "#"
    },
    {
      "title": "Accessibility",
      "url": "#"
    },
    {
      "title": "Cookies",
      "url": "#"
    },
    {
      "title": "Styleguide",
      "url": "#"
    },
    {
      "title": "Jobs",
      "url": "#"
    }
  ],
  "socialLinks": [
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-github.svg",
      "alt": "Find us on Github"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-instagram.svg",
      "alt": "Find us on Instagram"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-linkedin.svg",
      "alt": "Find us on LinkedIn"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-medium.svg",
      "alt": "Find us on Medium"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-flickr.svg",
      "alt": "Find us on Flickr"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-instagram.svg",
      "alt": "Find us on Instagram"
    }
  ],
  "inputGroupLabel": "Get notified with updates",
  "inputGroupSubmit": "Join the mailing list",
  "inputGroupID": "ID2",
  "inputGroupPlaceholder": "Enter email address",
  "inputGroupMicrocopy": "Low volume mailing list. Just for events & conference updates. <a href=\"#\">See an example</a>",
  "inputGroupModifiers": "highlight",
  "siteFooterSmall": "© 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.