<footer class="SiteFooter">
    <div class="SiteFooter-container Cols">
        <div class="Cols-half 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>
                    <!--/.InputGroup-->
                </form>
            </div>
            <!--/.InputGroup-->
            <small class="Heading Heading--context">​Every 2 weeks. It’s non-salesy. We never spam.</small>
        </div>
        <!--/.SiteFooter-container-->
        <div class="Cols-half Cols-item">
            <nav class="SiteFooter-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-->
<footer class="SiteFooter">
    <div class="SiteFooter-container Cols">
        <div class="Cols-half Cols-item">
            {% include '@input-group' %}
            <small class="Heading Heading--context">{{ footerInputSmall }}</small>
        </div><!--/.SiteFooter-container-->
        <div class="Cols-half Cols-item">
            <nav class="SiteFooter-navigation">
                <ul class="SiteFooter-navigationLinks">
                    {% for footerLink in footerLinks %}
                    <li class="SiteFooter-navigationItem"><a href="{{ footerLink.url }}" class="SiteFooter-navigationLink">{{ footerLink.title }}</a></li>
                    {% endfor %}
                </ul><!--/.SiteFooter-navigationLinks-->
                <ul class="SiteFooter-icons">
                    {% for socialLink in socialLinks %}
                    <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="{{ socialLink.url }}"><img src="{{ socialLink.imgSrc }}" alt="{{ socialLink.alt }}"></a></li>
                    {% endfor %}
                </ul><!--/.SiteFooter-icons-->
            </nav>
        </div><!--/.Cols-half-->
        <div class="Cols-item SiteFooter-small">
            {{ siteFooterSmall }}
        </div><!--/.SiteFooter-small-->
    </div><!--/.Cols-->
</footer><!--/.SiteFooter-->
{
  "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",
  "footerInputSmall": "​Every 2 weeks. It’s non-salesy. We never spam.",
  "siteFooterSmall": "&copy; 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.