Home

<div class="Background--carribean-green l-pad-after Texture--home">

    <header class="SiteHeader">

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

        <nav class="PrimaryNavigation PrimaryNavigation--inverted PrimaryNavigation--plum" 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="Splash" role="banner">
        <h1 class="Splash-header">We help design leaders get the most from their products, services &amp; teams.</h1>

        <h2 class="Splash-subHeader Heading--medium">Find out <a href="#">who we are</a> or <a href="#">how we can help</a></h2>
    </div>
</div>

<main id="main-content">

    <!-- featured item -->
    <div class="Cols Cols--half">
        <div class="u-vertical-center">

            <article class="Card Card--home Card--logo" aria-labelledby="card-00-heading">
                <img class="Card-logo" src="https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Penguin Random House">
                <div class="Card-primary">
                    <header>
                        <a href="#">
                            <h2 class="Card-title" id="card-00-heading">Create a new universe.</h2>

                        </a>
                    </header>
                    <p class="Card-description">Labore labore animi quaerat sed in corporis libero eius sunt. Deserunt tempore ad ullam voluptatem laudantium est. Dolorem illo nulla voluptas. Deleniti voluptas voluptatibus expedita eos aliquid quidem est. Inventore eius tenetur.</p>
                    <a href="#">Read the case study</a>
                </div>
                <!--/.Card-primary-->
            </article>
            <!--/.Card-->
        </div>
        <div>
            <picture>
                <source srcset="http://via.placeholder.com/1080x1080" media="(min-width: 57.5em)">
                <source srcset="http://via.placeholder.com/800x800" media="(min-width: 42.5em)">
                <img src="http://via.placeholder.com/300x300" alt="" style="width:100%">
            </picture>
        </div>
    </div>

    <!-- Posts -->
    <div class="Background--grey l-pad-before l-pad-after">
        <div class="Container Container--constrained l-pad-before">
            <div class="Cols Cols--gap Cols--one-third">

                <article class="Card " aria-labelledby="post-0-heading">
                    <div class="Bar"></div>
                    <div class="Card-primary">
                        <header>
                            <h2 class="Card-title" id="post-0-heading">Article name here</h2>

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Sunt harum aut voluptatibus illum quibusdam dolor itaque sunt delectus. Voluptatum sit molestiae. Explicabo rem perferendis omnis sunt autem nam magnam ipsam animi. Ea ducimus error unde animi iure itaque. Velit nihil dolor magnam
                            dolor aliquam odio non iusto sit. Velit qui nulla sit cum.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                                <div class="Author-name">Ellen DeVries</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->

                <article class="Card " aria-labelledby="post-1-heading">
                    <div class="Bar"></div>
                    <div class="Card-primary">
                        <header>
                            <h2 class="Card-title" id="post-1-heading">Article name here</h2>

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Eos commodi molestiae eos eveniet eius. Dolores assumenda corporis. Ut dolorem adipisci maxime.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                                <div class="Author-name">Ellen DeVries</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->

                <article class="Card " aria-labelledby="post-2-heading">
                    <div class="Bar"></div>
                    <div class="Card-primary">
                        <header>
                            <h2 class="Card-title" id="post-2-heading">Article name here</h2>

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Eaque explicabo ab pariatur sit consequatur quos. Est minima corrupti ea ex voluptatem accusamus. Blanditiis esse ea ex quos ut tempora.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                                <div class="Author-name">Ellen DeVries</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
    </div>

    <!-- standard item -->
    <div class="Cols Cols--half">
        <div class="u-vertical-center">

            <article class="Card Card--home Card--logo Card--vertical" aria-labelledby="card-01-heading">
                <img class="Card-logo" src="https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Penguin Random House">
                <div class="Card-primary">
                    <header>
                        <a href="#">
                            <h2 class="Card-title" id="card-01-heading">Create a new universe.</h2>

                        </a>
                    </header>
                    <p class="Card-description">Labore labore animi quaerat sed in corporis libero eius sunt. Deserunt tempore ad ullam voluptatem laudantium est. Dolorem illo nulla voluptas. Deleniti voluptas voluptatibus expedita eos aliquid quidem est. Inventore eius tenetur.</p>
                    <a href="#">Read the case study</a>
                </div>
                <!--/.Card-primary-->
            </article>
            <!--/.Card-->
        </div>
        <div>
            <picture>
                <source srcset="http://via.placeholder.com/1080x1080" media="(min-width: 57.5em)">
                <source srcset="http://via.placeholder.com/800x800" media="(min-width: 42.5em)">
                <img src="http://via.placeholder.com/300x300" alt="" style="width:100%">
            </picture>
        </div>
    </div>

    <!-- standard item -->
    <div class="Cols Cols--half Cols--reverse">
        <div class="u-vertical-center">

            <article class="Card Card--home Card--logo Card--vertical" aria-labelledby="card-02-heading">
                <img class="Card-logo" src="https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Penguin Random House">
                <div class="Card-primary">
                    <header>
                        <a href="#">
                            <h2 class="Card-title" id="card-02-heading">Create a new universe.</h2>

                        </a>
                    </header>
                    <p class="Card-description">Labore labore animi quaerat sed in corporis libero eius sunt. Deserunt tempore ad ullam voluptatem laudantium est. Dolorem illo nulla voluptas. Deleniti voluptas voluptatibus expedita eos aliquid quidem est. Inventore eius tenetur.</p>
                    <a href="#">Read the case study</a>
                </div>
                <!--/.Card-primary-->
            </article>
            <!--/.Card-->
        </div>
        <div>
            <picture>
                <source srcset="http://via.placeholder.com/1080x1080" media="(min-width: 57.5em)">
                <source srcset="http://via.placeholder.com/800x800" media="(min-width: 42.5em)">
                <img src="http://via.placeholder.com/300x300" alt="" style="width:100%">
            </picture>
        </div>
    </div>

    <!-- helping to -->
    <div class="Background--grey l-pad-before l-pad-after">
        <div class="l-pad-before">
            <h3 class="Heading Heading--medium u-center">We’re currently helping to&hellip;</h3>
        </div>

        <div class="Container Container--constrained">
            <div class="Cols Cols--gap Cols--one-third">
                <div class="InfoCard">
                    <div class="SpeechBubble">
                        At eum laborum laborum officiis dolores dolor voluptatem commodi non voluptas et.
                    </div>
                    <div class="Author">
                        <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                        <div class="Author-name">Ellen DeVries</div>
                    </div>
                    <!--/.Author-->
                </div>
                <div class="InfoCard">
                    <div class="SpeechBubble">
                        Assumenda optio commodi occaecati sed eius nihil quod hic odio error corrupti.
                    </div>
                    <div class="Author">
                        <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                        <div class="Author-name">Ellen DeVries</div>
                    </div>
                    <!--/.Author-->
                </div>
                <div class="InfoCard">
                    <div class="SpeechBubble">
                        Illo qui adipisci qui ex veniam modi pariatur temporibus voluptate molestias doloribus.
                    </div>
                    <div class="Author">
                        <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                        <div class="Author-name">Ellen DeVries</div>
                    </div>
                    <!--/.Author-->
                </div>
                <div class="InfoCard">
                    <div class="SpeechBubble">
                        Quidem odio accusamus itaque assumenda aut et vero nam nihil quo aut.
                    </div>
                    <div class="Author">
                        <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                        <div class="Author-name">Ellen DeVries</div>
                    </div>
                    <!--/.Author-->
                </div>
                <div class="InfoCard">
                    <div class="SpeechBubble">
                        Nam aspernatur qui laudantium quo animi hic nam assumenda dicta dolores quibusdam.
                    </div>
                    <div class="Author">
                        <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                        <div class="Author-name">Ellen DeVries</div>
                    </div>
                    <!--/.Author-->
                </div>
                <div class="InfoCard">
                    <div class="SpeechBubble">
                        Incidunt dolore id facere in id libero cum magnam qui nihil deserunt.
                    </div>
                    <div class="Author">
                        <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                        <div class="Author-name">Ellen DeVries</div>
                    </div>
                    <!--/.Author-->
                </div>
            </div>
        </div>
    </div>

</main>

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

<footer class="SiteFooter">
    <div class="SiteFooter-container">
        <div class="SiteFooter-callToAction">
            <div class="InputGroup">
                <form action="" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--bump" for="">Get notified with updates</label>
                    <div class="Input InputGroup-combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="" id="" />
                        <button type="submit" class="InputGroup-submit">Join the mailing list</button>
                    </div>
                </form>
            </div>
            <small class="Heading Heading--context"></small>
        </div>

        <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 class="SiteFooter-small">
            © 2005‑now Clearleft Ltd. All rights reserved.
        </div>
        <!--/.SiteFooter-small-->
    </div>
    <!--/.Cols-->
</footer>
<!--/.SiteFooter-->
<div class="Background--carribean-green l-pad-after Texture--home">
    {% include '@site-header' %}

    <div class="Splash" role="banner">
        <h1 class="Splash-header">{{ homeHeader }}</h1>

        <h2 class="Splash-subHeader Heading--medium">{{ homeSubheader }}</h2>
    </div>
</div>

<main id="main-content">

    <!-- featured item -->
    <div class="Cols Cols--half">
        <div class="u-vertical-center">
            {% include '@card' with {
                cardModifiers: ['--home', '--logo'],
                cardLogoSrc: 'https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                cardLogoAlt: 'Penguin Random House',
                cardTitle: homeCardTitle,
                cardDescription: homeCardDescription,
                cardUrl: '#',
                cardLinkText: 'Read the case study',
                cardId: 'card-00'
            } %}
        </div>
        <div>
            <picture>
                <source srcset="http://via.placeholder.com/1080x1080" media="(min-width: 57.5em)">
                <source srcset="http://via.placeholder.com/800x800" media="(min-width: 42.5em)">
                <img src="http://via.placeholder.com/300x300" alt=""  style="width:100%">
            </picture>
        </div>
    </div>

    <!-- Posts -->
    <div class="Background--grey l-pad-before l-pad-after">
        <div class="Container Container--constrained l-pad-before">
            <div class="Cols Cols--gap Cols--one-third">
                {% for post in homeBlogPosts %}
                {% include '@card' with post %}
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- standard item -->
    <div class="Cols Cols--half">
        <div class="u-vertical-center">
            {% include '@card' with {
                cardModifiers: ['--home', '--logo', '--vertical'],
                cardLogoSrc: 'https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                cardLogoAlt: 'Penguin Random House',
                cardTitle: homeCardTitle,
                cardDescription: homeCardDescription,
                cardUrl: '#',
                cardLinkText: 'Read the case study',
                cardId: 'card-01'
            } %}
        </div>
        <div>
            <picture>
                <source srcset="http://via.placeholder.com/1080x1080" media="(min-width: 57.5em)">
                <source srcset="http://via.placeholder.com/800x800" media="(min-width: 42.5em)">
                <img src="http://via.placeholder.com/300x300" alt="" style="width:100%">
            </picture>
        </div>
    </div>

    <!-- standard item -->
    <div class="Cols Cols--half Cols--reverse">
        <div class="u-vertical-center">
            {% include '@card' with {
                cardModifiers: ['--home', '--logo', '--vertical'],
                cardLogoSrc: 'https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                cardLogoAlt: 'Penguin Random House',
                cardTitle: homeCardTitle,
                cardDescription: homeCardDescription,
                cardUrl: '#',
                cardLinkText: 'Read the case study',
                cardId: 'card-02'
            } %}
        </div>
        <div>
            <picture>
                <source srcset="http://via.placeholder.com/1080x1080" media="(min-width: 57.5em)">
                <source srcset="http://via.placeholder.com/800x800" media="(min-width: 42.5em)">
                <img src="http://via.placeholder.com/300x300" alt="" style="width:100%">
            </picture>
        </div>
    </div>

    <!-- helping to -->
    <div class="Background--grey l-pad-before l-pad-after">
        <div class="l-pad-before">
            <h3 class="Heading Heading--medium u-center">We’re currently helping to&hellip;</h3>
        </div>

        <div class="Container Container--constrained">
            <div class="Cols Cols--gap Cols--one-third">
                {% for quote in homeQuotes %}
                <div class="InfoCard">
                    <div class="SpeechBubble">
                        {{ quote.quote }}
                    </div>
                    {% include '@author' with quote %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>


</main>

{% include '@hello' %}

{% include '@site-footer' %}
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "primaryNavModifiers": [
    "--inverted",
    "--plum"
  ],
  "logoModifiers": [
    "--inverted",
    "--plum"
  ],
  "homeHeader": "We help design leaders get the most from their products, services &amp; teams.",
  "homeSubheader": "Find out <a href=\"#\">who we are</a> or <a href=\"#\">how we can help</a>",
  "homeCardTitle": "Create a new universe.",
  "homeCardDescription": "Labore labore animi quaerat sed in corporis libero eius sunt. Deserunt tempore ad ullam voluptatem laudantium est. Dolorem illo nulla voluptas. Deleniti voluptas voluptatibus expedita eos aliquid quidem est. Inventore eius tenetur.",
  "homeBlogPosts": [
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-0",
      "cardDescription": "Sunt harum aut voluptatibus illum quibusdam dolor itaque sunt delectus. Voluptatum sit molestiae. Explicabo rem perferendis omnis sunt autem nam magnam ipsam animi. Ea ducimus error unde animi iure itaque. Velit nihil dolor magnam dolor aliquam odio non iusto sit. Velit qui nulla sit cum.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    },
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-1",
      "cardDescription": "Eos commodi molestiae eos eveniet eius. Dolores assumenda corporis. Ut dolorem adipisci maxime.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    },
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-2",
      "cardDescription": "Eaque explicabo ab pariatur sit consequatur quos. Est minima corrupti ea ex voluptatem accusamus. Blanditiis esse ea ex quos ut tempora.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    }
  ],
  "homeQuotes": [
    {
      "quote": "At eum laborum laborum officiis dolores dolor voluptatem commodi non voluptas et.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Assumenda optio commodi occaecati sed eius nihil quod hic odio error corrupti.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Illo qui adipisci qui ex veniam modi pariatur temporibus voluptate molestias doloribus.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Quidem odio accusamus itaque assumenda aut et vero nam nihil quo aut.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Nam aspernatur qui laudantium quo animi hic nam assumenda dicta dolores quibusdam.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Incidunt dolore id facere in id libero cum magnam qui nihil deserunt.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    }
  ],
  "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": "Get notified with updates",
  "inputGroupSubmit": "Join the mailing list",
  "inputModifier": "--combo",
  "siteFooterSmall": "© 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.