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

    <header class="SiteHeader">

        <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" 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">
                    <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">molestias veritatis esse</h2>

                            </a>
                        </header>
                        <p class="Card-description">Ratione magni dignissimos cum. Fuga non nesciunt animi harum nobis. Itaque facere a.</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">
                    <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">ratione corporis amet</h2>

                            </a>
                        </header>
                        <p class="Card-description">Illo doloribus sed voluptates maxime velit dicta. Sunt dignissimos autem incidunt vero veniam. Suscipit ex molestiae et aut quos blanditiis velit.</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">
                    <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">incidunt ullam quia</h2>

                            </a>
                        </header>
                        <p class="Card-description">Voluptatem sit nulla nesciunt odit in. Quaerat esse commodi accusantium deleniti aliquid asperiores. Saepe hic ea.</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">
                    <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">sequi qui doloribus</h2>

                            </a>
                        </header>
                        <p class="Card-description">Maxime sunt reiciendis at sint et. Aut molestiae officia ut commodi minima facere. Amet nihil at eligendi eos et aspernatur totam. Quo quod est officiis eaque rem.</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" aria-labelledby="card-0b-heading">
                    <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">molestias veritatis esse</h2>

                            </a>
                        </header>
                        <p class="Card-description">Ratione magni dignissimos cum. Fuga non nesciunt animi harum nobis. Itaque facere a.</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">
                    <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">ratione corporis amet</h2>

                            </a>
                        </header>
                        <p class="Card-description">Illo doloribus sed voluptates maxime velit dicta. Sunt dignissimos autem incidunt vero veniam. Suscipit ex molestiae et aut quos blanditiis velit.</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">
                    <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">incidunt ullam quia</h2>

                            </a>
                        </header>
                        <p class="Card-description">Voluptatem sit nulla nesciunt odit in. Quaerat esse commodi accusantium deleniti aliquid asperiores. Saepe hic ea.</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">
                    <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">sequi qui doloribus</h2>

                            </a>
                        </header>
                        <p class="Card-description">Maxime sunt reiciendis at sint et. Aut molestiae officia ut commodi minima facere. Amet nihil at eligendi eos et aspernatur totam. Quo quod est officiis eaque rem.</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" aria-labelledby="card-0c-heading">
                    <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">molestias veritatis esse</h2>

                            </a>
                        </header>
                        <p class="Card-description">Ratione magni dignissimos cum. Fuga non nesciunt animi harum nobis. Itaque facere a.</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">
                    <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">ratione corporis amet</h2>

                            </a>
                        </header>
                        <p class="Card-description">Illo doloribus sed voluptates maxime velit dicta. Sunt dignissimos autem incidunt vero veniam. Suscipit ex molestiae et aut quos blanditiis velit.</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">
                    <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">incidunt ullam quia</h2>

                            </a>
                        </header>
                        <p class="Card-description">Voluptatem sit nulla nesciunt odit in. Quaerat esse commodi accusantium deleniti aliquid asperiores. Saepe hic ea.</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">
                    <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">sequi qui doloribus</h2>

                            </a>
                        </header>
                        <p class="Card-description">Maxime sunt reiciendis at sint et. Aut molestiae officia ut commodi minima facere. Amet nihil at eligendi eos et aspernatur totam. Quo quod est officiis eaque rem.</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" aria-labelledby="card-0d-heading">
                    <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">molestias veritatis esse</h2>

                            </a>
                        </header>
                        <p class="Card-description">Ratione magni dignissimos cum. Fuga non nesciunt animi harum nobis. Itaque facere a.</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">
                    <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">ratione corporis amet</h2>

                            </a>
                        </header>
                        <p class="Card-description">Illo doloribus sed voluptates maxime velit dicta. Sunt dignissimos autem incidunt vero veniam. Suscipit ex molestiae et aut quos blanditiis velit.</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">
                    <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">incidunt ullam quia</h2>

                            </a>
                        </header>
                        <p class="Card-description">Voluptatem sit nulla nesciunt odit in. Quaerat esse commodi accusantium deleniti aliquid asperiores. Saepe hic ea.</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">
                    <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">sequi qui doloribus</h2>

                            </a>
                        </header>
                        <p class="Card-description">Maxime sunt reiciendis at sint et. Aut molestiae officia ut commodi minima facere. Amet nihil at eligendi eos et aspernatur totam. Quo quod est officiis eaque rem.</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">
    <div class="SiteFooter-container Cols Cols--half">
        <div class="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>
                </form>
            </div>
            <small class="Heading Heading--context"></small>
        </div>
        <!--/.SiteFooter-container-->
        <div class="Cols-item">
            <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-->
                <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 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-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/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-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/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-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/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": "molestias veritatis esse",
      "cardDescription": "Ratione magni dignissimos cum. Fuga non nesciunt animi harum nobis. Itaque facere a.",
      "cardId": "card-0"
    },
    {
      "cardTitle": "ratione corporis amet",
      "cardDescription": "Illo doloribus sed voluptates maxime velit dicta. Sunt dignissimos autem incidunt vero veniam. Suscipit ex molestiae et aut quos blanditiis velit.",
      "cardId": "card-1"
    },
    {
      "cardTitle": "incidunt ullam quia",
      "cardDescription": "Voluptatem sit nulla nesciunt odit in. Quaerat esse commodi accusantium deleniti aliquid asperiores. Saepe hic ea.",
      "cardId": "card-2"
    },
    {
      "cardTitle": "sequi qui doloribus",
      "cardDescription": "Maxime sunt reiciendis at sint et. Aut molestiae officia ut commodi minima facere. Amet nihil at eligendi eos et aspernatur totam. Quo quod est officiis eaque rem.",
      "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"
    }
  ],
  "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.