Blog

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

    <header class="SiteHeader">

        <a href="" class="Logo " 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" 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">Show me</h1>

                <div class="Selector">
                    <a aria-controls="categories" aria-expanded="false" class="Selector-trigger Heading Heading--main" href="#categories">all posts</a>
                    <div aria-hidden="true" class="Selector-target Container Background--carribean-green" id="categories">

                        <ul class="Selector-list">
                            <li class="Selector-listItem">
                                <a href="#" class="Selector-listLink">opinions</a>
                            </li>
                            <li class="Selector-listItem">
                                <a href="#" class="Selector-listLink">announcements</a>
                            </li>
                            <li class="Selector-listItem">
                                <a href="#" class="Selector-listLink">podcasts</a>
                            </li>
                            <li class="Selector-listItem">
                                <a href="#" class="Selector-listLink">tiny lessons</a>
                            </li>
                            <li class="Selector-listItem">
                                <a href="#" class="Selector-listLink">all posts</a>
                            </li>
                        </ul>
                    </div>
                    <!--/.Selector-target-->
                </div>
                <!--/.Selector-->

            </div>
            <!--/.Masthead-primary-->

        </div>

    </div>
    <!--/.Masthead-->
</div>

<main id="main-content">

    <div class="BlogGrid">

        <article class="FeaturedCard" aria-labelledby="featured-card-heading">
            <div class="FeaturedCard-primary">
                <header>
                    <h3 class="FeaturedCard-title Heading Heading--secondary" id="featured-card-heading"><a href="">Jon smells like cabbages</a></h3>
                </header>
                <div class="FeaturedCard-category">Process, featured</div>
                <div class="FeaturedCard-description"></div>
            </div>
            <!--/.Featured-primary-->
            <div class="FeaturedCard-secondary">
                <div class="Author">
                    <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                    <div class="Author-name">Graham Smith</div>
                </div>
                <!--/.Author-->
            </div>
            <!--/.Featured-secondary-->
        </article>
        <!--/.Featured-card-->

        <div class="BlogGrid-container">
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Qui architecto ut pariatur magni rem alias beatae hic. Laudantium omnis quisquam. Quae dignissimos aperiam autem. Recusandae facilis laboriosam quae dicta.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Facere sunt occaecati ut et libero sapiente odio eum veritatis. Sint non rerum. Cupiditate neque et est ducimus ducimus. Reiciendis perferendis voluptate qui veniam at laudantium adipisci nihil. Non ea consequatur aut omnis. Quam
                            rerum omnis eius dolorem quod quibusdam reprehenderit doloremque quos.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Repellendus omnis et fugiat. Accusantium dolorem nostrum eum quam sequi fugiat autem reiciendis. Distinctio molestiae voluptatem rerum eligendi a qui aperiam. Cupiditate quis tenetur sunt voluptatibus ipsam. Maxime quia non. Quo
                            in eum praesentium vero maxime omnis vel quaerat rerum.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Consectetur quas voluptate iure quidem cum. Necessitatibus corrupti rerum ullam ea. Alias doloribus voluptates alias. Sit rem facere. Sequi ex incidunt qui perferendis. Id vero iure totam autem ducimus blanditiis qui expedita.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Sunt sed nobis vel quaerat. Accusantium et quidem amet adipisci non exercitationem. Voluptatem libero omnis inventore dolore harum. Autem voluptatibus non eos ea assumenda quod et porro quia. Est consectetur exercitationem ipsa.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Saepe laboriosam est velit. Est sed omnis tempore dicta officiis molestiae. Eveniet rem eaque nulla reiciendis ea.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Nemo est accusamus fugit magni laudantium. Odit velit sit quasi quae. Voluptatem et atque.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Error quis ut. Aut voluptate perspiciatis aspernatur incidunt iste. Quas odio earum eum sapiente ut modi rerum alias. Odit quas necessitatibus pariatur.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Ea rem temporibus molestias eveniet aut consequatur eos aut. Rerum sapiente quasi molestiae ad voluptas aspernatur facilis. Autem eveniet necessitatibus rerum omnis. Odit aut sunt et.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Cum dolores at eaque numquam mollitia et. Illum molestiae nisi animi et ut facere aut quisquam. Dolor nobis dignissimos. Dolore voluptatibus omnis inventore ut adipisci. Explicabo facere illo eius quia ullam cum.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Unde iste qui tempore rerum eum adipisci repellat. Non eius eveniet quia quod qui. Qui esse ut ad. Culpa et neque est eveniet. Expedita numquam similique sint dolore.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="BlogGrid-item">

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

                        </header>
                        <div class="Card-category">Opinion</div>
                        <p class="Card-description">Officiis fuga autem nesciunt vitae labore eum inventore facere reiciendis. Deleniti perspiciatis suscipit voluptatibus optio dolor. Quis eaque esse officia quaerat fuga facilis voluptas beatae. Itaque ducimus vel sed voluptatem.
                            Voluptatem officiis sed ipsam dolorum sunt id nulla recusandae deleniti.</p>
                        <div class="Card-author">
                            <div class="Author">
                                <img class="Author-image" src="/assets/img/team/voice/graham.png" alt="Graham Smith">
                                <div class="Author-name">Graham Smith</div>
                            </div>
                            <!--/.Author-->
                        </div>
                        <!--/.Card-author-->
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Blog-container-->

    </div>
    <!--/.Blog-grid-->

    <div class="Pagination">
        <ol class="Pagination-list">
            <li><a class="Pagination-item" href="">1</a></li>
            <li><a class="Pagination-item" href="">2</a></li>
            <li><a class="Pagination-item" href="">3</a></li>
            <li><a class="Pagination-item" href="">4</a></li>
        </ol>
        <!--/.Pagination-list-->
    </div>
    <!--/.Pagination-->

</main>

<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 Background--grey">
    {% include '@site-header' %}
    {% include '@masthead' %}
</div>

<main id="main-content">

    <div class="BlogGrid">

        {% include '@featured-card' %}

        <div class="BlogGrid-container">
            {% for post in posts %}
            <div class="BlogGrid-item">
                {% include '@card' with post %}
            </div>
            {% endfor %}
        </div><!--/.Blog-container-->

    </div><!--/.Blog-grid-->

    {% include '@pagination' %}

</main>

{% include '@site-footer' %}
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "mastheadTitle": "Show me",
  "mastheadModifier": "--chimney",
  "mastheadHasSelector": true,
  "selectorID": "categories",
  "triggerContent": "all posts",
  "triggerClass": "Heading Heading--main",
  "targetClass": "Container Background--carribean-green",
  "listContext": {
    "listClass": null,
    "listItemClass": "Heading Heading--secondary",
    "linkClass": null,
    "listItems": [
      {
        "url": "#",
        "content": "opinions"
      },
      {
        "url": "#",
        "content": "announcements"
      },
      {
        "url": "#",
        "content": "podcasts"
      },
      {
        "url": "#",
        "content": "tiny lessons"
      },
      {
        "url": "#",
        "content": "all posts"
      }
    ]
  },
  "featuredCardTitle": "Jon smells like cabbages",
  "featuredCardCategory": "Process",
  "authorImage": "/assets/img/team/voice/graham.png",
  "authorName": "Graham Smith",
  "posts": [
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Qui architecto ut pariatur magni rem alias beatae hic. Laudantium omnis quisquam. Quae dignissimos aperiam autem. Recusandae facilis laboriosam quae dicta.",
      "cardId": "card-0"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Facere sunt occaecati ut et libero sapiente odio eum veritatis. Sint non rerum. Cupiditate neque et est ducimus ducimus. Reiciendis perferendis voluptate qui veniam at laudantium adipisci nihil. Non ea consequatur aut omnis. Quam rerum omnis eius dolorem quod quibusdam reprehenderit doloremque quos.",
      "cardId": "card-1"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Repellendus omnis et fugiat. Accusantium dolorem nostrum eum quam sequi fugiat autem reiciendis. Distinctio molestiae voluptatem rerum eligendi a qui aperiam. Cupiditate quis tenetur sunt voluptatibus ipsam. Maxime quia non. Quo in eum praesentium vero maxime omnis vel quaerat rerum.",
      "cardId": "card-2"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Consectetur quas voluptate iure quidem cum. Necessitatibus corrupti rerum ullam ea. Alias doloribus voluptates alias. Sit rem facere. Sequi ex incidunt qui perferendis. Id vero iure totam autem ducimus blanditiis qui expedita.",
      "cardId": "card-3"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Sunt sed nobis vel quaerat. Accusantium et quidem amet adipisci non exercitationem. Voluptatem libero omnis inventore dolore harum. Autem voluptatibus non eos ea assumenda quod et porro quia. Est consectetur exercitationem ipsa.",
      "cardId": "card-4"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Saepe laboriosam est velit. Est sed omnis tempore dicta officiis molestiae. Eveniet rem eaque nulla reiciendis ea.",
      "cardId": "card-5"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Nemo est accusamus fugit magni laudantium. Odit velit sit quasi quae. Voluptatem et atque.",
      "cardId": "card-6"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Error quis ut. Aut voluptate perspiciatis aspernatur incidunt iste. Quas odio earum eum sapiente ut modi rerum alias. Odit quas necessitatibus pariatur.",
      "cardId": "card-7"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Ea rem temporibus molestias eveniet aut consequatur eos aut. Rerum sapiente quasi molestiae ad voluptas aspernatur facilis. Autem eveniet necessitatibus rerum omnis. Odit aut sunt et.",
      "cardId": "card-8"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Cum dolores at eaque numquam mollitia et. Illum molestiae nisi animi et ut facere aut quisquam. Dolor nobis dignissimos. Dolore voluptatibus omnis inventore ut adipisci. Explicabo facere illo eius quia ullam cum.",
      "cardId": "card-9"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Unde iste qui tempore rerum eum adipisci repellat. Non eius eveniet quia quod qui. Qui esse ut ad. Culpa et neque est eveniet. Expedita numquam similique sint dolore.",
      "cardId": "card-10"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Officiis fuga autem nesciunt vitae labore eum inventore facere reiciendis. Deleniti perspiciatis suscipit voluptatibus optio dolor. Quis eaque esse officia quaerat fuga facilis voluptas beatae. Itaque ducimus vel sed voluptatem. Voluptatem officiis sed ipsam dolorum sunt id nulla recusandae deleniti.",
      "cardId": "card-11"
    }
  ],
  "cardTitle": "Article Title Goes here",
  "items": [
    {
      "pageNumber": 1
    },
    {
      "pageNumber": 2
    },
    {
      "pageNumber": 3
    },
    {
      "pageNumber": 4
    }
  ],
  "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.