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

    <header class="SiteHeader" role="banner">

        <a href="" class="Logo Logo--sea-serpent-blue" title="Home">
            <svg width="152" height="50" viewBox="1 2 152 50">
        <g fill="none" fill-rule="evenodd">
            <path class="Logo-text" fill="#25333A" fill-rule="nonzero" d="M152.5 27.54v5.36h-2.36c-5.52 0-8.55-3.31-8.55-9.31v-6.78h-7.36V32.9h-5.61V16.81h-3.09l-.06-4.65h3.15v-.57c0-6 3-9.31 8.55-9.31h2.36v5.36h-2.36c-2 0-2.95 1.29-2.95 4v.57h7.36v-3.9l5.61-3.55v7.4h4v4.65h-4v6.78c0 2.66 1 4 2.95 4l2.36-.05zM77 11.85h5.61v21H77v-2c-1.677 1.74-4.015 2.686-6.43 2.6-5.66 0-10.09-4.84-10.09-11s4.43-11 10.09-11c2.396-.12 4.73.777 6.43 2.47v-2.07zm0 10.5c0-3.54-2.36-6.11-5.61-6.11-3.25 0-5.56 2.57-5.56 6.11 0 3.54 2.34 6.11 5.56 6.11 3.22 0 5.61-2.51 5.61-6.11zm12.88-8.67v-1.83h-5.37v21h5.6v-9.46c0-4.5.77-6.78 5-6.78h1.5v-5.4h-.23c-2.95 0-5.22.87-6.54 2.47h.04zM98 32.83h5.59V2.44H98v30.39zM17 8.1c3.178.02 6.098 1.75 7.64 4.53l.12.21.2-.13 4.83-3.07.2-.13-.13-.2c-2.834-4.3-7.642-6.88-12.79-6.87-4.122-.062-8.095 1.538-11.025 4.44-2.93 2.9-4.567 6.858-4.545 10.98-.027 4.137 1.612 8.112 4.55 11.026 2.936 2.914 6.923 4.523 11.06 4.464 5.11.06 9.91-2.455 12.77-6.69l.13-.19-5.2-3.47-.13.2c-1.56 2.736-4.46 4.432-7.61 4.45-5.16 0-9.2-4.32-9.2-9.84 0-4.75 3.43-9.71 9.13-9.71zm14.57 24.73h5.59V2.44h-5.59v30.39zm94-10.51c0 .58 0 1.15-.09 1.69v.47h-14.8c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.34-11.12 10.55-11.12 5.88-.09 10.01 4.48 10.03 11.01h.02zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22zm-60.73 2.22c0 .58 0 1.15-.09 1.69v.47H44.34c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.37-11.21 10.54-11.21 5.89 0 10.02 4.57 10.04 11.1zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22z"></path>
            <path class="Logo-streak" fill="#23D8A0" d="M151.8 44c-.083-.487-.365-.918-.78-1.187-.413-.27-.92-.354-1.4-.233-1.067.35-2.204.433-3.31.24-1.39-.18-2.86-.31-4.29-.46-2.39-.26-4.79-.47-7.2-.66-2.63-.2-5.27-.34-7.9-.52-2.48-.17-4.95-.39-7.43-.51-5.24-.253-10.483-.45-15.73-.59-4.37-.15-19.57-.32-23.95-.26-3.07 0-6.13.14-9.19.18-4.06 0-18.94.34-23 .58-4.33.23-8.68.38-13 .68-4 .27-8 .45-11.94.74-.906.02-1.81.115-2.7.28-2.35 0-4.43.22-6.52.33-1.66.09-3.36.13-5 .38v0c-.69 0-1-.4-2.07-.26-1.07.14-2.07.46-2.12 1.06-.55.12 0 .41-.62.52v.47c.43.2.56.41 0 .66v.19c.34-.14.39 0 .56.07v.39c-.4.19-.16.37-.09.54.07.17.5.44.42.71-.086.49.11.984.51 1.28v.23c.11.7 1.05 1.28 1.18 2 .1.55 1 1 2.31.89 1.12-.06 1.51-.53 2.53-.68.19 0 .81-.09 1-.1 4.23-.28 8.46-.59 12.66-1 1.24-.11 2.58-.08 3.72-.3 1.5-.29 3.07-.29 4.59-.5 2.867-.348 5.752-.515 8.64-.5 2.41 0 4.77-.26 7.16-.36 1.33-.06 2.66.06 4-.08.518-.097 1.043-.144 1.57-.14 1.43.09 13.66-.12 15.1-.11 2.79 0 5.58-.14 8.36-.17 3.3-.06 17.36-.17 20.68 0 1.13 0 2.31.21 3.37.15 3.11-.17 6.19.1 9.28.17 2.71.06 5.39.31 8.11.39 2.72.08 5.22.23 7.8.51 1 .11 2.08.25 3.15.35.84.08 1.41-.21 2.21-.11 2 .27 4.11.46 6.21.61 1.088.028 2.173.122 3.25.28 1.56.326 3.14.547 4.73.66l1 .36c.856.423 1.835.526 2.76.29.523-.344.77-.984.61-1.59v-.18c.1-.15.19-.31.09-.48.26-.1.28-.22.21-.37.25-.57.71-1.11.44-1.74-.11-.25-.39-.62.42-.79v-.47c-.39-.05-.43-.19-.51-.32.04-.52.1-1.02.12-1.52zm-73.48 1.26c-.063-.008-.127-.008-.19 0 .063-.008.127-.008.19 0z"></path>
        </g>
    </svg>
        </a>

        <nav class="PrimaryNavigation PrimaryNavigation--sea-serpent-blue" data-component="PrimaryNavigation">
            <button class="PrimaryNavigation-menu" aria-hidden="true">Menu</button>
            <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">

        <div class="Masthead-primary">

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

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

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

<main>

    <div class="Work">

        <div class="Work-grid">
            <div class="Work-gridItem">
                <article class="Card Card--home Card--logo">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">quibusdam corporis sed</h3>
                            </a>
                        </header>
                        <p class="Card-description">Tenetur aut sunt commodi laudantium et atque nulla ipsum ipsa. Ducimus et accusamus voluptates est aut dolor. Odio temporibus aut et mollitia quia libero.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">unde earum est</h3>
                            </a>
                        </header>
                        <p class="Card-description">Qui hic aspernatur est et. Voluptas rerum maiores qui nihil aut aliquid ea ab voluptatem. Aliquid amet eum rerum in architecto beatae voluptas.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">iste ab libero</h3>
                            </a>
                        </header>
                        <p class="Card-description">Maxime explicabo et aut in et est error. Aut debitis beatae a aut occaecati doloribus autem nobis sint. Adipisci accusantium magnam officiis delectus autem et dolor. Officiis dolorum in a dicta ipsam. Totam itaque perferendis cum.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">aspernatur ut voluptatem</h3>
                            </a>
                        </header>
                        <p class="Card-description">Quaerat sequi soluta ullam et velit aut autem qui ex. Quidem pariatur amet autem et autem accusamus quia. Et atque iste quas corrupti veritatis ea qui. Magni odio et cum est molestias libero qui animi. Veritatis esse aliquid eius
                            quisquam dignissimos. Omnis laborum et accusantium voluptates qui quaerat eos.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-featured">
            <div class="PenguinProject PenguinProject--tall">

                <div class="PenguinProject-wrapper">

                    <div class="PenguinProject-content">

                        <div class="PenguinProject-question">How do you bring more than 700 brands together into one website?</div>

                        <a href="#">
                            <h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">Create a new universe.</h2>
                        </a>

                        <img class="PenguinProject-logo" src="/assets/img/work/penguin/penguin-logo.svg" alt="Penguin logo">

                    </div>

                </div>
            </div>
            <!--./PenguinProject-->
        </div>

        <div class="Work-grid">
            <div class="Work-gridItem">
                <article class="Card Card--home Card--logo">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">quibusdam corporis sed</h3>
                            </a>
                        </header>
                        <p class="Card-description">Tenetur aut sunt commodi laudantium et atque nulla ipsum ipsa. Ducimus et accusamus voluptates est aut dolor. Odio temporibus aut et mollitia quia libero.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">unde earum est</h3>
                            </a>
                        </header>
                        <p class="Card-description">Qui hic aspernatur est et. Voluptas rerum maiores qui nihil aut aliquid ea ab voluptatem. Aliquid amet eum rerum in architecto beatae voluptas.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">iste ab libero</h3>
                            </a>
                        </header>
                        <p class="Card-description">Maxime explicabo et aut in et est error. Aut debitis beatae a aut occaecati doloribus autem nobis sint. Adipisci accusantium magnam officiis delectus autem et dolor. Officiis dolorum in a dicta ipsam. Totam itaque perferendis cum.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">aspernatur ut voluptatem</h3>
                            </a>
                        </header>
                        <p class="Card-description">Quaerat sequi soluta ullam et velit aut autem qui ex. Quidem pariatur amet autem et autem accusamus quia. Et atque iste quas corrupti veritatis ea qui. Magni odio et cum est molestias libero qui animi. Veritatis esse aliquid eius
                            quisquam dignissimos. Omnis laborum et accusantium voluptates qui quaerat eos.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-featured">
            <div class="Ch4Project Ch4Project--tall">

                <div class="Ch4Project-wrapper">

                    <div class="Ch4Project-content">

                        <div class="Ch4Project-question">How do you create a new kind of news service?</div>

                        <a href="#">
                            <h2 class="Ch4Project-title Heading Heading--secondary Heading--inverted">Focus on the intelligent story.</h2>
                        </a>

                        <img class="Ch4Project-logo" src="/assets/img/work/ch4/ch4-logo.svg" alt="ch4 logo">

                    </div>

                </div>
            </div>
            <!--./Ch4Project-->
        </div>

        <div class="Work-grid">
            <div class="Work-gridItem">
                <article class="Card Card--home Card--logo">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">quibusdam corporis sed</h3>
                            </a>
                        </header>
                        <p class="Card-description">Tenetur aut sunt commodi laudantium et atque nulla ipsum ipsa. Ducimus et accusamus voluptates est aut dolor. Odio temporibus aut et mollitia quia libero.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">unde earum est</h3>
                            </a>
                        </header>
                        <p class="Card-description">Qui hic aspernatur est et. Voluptas rerum maiores qui nihil aut aliquid ea ab voluptatem. Aliquid amet eum rerum in architecto beatae voluptas.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">iste ab libero</h3>
                            </a>
                        </header>
                        <p class="Card-description">Maxime explicabo et aut in et est error. Aut debitis beatae a aut occaecati doloribus autem nobis sint. Adipisci accusantium magnam officiis delectus autem et dolor. Officiis dolorum in a dicta ipsam. Totam itaque perferendis cum.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">aspernatur ut voluptatem</h3>
                            </a>
                        </header>
                        <p class="Card-description">Quaerat sequi soluta ullam et velit aut autem qui ex. Quidem pariatur amet autem et autem accusamus quia. Et atque iste quas corrupti veritatis ea qui. Magni odio et cum est molestias libero qui animi. Veritatis esse aliquid eius
                            quisquam dignissimos. Omnis laborum et accusantium voluptates qui quaerat eos.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-featured">
            <div class="EvoProject EvoProject--tall">

                <div class="EvoProject-wrapper">

                    <div class="EvoProject-content">

                        <div class="EvoProject-question">How do you reimagine a physical magazine?</div>

                        <a href="#">
                            <h2 class="EvoProject-title Heading Heading--secondary Heading--inverted">Drive reader engagement.</h2>
                        </a>

                        <img class="EvoProject-logo" src="/assets/img/work/evo/evo-logo.svg" alt="evo logo">

                    </div>

                </div>
            </div>
            <!--./EvoProject-->
        </div>

        <div class="Work-grid">
            <div class="Work-gridItem">
                <article class="Card Card--home Card--logo">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">quibusdam corporis sed</h3>
                            </a>
                        </header>
                        <p class="Card-description">Tenetur aut sunt commodi laudantium et atque nulla ipsum ipsa. Ducimus et accusamus voluptates est aut dolor. Odio temporibus aut et mollitia quia libero.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">unde earum est</h3>
                            </a>
                        </header>
                        <p class="Card-description">Qui hic aspernatur est et. Voluptas rerum maiores qui nihil aut aliquid ea ab voluptatem. Aliquid amet eum rerum in architecto beatae voluptas.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">iste ab libero</h3>
                            </a>
                        </header>
                        <p class="Card-description">Maxime explicabo et aut in et est error. Aut debitis beatae a aut occaecati doloribus autem nobis sint. Adipisci accusantium magnam officiis delectus autem et dolor. Officiis dolorum in a dicta ipsam. Totam itaque perferendis cum.</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">
                    <img src="http://clearleft-v5.s3.amazonaws.com/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h3 class="Card-title">aspernatur ut voluptatem</h3>
                            </a>
                        </header>
                        <p class="Card-description">Quaerat sequi soluta ullam et velit aut autem qui ex. Quidem pariatur amet autem et autem accusamus quia. Et atque iste quas corrupti veritatis ea qui. Magni odio et cum est molestias libero qui animi. Veritatis esse aliquid eius
                            quisquam dignissimos. Omnis laborum et accusantium voluptates qui quaerat eos.</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">
        <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">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">
    <div class="SiteFooter-container Cols">
        <div class="Cols-half Cols-item">
            <div class="InputGroup">
                <form action="https://tinyletter.com/clearleft" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--body" for="">Feed your curiosity.</label>
                    <div class="Input InputGroup--combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="" id="" />
                        <button type="submit" class="InputGroup-submit">Get the Clearletter</button>
                    </div>
                    <!--/.InputGroup-->
                </form>
            </div>
            <!--/.InputGroup-->
            <small class="Heading Heading--context"></small>
        </div>
        <!--/.SiteFooter-container-->
        <div class="Cols-half Cols-item">
            <nav class="SiteFooter-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-->
                <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>
                </ul>
                <!--/.SiteFooter-icons-->
            </nav>
        </div>
        <!--/.Cols-half-->
        <div class="Cols-item SiteFooter-small">
            &copy; 2005‑now Clearleft Ltd. All rights reserved.
        </div>
        <!--/.SiteFooter-small-->
    </div>
    <!--/.Cols-->
</footer>
<!--/.SiteFooter-->
<div class="Background Background--grey">
    {% include '@site-header' %}
    {% include '@masthead' %}
</div>

<main>

    <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/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLink: true,
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-featured">
            {% include '@penguin-project' %}
        </div>

        <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/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLink: true,
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-featured">
            {% include '@ch4-project' %}
        </div>

        <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/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLink: true,
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-featured">
            {% include '@evo-project' %}
        </div>

        <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/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLink: true,
                } %}
            </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": "quibusdam corporis sed",
      "cardDescription": "Tenetur aut sunt commodi laudantium et atque nulla ipsum ipsa. Ducimus et accusamus voluptates est aut dolor. Odio temporibus aut et mollitia quia libero."
    },
    {
      "cardTitle": "unde earum est",
      "cardDescription": "Qui hic aspernatur est et. Voluptas rerum maiores qui nihil aut aliquid ea ab voluptatem. Aliquid amet eum rerum in architecto beatae voluptas."
    },
    {
      "cardTitle": "iste ab libero",
      "cardDescription": "Maxime explicabo et aut in et est error. Aut debitis beatae a aut occaecati doloribus autem nobis sint. Adipisci accusantium magnam officiis delectus autem et dolor. Officiis dolorum in a dicta ipsam. Totam itaque perferendis cum."
    },
    {
      "cardTitle": "aspernatur ut voluptatem",
      "cardDescription": "Quaerat sequi soluta ullam et velit aut autem qui ex. Quidem pariatur amet autem et autem accusamus quia. Et atque iste quas corrupti veritatis ea qui. Magni odio et cum est molestias libero qui animi. Veritatis esse aliquid eius quisquam dignissimos. Omnis laborum et accusantium voluptates qui quaerat eos."
    }
  ],
  "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>\n        ",
  "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"
    }
  ],
  "inputGroupLabel": "Feed your curiosity.",
  "inputGroupSubmit": "Get the Clearletter",
  "inputModifier": "--combo",
  "siteFooterSmall": "&copy; 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.