<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">
            <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">

        <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">velit cum doloribus</h3>
                            </a>
                        </header>
                        <p class="Card-description">Hic quae recusandae corrupti expedita velit qui. Cumque exercitationem autem dolore sed eum cupiditate aut accusamus. Assumenda similique asperiores. Unde eos asperiores fugit. Rerum ut excepturi.</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">omnis eaque nesciunt</h3>
                            </a>
                        </header>
                        <p class="Card-description">Voluptatum quia et rerum. Voluptatem consequatur reiciendis et distinctio suscipit sed. Modi atque reiciendis sit neque sunt commodi reiciendis officiis quam. Rerum natus cum corporis eligendi sapiente optio qui nobis qui. Minima
                            vel qui cum quibusdam harum voluptatem rem quas optio.</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">exercitationem corporis animi</h3>
                            </a>
                        </header>
                        <p class="Card-description">Aut commodi consectetur eius qui molestiae quia dolorem illo. Adipisci rem aliquam eum praesentium repellat tempora culpa. Quibusdam non earum error quam dolorum odit debitis. Laborum officia autem aut dolorem ut voluptatibus.</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 magnam dolorum</h3>
                            </a>
                        </header>
                        <p class="Card-description">Corporis illo quas earum cum sit repudiandae. Vel ut sit fuga. Corrupti soluta minus unde veniam ut. Nemo in iste neque. Omnis eum est qui. Sunt tenetur accusantium.</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>

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

                        <a href="#" class="MegaLink MegaLink--inverted">Read the case study</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">velit cum doloribus</h3>
                            </a>
                        </header>
                        <p class="Card-description">Hic quae recusandae corrupti expedita velit qui. Cumque exercitationem autem dolore sed eum cupiditate aut accusamus. Assumenda similique asperiores. Unde eos asperiores fugit. Rerum ut excepturi.</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">omnis eaque nesciunt</h3>
                            </a>
                        </header>
                        <p class="Card-description">Voluptatum quia et rerum. Voluptatem consequatur reiciendis et distinctio suscipit sed. Modi atque reiciendis sit neque sunt commodi reiciendis officiis quam. Rerum natus cum corporis eligendi sapiente optio qui nobis qui. Minima
                            vel qui cum quibusdam harum voluptatem rem quas optio.</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">exercitationem corporis animi</h3>
                            </a>
                        </header>
                        <p class="Card-description">Aut commodi consectetur eius qui molestiae quia dolorem illo. Adipisci rem aliquam eum praesentium repellat tempora culpa. Quibusdam non earum error quam dolorum odit debitis. Laborum officia autem aut dolorem ut voluptatibus.</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 magnam dolorum</h3>
                            </a>
                        </header>
                        <p class="Card-description">Corporis illo quas earum cum sit repudiandae. Vel ut sit fuga. Corrupti soluta minus unde veniam ut. Nemo in iste neque. Omnis eum est qui. Sunt tenetur accusantium.</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>

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

                        <a href="#" class="MegaLink MegaLink--inverted">Read the case study</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">velit cum doloribus</h3>
                            </a>
                        </header>
                        <p class="Card-description">Hic quae recusandae corrupti expedita velit qui. Cumque exercitationem autem dolore sed eum cupiditate aut accusamus. Assumenda similique asperiores. Unde eos asperiores fugit. Rerum ut excepturi.</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">omnis eaque nesciunt</h3>
                            </a>
                        </header>
                        <p class="Card-description">Voluptatum quia et rerum. Voluptatem consequatur reiciendis et distinctio suscipit sed. Modi atque reiciendis sit neque sunt commodi reiciendis officiis quam. Rerum natus cum corporis eligendi sapiente optio qui nobis qui. Minima
                            vel qui cum quibusdam harum voluptatem rem quas optio.</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">exercitationem corporis animi</h3>
                            </a>
                        </header>
                        <p class="Card-description">Aut commodi consectetur eius qui molestiae quia dolorem illo. Adipisci rem aliquam eum praesentium repellat tempora culpa. Quibusdam non earum error quam dolorum odit debitis. Laborum officia autem aut dolorem ut voluptatibus.</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 magnam dolorum</h3>
                            </a>
                        </header>
                        <p class="Card-description">Corporis illo quas earum cum sit repudiandae. Vel ut sit fuga. Corrupti soluta minus unde veniam ut. Nemo in iste neque. Omnis eum est qui. Sunt tenetur accusantium.</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>

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

                        <a href="#" class="MegaLink MegaLink--inverted">Read the case study</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">velit cum doloribus</h3>
                            </a>
                        </header>
                        <p class="Card-description">Hic quae recusandae corrupti expedita velit qui. Cumque exercitationem autem dolore sed eum cupiditate aut accusamus. Assumenda similique asperiores. Unde eos asperiores fugit. Rerum ut excepturi.</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">omnis eaque nesciunt</h3>
                            </a>
                        </header>
                        <p class="Card-description">Voluptatum quia et rerum. Voluptatem consequatur reiciendis et distinctio suscipit sed. Modi atque reiciendis sit neque sunt commodi reiciendis officiis quam. Rerum natus cum corporis eligendi sapiente optio qui nobis qui. Minima
                            vel qui cum quibusdam harum voluptatem rem quas optio.</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">exercitationem corporis animi</h3>
                            </a>
                        </header>
                        <p class="Card-description">Aut commodi consectetur eius qui molestiae quia dolorem illo. Adipisci rem aliquam eum praesentium repellat tempora culpa. Quibusdam non earum error quam dolorum odit debitis. Laborum officia autem aut dolorem ut voluptatibus.</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 magnam dolorum</h3>
                            </a>
                        </header>
                        <p class="Card-description">Corporis illo quas earum cum sit repudiandae. Vel ut sit fuga. Corrupti soluta minus unde veniam ut. Nemo in iste neque. Omnis eum est qui. Sunt tenetur accusantium.</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="" 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": "velit cum doloribus",
      "cardDescription": "Hic quae recusandae corrupti expedita velit qui. Cumque exercitationem autem dolore sed eum cupiditate aut accusamus. Assumenda similique asperiores. Unde eos asperiores fugit. Rerum ut excepturi."
    },
    {
      "cardTitle": "omnis eaque nesciunt",
      "cardDescription": "Voluptatum quia et rerum. Voluptatem consequatur reiciendis et distinctio suscipit sed. Modi atque reiciendis sit neque sunt commodi reiciendis officiis quam. Rerum natus cum corporis eligendi sapiente optio qui nobis qui. Minima vel qui cum quibusdam harum voluptatem rem quas optio."
    },
    {
      "cardTitle": "exercitationem corporis animi",
      "cardDescription": "Aut commodi consectetur eius qui molestiae quia dolorem illo. Adipisci rem aliquam eum praesentium repellat tempora culpa. Quibusdam non earum error quam dolorum odit debitis. Laborum officia autem aut dolorem ut voluptatibus."
    },
    {
      "cardTitle": "unde magnam dolorum",
      "cardDescription": "Corporis illo quas earum cum sit repudiandae. Vel ut sit fuga. Corrupti soluta minus unde veniam ut. Nemo in iste neque. Omnis eum est qui. Sunt tenetur accusantium."
    }
  ],
  "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.