Blog

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

    <header class="SiteHeader">

        <a href="" class="Logo " title="Home">
    <svg width="152" height="50" viewBox="1 2 152 50">
        <g fill="none" fill-rule="evenodd">
            <path class="Logo-text" fill="#25333A" fill-rule="nonzero" d="M152.5 27.54v5.36h-2.36c-5.52 0-8.55-3.31-8.55-9.31v-6.78h-7.36V32.9h-5.61V16.81h-3.09l-.06-4.65h3.15v-.57c0-6 3-9.31 8.55-9.31h2.36v5.36h-2.36c-2 0-2.95 1.29-2.95 4v.57h7.36v-3.9l5.61-3.55v7.4h4v4.65h-4v6.78c0 2.66 1 4 2.95 4l2.36-.05zM77 11.85h5.61v21H77v-2c-1.677 1.74-4.015 2.686-6.43 2.6-5.66 0-10.09-4.84-10.09-11s4.43-11 10.09-11c2.396-.12 4.73.777 6.43 2.47v-2.07zm0 10.5c0-3.54-2.36-6.11-5.61-6.11-3.25 0-5.56 2.57-5.56 6.11 0 3.54 2.34 6.11 5.56 6.11 3.22 0 5.61-2.51 5.61-6.11zm12.88-8.67v-1.83h-5.37v21h5.6v-9.46c0-4.5.77-6.78 5-6.78h1.5v-5.4h-.23c-2.95 0-5.22.87-6.54 2.47h.04zM98 32.83h5.59V2.44H98v30.39zM17 8.1c3.178.02 6.098 1.75 7.64 4.53l.12.21.2-.13 4.83-3.07.2-.13-.13-.2c-2.834-4.3-7.642-6.88-12.79-6.87-4.122-.062-8.095 1.538-11.025 4.44-2.93 2.9-4.567 6.858-4.545 10.98-.027 4.137 1.612 8.112 4.55 11.026 2.936 2.914 6.923 4.523 11.06 4.464 5.11.06 9.91-2.455 12.77-6.69l.13-.19-5.2-3.47-.13.2c-1.56 2.736-4.46 4.432-7.61 4.45-5.16 0-9.2-4.32-9.2-9.84 0-4.75 3.43-9.71 9.13-9.71zm14.57 24.73h5.59V2.44h-5.59v30.39zm94-10.51c0 .58 0 1.15-.09 1.69v.47h-14.8c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.34-11.12 10.55-11.12 5.88-.09 10.01 4.48 10.03 11.01h.02zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22zm-60.73 2.22c0 .58 0 1.15-.09 1.69v.47H44.34c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.37-11.21 10.54-11.21 5.89 0 10.02 4.57 10.04 11.1zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22z"></path>
            <path class="Logo-streak" fill="#23D8A0" d="M151.8 44c-.083-.487-.365-.918-.78-1.187-.413-.27-.92-.354-1.4-.233-1.067.35-2.204.433-3.31.24-1.39-.18-2.86-.31-4.29-.46-2.39-.26-4.79-.47-7.2-.66-2.63-.2-5.27-.34-7.9-.52-2.48-.17-4.95-.39-7.43-.51-5.24-.253-10.483-.45-15.73-.59-4.37-.15-19.57-.32-23.95-.26-3.07 0-6.13.14-9.19.18-4.06 0-18.94.34-23 .58-4.33.23-8.68.38-13 .68-4 .27-8 .45-11.94.74-.906.02-1.81.115-2.7.28-2.35 0-4.43.22-6.52.33-1.66.09-3.36.13-5 .38v0c-.69 0-1-.4-2.07-.26-1.07.14-2.07.46-2.12 1.06-.55.12 0 .41-.62.52v.47c.43.2.56.41 0 .66v.19c.34-.14.39 0 .56.07v.39c-.4.19-.16.37-.09.54.07.17.5.44.42.71-.086.49.11.984.51 1.28v.23c.11.7 1.05 1.28 1.18 2 .1.55 1 1 2.31.89 1.12-.06 1.51-.53 2.53-.68.19 0 .81-.09 1-.1 4.23-.28 8.46-.59 12.66-1 1.24-.11 2.58-.08 3.72-.3 1.5-.29 3.07-.29 4.59-.5 2.867-.348 5.752-.515 8.64-.5 2.41 0 4.77-.26 7.16-.36 1.33-.06 2.66.06 4-.08.518-.097 1.043-.144 1.57-.14 1.43.09 13.66-.12 15.1-.11 2.79 0 5.58-.14 8.36-.17 3.3-.06 17.36-.17 20.68 0 1.13 0 2.31.21 3.37.15 3.11-.17 6.19.1 9.28.17 2.71.06 5.39.31 8.11.39 2.72.08 5.22.23 7.8.51 1 .11 2.08.25 3.15.35.84.08 1.41-.21 2.21-.11 2 .27 4.11.46 6.21.61 1.088.028 2.173.122 3.25.28 1.56.326 3.14.547 4.73.66l1 .36c.856.423 1.835.526 2.76.29.523-.344.77-.984.61-1.59v-.18c.1-.15.19-.31.09-.48.26-.1.28-.22.21-.37.25-.57.71-1.11.44-1.74-.11-.25-.39-.62.42-.79v-.47c-.39-.05-.43-.19-.51-.32.04-.52.1-1.02.12-1.52zm-73.48 1.26c-.063-.008-.127-.008-.19 0 .063-.008.127-.008.19 0z"></path>
        </g>
    </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">Et doloribus odio. Quis cum aut nam et cum est modi at tenetur. Esse neque aut. Facere non adipisci rerum aut est. Molestiae architecto aut eaque ab sed. Est ea aut exercitationem ut aut quia 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-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">Aperiam quam modi temporibus quae excepturi quae debitis. Voluptas et explicabo dicta et itaque ratione reprehenderit harum. Adipisci incidunt ab qui provident consequatur ex. Enim neque quia mollitia eveniet magni officiis temporibus.</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">Et velit cupiditate at beatae corporis. Vitae omnis ducimus et qui quia ea et dicta est. Quod optio possimus id voluptas nulla placeat quo 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-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">Temporibus explicabo ut. Sit tenetur rerum facere itaque repellat voluptatem. Saepe sunt aut facere quibusdam veniam molestiae beatae et. Nemo eum sunt dignissimos aut. A quis atque similique eum vitae quae et sint. Quidem sed
                            sequi adipisci.</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">A earum ipsum. Similique reiciendis rem ullam. Debitis provident eos amet corrupti id praesentium ipsa. Id nam mollitia. Omnis nobis voluptate voluptatem saepe quo cumque suscipit et vitae. Fuga dolore vel.</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">Voluptatum velit dolor nemo quisquam cum repellendus. Animi sed laudantium voluptatem debitis neque sapiente sapiente. Enim reprehenderit iusto molestiae ut et sed quos mollitia quaerat. Dolor et qui ad.</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">Qui maiores et placeat quo non minus. Et at ut illo voluptates. Facere at aperiam ex voluptatem. Veniam est quis cumque. Voluptatibus ut quaerat molestias et enim. Cum explicabo quod eos assumenda quis delectus voluptatem quaerat.</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">Hic quis distinctio natus sunt cumque et. Mollitia voluptate ut facilis quaerat dolorum deleniti sequi exercitationem eligendi. Hic quia molestias perspiciatis. Sed natus labore est est voluptatem. Accusamus quia est aut. Architecto
                            nam porro est libero.</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">Voluptatem et maxime et in voluptates molestiae eaque non similique. Et animi velit qui. Autem dolore ea veritatis doloribus culpa et amet et sint. Debitis magnam totam et placeat iure quo modi maxime sunt. Ratione vel 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-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">Delectus molestias hic quia rerum consequatur eum non molestiae et. Quo est nesciunt dolores veritatis. At cum incidunt officia similique eos omnis voluptates reiciendis.</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">Ut iusto earum. Nesciunt aut laboriosam. Aut vel quam saepe rem dolore mollitia reiciendis nam. Et quia dolor adipisci culpa 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-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">Tempore quas repellendus vero ea quae est autem. Neque vero omnis esse sunt iusto et. Voluptas qui aut aut in ad doloremque sunt. Laborum ut perspiciatis aspernatur quia doloribus consectetur. Nihil perferendis voluptatem quia
                            labore.</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 Cols Cols--half">
        <div class="Cols-item">
            <div class="InputGroup">
                <form action="" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--body" for="">Feed your curiosity.</label>
                    <div class="Input InputGroup-combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="" id="" />
                        <button type="submit" class="InputGroup-submit">Get the Clearletter</button>
                    </div>
                </form>
            </div>
            <small class="Heading Heading--context"></small>
        </div>
        <!--/.SiteFooter-container-->
        <div class="Cols-item">
            <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>
        <!--/.Cols-half-->
        <div class="Cols-item SiteFooter-small">
            &copy; 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": "Et doloribus odio. Quis cum aut nam et cum est modi at tenetur. Esse neque aut. Facere non adipisci rerum aut est. Molestiae architecto aut eaque ab sed. Est ea aut exercitationem ut aut quia voluptas.",
      "cardId": "card-0"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Aperiam quam modi temporibus quae excepturi quae debitis. Voluptas et explicabo dicta et itaque ratione reprehenderit harum. Adipisci incidunt ab qui provident consequatur ex. Enim neque quia mollitia eveniet magni officiis temporibus.",
      "cardId": "card-1"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Et velit cupiditate at beatae corporis. Vitae omnis ducimus et qui quia ea et dicta est. Quod optio possimus id voluptas nulla placeat quo ut.",
      "cardId": "card-2"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Temporibus explicabo ut. Sit tenetur rerum facere itaque repellat voluptatem. Saepe sunt aut facere quibusdam veniam molestiae beatae et. Nemo eum sunt dignissimos aut. A quis atque similique eum vitae quae et sint. Quidem sed sequi adipisci.",
      "cardId": "card-3"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "A earum ipsum. Similique reiciendis rem ullam. Debitis provident eos amet corrupti id praesentium ipsa. Id nam mollitia. Omnis nobis voluptate voluptatem saepe quo cumque suscipit et vitae. Fuga dolore vel.",
      "cardId": "card-4"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Voluptatum velit dolor nemo quisquam cum repellendus. Animi sed laudantium voluptatem debitis neque sapiente sapiente. Enim reprehenderit iusto molestiae ut et sed quos mollitia quaerat. Dolor et qui ad.",
      "cardId": "card-5"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Qui maiores et placeat quo non minus. Et at ut illo voluptates. Facere at aperiam ex voluptatem. Veniam est quis cumque. Voluptatibus ut quaerat molestias et enim. Cum explicabo quod eos assumenda quis delectus voluptatem quaerat.",
      "cardId": "card-6"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Hic quis distinctio natus sunt cumque et. Mollitia voluptate ut facilis quaerat dolorum deleniti sequi exercitationem eligendi. Hic quia molestias perspiciatis. Sed natus labore est est voluptatem. Accusamus quia est aut. Architecto nam porro est libero.",
      "cardId": "card-7"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Voluptatem et maxime et in voluptates molestiae eaque non similique. Et animi velit qui. Autem dolore ea veritatis doloribus culpa et amet et sint. Debitis magnam totam et placeat iure quo modi maxime sunt. Ratione vel reprehenderit.",
      "cardId": "card-8"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Delectus molestias hic quia rerum consequatur eum non molestiae et. Quo est nesciunt dolores veritatis. At cum incidunt officia similique eos omnis voluptates reiciendis.",
      "cardId": "card-9"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Ut iusto earum. Nesciunt aut laboriosam. Aut vel quam saepe rem dolore mollitia reiciendis nam. Et quia dolor adipisci culpa et.",
      "cardId": "card-10"
    },
    {
      "cardTitle": "Article name here",
      "cardCategory": "Opinion",
      "cardDescription": "Tempore quas repellendus vero ea quae est autem. Neque vero omnis esse sunt iusto et. Voluptas qui aut aut in ad doloremque sunt. Laborum ut perspiciatis aspernatur quia doloribus consectetur. Nihil perferendis voluptatem quia labore.",
      "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": "Feed your curiosity.",
  "inputGroupSubmit": "Get the Clearletter",
  "inputModifier": "--combo",
  "siteFooterSmall": "&copy; 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.