Footer {% include 'components/core/footer' %}
#
HTML
<footer class="site-footer" role="contentinfo">
    <div class="site-footer__top">
        <div class="inner">
            <div class="site-footer__subscribe">
                <fieldset>
                    <legend class="site-footer__heading">Learn about our work and stay in touch</legend>
                    <div class="site-footer__subscribe-form">
                        <div class="field-set field-set--merged">
                            <div class="field-set__content">
                                <div class="field-set__items">
                                    <div class="field-set__item form-small-col-6">
                                        <label class="field-set__label">First Name</label>
                                        <input placeholder="First Name" class="field-set__input" type="text" />
                                        <span class="error-message">Please enter a valid last name.</span> 
                                    </div>
                                    <div class="field-set__item form-small-col-6">
                                        <label class="field-set__label">Last Name</label>
                                        <input placeholder="Last Name" class="field-set__input" type="text" />
                                        <span class="error-message">Please enter your last name</span> 
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field-set">
                            <div class="field-set__content">
                                <div class="field-set__items">
                                    <div class="field-set__item form-large-col-8">
                                        <label class="field-set__label">Email</label>
                                        <input placeholder="Email" class="field-set__input" type="text" />
                                    </div>
                                    <div class="field-set__item field-set__item--submit form-large-col-4">
                                        <input type="submit" value="Subscribe" class="button site-footer__subscribe-button" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <span class="site-footer__disclaimer">You'll get an email about once a month. We never share your details.</span> 
                <div class="site-footer__social">
                    <a class="site-footer__social-link site-footer__social-link--facebook" href="https://www.facebook.com/tearfund" target="_blank" title="facebook"> <span class="site-footer__social-link-text">facebook</span> </a>
                    <a class="site-footer__social-link site-footer__social-link--twitter" href="http://www.twitter.com/tearfund" target="_blank" title="twitter"> <span class="site-footer__social-link-text">twitter</span> </a>
                    <a class="site-footer__social-link site-footer__social-link--youtube" href="http://www.youtube.com/tearfund" target="_blank" title="youtube"> <span class="site-footer__social-link-text">youtube</span> </a>
                    <a class="site-footer__social-link site-footer__social-link--instagram" href="https://instagram.com/tearfund" target="_blank" title="instagram"> <span class="site-footer__social-link-text">instagram</span> </a>
                    <a class="site-footer__social-link site-footer__social-link--whatsapp" href="https://instagram.com/tearfund" target="_blank" title="whatsapp"> <span class="site-footer__social-link-text">whatsapp</span> </a>
                </div>
            </div>
            <div class="site-footer__nav">
                <ul class="site-footer__nav-list">
                    <h2>
                        Our sites
                    </h2>
                    <li> <a href="#">Connected Church</a> </li>
                    <li> <a href="#">Inspired Individual</a> </li>
                    <li> <a href="#">Created - Fair Trade gifts</a> </li>
                    <li> <a href="#">Toilet Twinning</a> </li>
                    <li> <a href="#">Resources Shop</a> </li>
                </ul>
            </div>
            <div class="site-footer__nav">
                <ul class="site-footer__nav-list">
                    <h2>
                        Pages for
                    </h2>
                    <li> <a href="#">Jobs</a> </li>
                    <li> <a href="#">Media</a> </li>
                    <li> <a href="#">Policy reports</a> </li>
                    <li> <a href="#">International Learning</a> </li>
                    <li> <a href="#">Youth &amp; Students</a> </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="site-footer__bottom">
        <div class="inner">
            <div class="site-footer__logo-container">
                <a class="site-footer__logo" href="/">
                    <img class="site-footer__image" src="/images/mainsite5/logo@2x.png" alt="Tearfund" />
                </a>
                <!-- The strapline is optional -->
                <div class="site-footer__strapline">
                    <img class="site-footer__image" src="/images/mainsite5/following-jesus@2x.png" alt="Following Jesus where the need is greatest" />
                </div>
            </div>
            <div class="site-footer__location-container">
                <div class="site-footer__vcard">
                    <div class="vcard">
                        <a href="/en/About_Us/Contact_us" class="fn org url">Tearfund</a> 
                        <div class="adr">
                            <div class="street-address">100 Church Road</div>
                            <span class="locality">Teddington</span> <span class="postal-code">TW11 8QE</span> 
                        </div>
                        <div class="tel">0208 977 9144</div>
                        <div><a href="mailto:info@tearfund.org">info@tearfund.org</a></div>
                    </div>
                </div>
                <a href="#" class="site-footer__change-location">Change Location</a> 
            </div>
            <div class="site-footer__legal"> <span class="site-footer__copyright">&copy;2013 All Rights Reserved.</span> <span class="site-footer__charity-info">Registered Charity No.265464 (England &amp; Wales) No.SC037624 (Scotland).</span> <a href="#" class="site-footer__terms">Terms and Conditions / Privacy</a> </div>
        </div>
    </div>
    <div class="change-location-lightbox">
        <span class="change-location-lightbox__title">Tearfund has offices across the UK. Please choose your
local office for a better experience from Tearfund:</span> 
        <ul class="change-location-lightbox__offices">
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--england change-location-lightbox__offices-item--selected"> <a href="#" class="change-location-lightbox__link">England</a> </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--northern-ireland"> <a href="#" class="change-location-lightbox__link">Northern Ireland</a> </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--scotland"> <a href="#" class="change-location-lightbox__link">Scotland</a> </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--wales"> <a href="#" class="change-location-lightbox__link">Wales</a> </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--rotw"> <a href="#" class="change-location-lightbox__link">Rest of the world</a> </li>
        </ul>
        <a href="#" class="change-location-lightbox__close">Close</a> 
    </div>
</footer>
Twig
{{ header }}
<footer class="site-footer" role="contentinfo">

    <div class="site-footer__top">
        <div class="inner">
            <div class="site-footer__subscribe">

                <fieldset>
                    <legend class="site-footer__heading">Learn about our work and stay in touch</legend>

                    <div class="site-footer__subscribe-form">
                        <div class="field-set field-set--merged">
                            <div class="field-set__content">
                                <div class="field-set__items">
                                    <div class="field-set__item form-small-col-6">
                                        <label class="field-set__label">First Name</label>
                                        <input placeholder="First Name" class="field-set__input" type="text" />
                                        <span class="error-message">Please enter a valid last name.</span>
                                    </div>
                                    <div class="field-set__item form-small-col-6">
                                        <label class="field-set__label">Last Name</label>
                                        <input placeholder="Last Name"  class="field-set__input" type="text" />
                                        <span class="error-message">Please enter your last name</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="field-set">
                            <div class="field-set__content">
                                <div class="field-set__items">
                                    <div class="field-set__item form-large-col-8">
                                        <label class="field-set__label">Email</label>
                                        <input placeholder="Email" class="field-set__input" type="text" />
                                    </div>
                                    <div class="field-set__item field-set__item--submit form-large-col-4">
                                        <input type="submit" value="Subscribe" class="button site-footer__subscribe-button" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <span class="site-footer__disclaimer">You'll get an email about once a month. We never share your details.</span>

                <div class="site-footer__social">

                    {% for social in footer_social %}
                        <a class="site-footer__social-link site-footer__social-link--{{ social.name }}" href="{{ social.url }}" target="_blank" title="{{ social.name }}">
                            <span class="site-footer__social-link-text">{{ social.name }}</span>
                        </a>
                    {% endfor %}
                    
                </div>
            </div>

            {% for column in footer_columns %}

                <div class="site-footer__nav">
                    <ul class="site-footer__nav-list">
                        <h2>{{ column.name }}</h2>

                        {% for link in column.links %}
                            <li>
                                <a href="{{ link.url }}">{{ link.name }}</a>
                            </li>
                        {% endfor %}

                    </ul>
                </div>

            {% endfor %}

        </div>
    </div>
    <div class="site-footer__bottom">
        <div class="inner">
            <div class="site-footer__logo-container">
                <a class="site-footer__logo" href="/">
                    <img class="site-footer__image" src="/images/mainsite5/logo@2x.png" alt="Tearfund" />
                </a>

                <!-- The strapline is optional -->
                <div class="site-footer__strapline">
                    <img class="site-footer__image" src="/images/mainsite5/following-jesus@2x.png" alt="Following Jesus where the need is greatest" />
                </div>
            </div>

            <div class="site-footer__location-container">
                <div class="site-footer__vcard">
                    <div class="vcard">
                        <a href="/en/About_Us/Contact_us" class="fn org url">Tearfund</a>
                        <div class="adr">
                        <div class="street-address">100 Church Road</div>
                        <span class="locality">Teddington</span>
                        <span class="postal-code">TW11 8QE</span>
                        </div>
                        <div class="tel">0208 977 9144</div>
                        <div><a href="mailto:info@tearfund.org">info@tearfund.org</a></div>
                    </div>
                </div>

                <a href="#" class="site-footer__change-location">Change Location</a>
            </div>

            <div class="site-footer__legal">
                <span class="site-footer__copyright">&copy;2013 All Rights Reserved.</span>
                <span class="site-footer__charity-info">Registered Charity No.265464 (England &amp; Wales) No.SC037624 (Scotland).</span>
                <a href="#" class="site-footer__terms">Terms and Conditions / Privacy</a>
            </div>
        </div>
    </div>

    <div class="change-location-lightbox">
        <span class="change-location-lightbox__title">Tearfund has offices across the UK. Please choose your
local office for a better experience from Tearfund:</span>

        <ul class="change-location-lightbox__offices">
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--england change-location-lightbox__offices-item--selected">
                <a href="#" class="change-location-lightbox__link">England</a>
            </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--northern-ireland">
                <a href="#" class="change-location-lightbox__link">Northern Ireland</a>
            </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--scotland">
                <a href="#" class="change-location-lightbox__link">Scotland</a>
            </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--wales">
                <a href="#" class="change-location-lightbox__link">Wales</a>
            </li>
            <li class="change-location-lightbox__offices-item change-location-lightbox__offices-item--rotw">
                <a href="#" class="change-location-lightbox__link">Rest of the world</a>
            </li>
        </ul>
        <a href="#" class="change-location-lightbox__close">Close</a>
    </div>
</footer>
{
    "footer_columns": {
        "0": {
            "name": "Our sites",
            "links": {
                "0": {
                    "name": "Connected Church",
                    "url": "#"
                },
                "1": {
                    "name": "Inspired Individual",
                    "url": "#"
                },
                "2": {
                    "name": "Created - Fair Trade gifts",
                    "url": "#"
                },
                "3": {
                    "name": "Toilet Twinning",
                    "url": "#"
                },
                "4": {
                    "name": "Resources Shop",
                    "url": "#"
                }
            }
        },
        "1": {
            "name": "Pages for",
            "links": {
                "0": {
                    "name": "Jobs",
                    "url": "#"
                },
                "1": {
                    "name": "Media",
                    "url": "#"
                },
                "2": {
                    "name": "Policy reports",
                    "url": "#"
                },
                "3": {
                    "name": "International Learning",
                    "url": "#"
                },
                "4": {
                    "name": "Youth & Students",
                    "url": "#"
                }
            }
        }
    },
    "footer_social": {
        "0": {
            "name": "facebook",
            "url": "https:\/\/www.facebook.com\/tearfund"
        },
        "1": {
            "name": "twitter",
            "url": "http:\/\/www.twitter.com\/tearfund"
        },
        "2": {
            "name": "youtube",
            "url": "http:\/\/www.youtube.com\/tearfund"
        },
        "3": {
            "name": "instagram",
            "url": "https:\/\/instagram.com\/tearfund"
        },
        "4": {
            "name": "whatsapp",
            "url": "https:\/\/instagram.com\/tearfund"
        }
    }
}