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>
            <!--/.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="Bar"></div>
                    <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">Aperiam debitis et quia mollitia. Ea facere repudiandae sint harum quisquam libero ab ut. Blanditiis temporibus omnis maxime aut explicabo et rerum voluptas explicabo. Omnis libero reprehenderit.</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="Bar"></div>
                    <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">Sint voluptatem tempora excepturi neque qui ut totam. Qui quos rem qui eligendi nihil in. Porro eligendi eum perferendis numquam sint reprehenderit voluptatibus tempore nihil.</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="Bar"></div>
                    <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">Non culpa quia molestias maiores. Nobis fuga expedita unde nobis beatae unde. Sequi sunt possimus vero excepturi. Fuga optio asperiores ex quisquam excepturi quia sint rem. Quia laudantium id.</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="Bar"></div>
                    <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">Blanditiis magni sapiente commodi. Iure vero totam iure cumque. Tenetur consequatur dolore magni excepturi quasi. Est incidunt blanditiis non. Tenetur quisquam ducimus ut voluptate ducimus iusto soluta.</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="Bar"></div>
                    <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">Quia corrupti iusto voluptatem nostrum ab. Ullam ut error est voluptatibus facilis vel. Consectetur unde rerum exercitationem quod distinctio et unde. Culpa sit ipsa. Voluptatem ratione quaerat impedit in voluptas.</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="Bar"></div>
                    <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">Doloremque sed laborum error qui sit commodi. At eaque tempora odio ex ratione. Molestias iure fugit quia rerum optio mollitia maxime nesciunt et. Id consectetur deserunt quia iure. Quo quas repudiandae numquam fugiat.</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="Bar"></div>
                    <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">Sit ut nulla laboriosam quas eos nesciunt ut perferendis est. Vel ut suscipit beatae rerum quaerat quam corrupti. Nesciunt id tempora expedita consequatur hic eum perspiciatis sunt fugiat. Quo maxime optio tempore saepe. Velit impedit facilis est quis ex veniam. Molestiae aspernatur in consequatur porro est.</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="Bar"></div>
                    <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">Vel quia sed suscipit. Eum et libero quia. Molestias quis laborum iste velit accusamus nemo nostrum reprehenderit rerum. Vero odit qui. Inventore adipisci voluptatem et consectetur nesciunt odio a voluptatum tempora. Incidunt temporibus ut.</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="Bar"></div>
                    <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">Veritatis rem consequatur numquam quo voluptatum sed minus qui. Vero ea ut ratione autem corporis. Veritatis non dicta aliquid et porro 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-9-heading">
                    <div class="Bar"></div>
                    <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">Est recusandae unde ad. Reprehenderit libero dignissimos atque rerum et aut. Qui est quia. Ex vel officiis. Hic dolor repellendus. Qui laboriosam et placeat.</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="Bar"></div>
                    <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">Incidunt ipsam ad veritatis. Laboriosam odit ad odio magni voluptatem soluta tempore odio omnis. Id et corporis. Quis molestias sint libero qui veniam sequi itaque exercitationem quod. Porro quia perspiciatis suscipit animi qui nam. Non ut beatae sunt aut sit aut doloribus consequuntur.</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="Bar"></div>
                    <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">Eos repellat repudiandae. Iusto architecto sint necessitatibus est corporis modi vel maiores magnam. Pariatur dolorem et. Maiores temporibus iure eos. Et unde iure. In corrupti ut quod consequatur ut in sit.</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 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 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",
  "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": "Aperiam debitis et quia mollitia. Ea facere repudiandae sint harum quisquam libero ab ut. Blanditiis temporibus omnis maxime aut explicabo et rerum voluptas explicabo. Omnis libero reprehenderit.",
      "cardId": "card-0"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Sint voluptatem tempora excepturi neque qui ut totam. Qui quos rem qui eligendi nihil in. Porro eligendi eum perferendis numquam sint reprehenderit voluptatibus tempore nihil.",
      "cardId": "card-1"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Non culpa quia molestias maiores. Nobis fuga expedita unde nobis beatae unde. Sequi sunt possimus vero excepturi. Fuga optio asperiores ex quisquam excepturi quia sint rem. Quia laudantium id.",
      "cardId": "card-2"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Blanditiis magni sapiente commodi. Iure vero totam iure cumque. Tenetur consequatur dolore magni excepturi quasi. Est incidunt blanditiis non. Tenetur quisquam ducimus ut voluptate ducimus iusto soluta.",
      "cardId": "card-3"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Quia corrupti iusto voluptatem nostrum ab. Ullam ut error est voluptatibus facilis vel. Consectetur unde rerum exercitationem quod distinctio et unde. Culpa sit ipsa. Voluptatem ratione quaerat impedit in voluptas.",
      "cardId": "card-4"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Doloremque sed laborum error qui sit commodi. At eaque tempora odio ex ratione. Molestias iure fugit quia rerum optio mollitia maxime nesciunt et. Id consectetur deserunt quia iure. Quo quas repudiandae numquam fugiat.",
      "cardId": "card-5"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Sit ut nulla laboriosam quas eos nesciunt ut perferendis est. Vel ut suscipit beatae rerum quaerat quam corrupti. Nesciunt id tempora expedita consequatur hic eum perspiciatis sunt fugiat. Quo maxime optio tempore saepe. Velit impedit facilis est quis ex veniam. Molestiae aspernatur in consequatur porro est.",
      "cardId": "card-6"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Vel quia sed suscipit. Eum et libero quia. Molestias quis laborum iste velit accusamus nemo nostrum reprehenderit rerum. Vero odit qui. Inventore adipisci voluptatem et consectetur nesciunt odio a voluptatum tempora. Incidunt temporibus ut.",
      "cardId": "card-7"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Veritatis rem consequatur numquam quo voluptatum sed minus qui. Vero ea ut ratione autem corporis. Veritatis non dicta aliquid et porro ea.",
      "cardId": "card-8"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Est recusandae unde ad. Reprehenderit libero dignissimos atque rerum et aut. Qui est quia. Ex vel officiis. Hic dolor repellendus. Qui laboriosam et placeat.",
      "cardId": "card-9"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Incidunt ipsam ad veritatis. Laboriosam odit ad odio magni voluptatem soluta tempore odio omnis. Id et corporis. Quis molestias sint libero qui veniam sequi itaque exercitationem quod. Porro quia perspiciatis suscipit animi qui nam. Non ut beatae sunt aut sit aut doloribus consequuntur.",
      "cardId": "card-10"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Eos repellat repudiandae. Iusto architecto sint necessitatibus est corporis modi vel maiores magnam. Pariatur dolorem et. Maiores temporibus iure eos. Et unde iure. In corrupti ut quod consequatur ut in sit.",
      "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"
    },
    {
      "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.