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">Tempore excepturi corrupti quas. Consequatur qui hic dolor earum in ab. Iusto recusandae iure perferendis reprehenderit qui quos et eos. Voluptatum aliquam ut dolores quidem et quo est quod. Omnis at ullam fugiat eum eos nobis delectus.</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">Iste voluptates officia eligendi reiciendis tenetur rem. Quia et incidunt. Nostrum qui omnis doloremque unde dolores. Magnam magnam autem ducimus ut omnis est dolorem. Et sapiente non.</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">Atque libero tenetur aut. At similique et pariatur omnis. Sit sed nisi quod inventore architecto perferendis labore nesciunt.</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">Voluptate at quia illo tenetur atque omnis quia. Id sunt fugit odio. Debitis sed culpa id porro quisquam repellat qui dolor. Enim dignissimos sequi modi dolor soluta aspernatur illo id. In aut iusto itaque consectetur dignissimos.</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">Tempore excepturi corrupti quas. Consequatur qui hic dolor earum in ab. Iusto recusandae iure perferendis reprehenderit qui quos et eos. Voluptatum aliquam ut dolores quidem et quo est quod. Omnis at ullam fugiat eum eos nobis delectus.</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">Tempore excepturi corrupti quas. Consequatur qui hic dolor earum in ab. Iusto recusandae iure perferendis reprehenderit qui quos et eos. Voluptatum aliquam ut dolores quidem et quo est quod. Omnis at ullam fugiat eum eos nobis delectus.</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">
                        Vero voluptas quam sed amet voluptatem impedit et quos quas voluptatem sed.
                    </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">
                        Tenetur debitis eum laborum molestias sunt vitae esse eligendi expedita labore ut.
                    </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">
                        Esse eveniet sequi quas omnis voluptatem ea molestiae dolores magnam dolorem sint.
                    </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">
                        Voluptatem voluptatem fugit velit id voluptate et sint iste corporis quia cumque.
                    </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">
                        Sit id aliquid quis similique voluptatibus modi laudantium beatae reiciendis beatae consequatur.
                    </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">
                        Eum quisquam placeat ut quo similique molestias et est temporibus magni necessitatibus.
                    </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 InputGroup--highlight">
                <form action="" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--bump" for="ID2">Get notified with updates</label>
                    <div class="Input InputGroup-combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="Enter email address" id="ID2" />
                        <button type="submit" class="InputGroup-submit">Join the mailing list</button>
                    </div>
                </form>
                <small class="InputGroup-microcopy">Low volume mailing list. Just for events & conference updates. <a href="#">See an example</a></small>
            </div>
            <small class="Heading Heading--context"></small>
        </div>

        <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": "Tempore excepturi corrupti quas. Consequatur qui hic dolor earum in ab. Iusto recusandae iure perferendis reprehenderit qui quos et eos. Voluptatum aliquam ut dolores quidem et quo est quod. Omnis at ullam fugiat eum eos nobis delectus.",
  "homeBlogPosts": [
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-0",
      "cardDescription": "Iste voluptates officia eligendi reiciendis tenetur rem. Quia et incidunt. Nostrum qui omnis doloremque unde dolores. Magnam magnam autem ducimus ut omnis est dolorem. Et sapiente non.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    },
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-1",
      "cardDescription": "Atque libero tenetur aut. At similique et pariatur omnis. Sit sed nisi quod inventore architecto perferendis labore nesciunt.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    },
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-2",
      "cardDescription": "Voluptate at quia illo tenetur atque omnis quia. Id sunt fugit odio. Debitis sed culpa id porro quisquam repellat qui dolor. Enim dignissimos sequi modi dolor soluta aspernatur illo id. In aut iusto itaque consectetur dignissimos.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    }
  ],
  "homeQuotes": [
    {
      "quote": "Vero voluptas quam sed amet voluptatem impedit et quos quas voluptatem sed.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Tenetur debitis eum laborum molestias sunt vitae esse eligendi expedita labore ut.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Esse eveniet sequi quas omnis voluptatem ea molestiae dolores magnam dolorem sint.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Voluptatem voluptatem fugit velit id voluptate et sint iste corporis quia cumque.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Sit id aliquid quis similique voluptatibus modi laudantium beatae reiciendis beatae consequatur.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Eum quisquam placeat ut quo similique molestias et est temporibus magni necessitatibus.",
      "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",
  "inputGroupID": "ID2",
  "inputGroupPlaceholder": "Enter email address",
  "inputGroupMicrocopy": "Low volume mailing list. Just for events & conference updates. <a href=\"#\">See an example</a>",
  "inputGroupModifiers": "highlight",
  "siteFooterSmall": "© 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.