Home

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

    <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">
    <div class="Container Container--constrained u-transform-up">
        <section class="Announcement">
            <span class="Announcement-highlight">out now</span>
            <div class="Announcement-content">
                <h3 class="Announcement-title Heading Heading--medium-temp">Design Effectiveness Report 2019</h3>
                <p class="Announcement-description">We surveyed designers from hundreds of organisations to find out how design is currently used and understood in their workplaces. </p>
                <a href="#" class="MegaLink MegaLink--springboard">
                    Download the report
                </a>
            </div>
        </section>
    </div>

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

            <article class="Card Card--home Card--logo" aria-labelledby="card-00-heading">
                <div class="Bar"></div>
                <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">Aut atque saepe eum quam consequuntur sit eius unde provident. Eligendi placeat sint eos officia dolorem nihil voluptatem id illo. Maiores debitis qui porro fuga.</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">Animi error reiciendis. Vitae quia odit consequatur perferendis et. Assumenda nisi aut. Quos ipsum cumque. Tempora temporibus molestiae ea at et saepe. Corporis quos et repellat omnis ex.</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">Ipsa reprehenderit vero molestias eaque sit. Animi molestias quae eos. Deleniti mollitia voluptates consequuntur praesentium. Consectetur molestias eius voluptatem asperiores voluptate. Cum nesciunt reprehenderit nam repellendus. Omnis magni voluptatum ipsum accusamus facere.</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">Voluptates modi nobis rerum sit provident voluptas eius. Magnam molestias alias ut. Possimus amet non aut.</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">
                <div class="Bar"></div>
                <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">Aut atque saepe eum quam consequuntur sit eius unde provident. Eligendi placeat sint eos officia dolorem nihil voluptatem id illo. Maiores debitis qui porro fuga.</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">
                <div class="Bar"></div>
                <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">Aut atque saepe eum quam consequuntur sit eius unde provident. Eligendi placeat sint eos officia dolorem nihil voluptatem id illo. Maiores debitis qui porro fuga.</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">
                        Autem ut harum qui eius sapiente enim est iure quis sapiente tempora.
                    </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">
                        Quos qui sint quia omnis corporis consequatur eveniet repudiandae debitis quo amet.
                    </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">
                        Facere ad modi aliquid incidunt cumque illum esse est provident sed tempora.
                    </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">
                        Occaecati et a dolores veniam sit qui ab minima perferendis recusandae repellat.
                    </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">
                        Unde hic ea quos est dignissimos eius voluptates facilis tempore qui id.
                    </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">
                        Sed et sit et ut ut occaecati debitis quasi quod incidunt animi.
                    </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 Texture-border Texture-border--top">
    <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>

        <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>
            <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-instagram.svg" alt="Find us on Instagram"></a></li>
        </ul>
        <!--/.SiteFooter-icons-->

        <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-->
            <div class="SiteFooter-small">
                © 2005‑now Clearleft Ltd. All rights reserved.
            </div>
            <!--/.SiteFooter-small-->
        </nav>
    </div>
    <!--/.Cols-->
</footer>
<!--/.SiteFooter-->
<div class="Background--carribean-green l-pad-after Texture Texture--right">
    {% 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">
    <div class="Container Container--constrained u-transform-up">
        {% include '@announcement' with {
            "announcementHighlight": 'out now',
            "announcementTitle": 'Design Effectiveness Report 2019',
            "announcementDescription": 'We surveyed designers from hundreds of organisations to find out how design is currently used and understood in their workplaces. ',
            "megaLinkURL": '#',
            "megaLinkText": 'Download the report'
        } %}
    </div>

    <!-- 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": "Aut atque saepe eum quam consequuntur sit eius unde provident. Eligendi placeat sint eos officia dolorem nihil voluptatem id illo. Maiores debitis qui porro fuga.",
  "homeBlogPosts": [
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-0",
      "cardDescription": "Animi error reiciendis. Vitae quia odit consequatur perferendis et. Assumenda nisi aut. Quos ipsum cumque. Tempora temporibus molestiae ea at et saepe. Corporis quos et repellat omnis ex.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    },
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-1",
      "cardDescription": "Ipsa reprehenderit vero molestias eaque sit. Animi molestias quae eos. Deleniti mollitia voluptates consequuntur praesentium. Consectetur molestias eius voluptatem asperiores voluptate. Cum nesciunt reprehenderit nam repellendus. Omnis magni voluptatum ipsum accusamus facere.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    },
    {
      "cardBar": true,
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardId": "post-2",
      "cardDescription": "Voluptates modi nobis rerum sit provident voluptas eius. Magnam molestias alias ut. Possimus amet non aut.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries"
    }
  ],
  "homeQuotes": [
    {
      "quote": "Autem ut harum qui eius sapiente enim est iure quis sapiente tempora.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Quos qui sint quia omnis corporis consequatur eveniet repudiandae debitis quo amet.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Facere ad modi aliquid incidunt cumque illum esse est provident sed tempora.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Occaecati et a dolores veniam sit qui ab minima perferendis recusandae repellat.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Unde hic ea quos est dignissimos eius voluptates facilis tempore qui id.",
      "authorImage": "/assets/img/authors/sm/edv.png",
      "authorName": "Ellen DeVries",
      "datePosted": "Sep 21"
    },
    {
      "quote": "Sed et sit et ut ut occaecati debitis quasi quod incidunt animi.",
      "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"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-instagram.svg",
      "alt": "Find us on Instagram"
    }
  ],
  "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.