Core
#
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"
        }
    }
}
Header Connected {% include 'components/core/header~connected' %}
#
HTML
<header class="alternative small-alternative header-sticky" role="banner" style="position: relative">
    <div class="main header">
        <div class="inner">
            <div class="logo">
                <span class="img">
                    <a href="/">
                        <img src="/images/mainsite5/logo@2x.png" alt="Tearfund">
                    </a>
                </span>
            </div>
            <h1 class="sub-brand">
                Connected Church
            </h1>
            <div class="inline-header-items">
                <div class="header-inline header-login"> <a class="show-lightbox" data-lightbox="99999" href="#">Login</a> </div>
                <div class="lightbox" data-lightbox="99999">
                    <h3 class="lightbox__title">
                        Login
                    </h3>
                    <div class="field-set">
                        <label class="field-set__title" for="text1">Username/Email</label>
                        <div class="field-set__content">
                            <div class="field-set__items">
                                <div class="field-set__item">
                                    <span class="field-set__label">Username/Email</span> 
                                    <input class="field-set__input" id="text1" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field-set">
                        <label class="field-set__title" for="text1">Password</label>
                        <div class="field-set__content">
                            <div class="field-set__items">
                                <div class="field-set__item">
                                    <span class="field-set__label">Password</span> 
                                    <input class="field-set__input" id="text1" type="password">
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="submit" value="Login" class="button">
                    <a href="#" class="lightbox__close lightbox__close--icon"></a> 
                </div>
                <div class="header-inline header-search search">
                    <!--<a href="#">Search</a>-->
                    <label for="top-search">Search</label>
                    <input class="top-search" type="text" placeholder="Search">
                    <input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
                </div>
                <div class="header-inline header-login">
<a href="#"></a>
</div>
                <div class="header-inline header-social">
                    <a href="#">Follow</a>

                    <div class="header-inline header-social--content">
<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
<a class="header-inline header-social__icon header-social__email" href="#"></a>
<a class="header-inline header-social__icon header-social__rss" href="#"></a>
</div>
                </div>
                <div class="header-inline header-donate header-primary-button">
<a href="#" class="button">Donate Now</a>
</div>
            </div>
            <nav class="primary">
                <ul>
                    <li class="has-sub-nav">
                        <a href="#">About Us</a>

                        <ul>
                            <li>
                                <a href="#">Where your money goes</a>

                                <li>
                                    <a href="#">How we work</a>

                                    <li>
                                        <a href="#">History</a>

                                        <li>
                                            <a href="#">Who&#039;s who</a>

                                            <li>
                                                <a href="#">Finance</a>

                                                <li>
                                                    <a href="#">Contact us</a>

                                                </ul>
                                            </li>
                                            <li class="has-sub-nav">
                                                <a href="#">Get Involved</a>

                                                <ul>
                                                    <li>
                                                        <a href="#">Pray</a>

                                                        <li>
                                                            <a href="#">Action</a>

                                                            <li>
                                                                <a href="#">Events</a>

                                                                <li>
                                                                    <a href="#">Fundraise</a>

                                                                    <li>
                                                                        <a href="#">Your church</a>

                                                                        <li>
                                                                            <a href="#">Go overseas</a>

                                                                            <li>
                                                                                <a href="#">Volunteer</a>

                                                                                <li>
                                                                                    <a href="#">Around the UK</a>

                                                                                    <li>
                                                                                        <a href="#">Lifestyle</a>

                                                                                        <li>
                                                                                            <a href="#">Youth</a>

                                                                                            <li>
                                                                                                <a href="#">Resources</a>

                                                                                            </ul>
                                                                                        </li>
                                                                                        <li class="has-sub-nav">
                                                                                            <a href="#">Latest</a>

                                                                                            <ul>
                                                                                                <li>
                                                                                                    <a href="#">Hunger steals</a>

                                                                                                    <li>
                                                                                                        <a href="#">East Africa</a>

                                                                                                        <li>
                                                                                                            <a href="#">Yemen</a>

                                                                                                            <li>
                                                                                                                <a href="#">Middle East Crisis</a>

                                                                                                                <li>
                                                                                                                    <a href="#">Yasmin&#039;s story</a>

                                                                                                                    <li>
                                                                                                                        <a href="#">Latest stories</a>

                                                                                                                    </ul>
                                                                                                                </li>
                                                                                                            </ul>
                                                                                                        </nav>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </header>
Twig
{% if header == 'regular' or header == 'usa' %}
    <header class="regular header-small header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% elseif header == 'alternative' or header == 'tilz' %}
	<header class="alternative small-alternative header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% endif %}
	<div class="main header">
		<div class="inner">
			<div class="logo">
					<span class="img"><a href="/"><img src="{{logo}}" alt="Tearfund"></a></span>
			</div>
			{% if header == 'alternative' or header == 'tilz' %}
				<h1 class="sub-brand">{{sub_brand}}</h1>
			{% endif %}
			<div class="inline-header-items">

				{% if header == 'tilz' %}
					<div class="header-inline header-language">
	                    <a class="" href="#">English</a>
	                    <div class="header-language--content">
	                        <ul>
	                            <li><a class="" href="#">Español</a></li>
	                            <li><a class="" href="#">Français</a></li>
	                            <li><a class="" href="#">Português</a></li>
	                            <li><a class="" href="#">Other languages</a></li>
	                        </ul>
	                    </div>
	                </div>    
	            {% endif %}
				
				{% if header == 'alternative' %}
					<div class="header-inline header-login">
	                    <a class="show-lightbox" data-lightbox="99999" href="#">Login</a>
	                </div>

	                <div class="lightbox"  data-lightbox="99999">
	                    <h3 class="lightbox__title">Login</h3>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Username/Email</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Username/Email</span>
	                                    <input class="field-set__input" id="text1" type="text">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Password</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Password</span>
	                                    <input class="field-set__input" id="text1" type="password">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <input type="submit" value="Login" class="button">
	                    <a href="#" class="lightbox__close lightbox__close--icon"></a>
	                </div>
	            {% endif %}

	            {% if header == 'alternative' or header == 'regular' or header == 'tilz' %}
					<div class="header-inline header-search search">
						<!--<a href="#">Search</a>-->
						<label for="top-search">Search</label>
						<input class="top-search" type="text" placeholder="Search">
						<input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
					</div>
					<div class="header-inline header-login">
						<a href="#"></a>
					</div>
					<div class="header-inline header-social">
						<a href="#">Follow</a>
						<div class="header-inline header-social--content">
							<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
							<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
							<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
							<a class="header-inline header-social__icon header-social__email" href="#"></a>
							<a class="header-inline header-social__icon header-social__rss" href="#"></a>
						</div>
					</div>
				{% endif %}

				{% if header == 'alternative' or header == 'regular' %}
				<div class="header-inline header-donate header-primary-button">
					<a href="#" class="button">Donate Now</a>
				</div>
				{% endif %}

				{% if header == 'usa' %}
					<a href="#" class="button-underline button-underline--twitter">Follow Us</a>
				{% endif %}
			
			</div>
			<nav class="primary">
				<ul>
					{% for nav in nav %}
						<li class="has-sub-nav">
							<a href="#">{{nav.title}}</a>
							<ul>
								{% for page in nav.pages %}
									<li><a href="#">{{ page }}</a>
								{% endfor %}
							</ul>
						</li>
					{% endfor %}
				</ul>
			</nav>
		</div>
	</div>
</header>
{
    "header": "alternative",
    "logo": "\/images\/mainsite5\/logo@2x.png",
    "nav": {
        "0": {
            "title": "About Us",
            "pages": {
                "0": "Where your money goes",
                "1": "How we work",
                "2": "History",
                "3": "Who's who",
                "4": "Finance",
                "5": "Contact us"
            }
        },
        "1": {
            "title": "Get Involved",
            "pages": {
                "0": "Pray",
                "1": "Action",
                "2": "Events",
                "3": "Fundraise",
                "4": "Your church",
                "5": "Go overseas",
                "6": "Volunteer",
                "7": "Around the UK",
                "8": "Lifestyle",
                "9": "Youth",
                "10": "Resources"
            }
        },
        "2": {
            "title": "Latest",
            "pages": {
                "0": "Hunger steals",
                "1": "East Africa",
                "2": "Yemen",
                "3": "Middle East Crisis",
                "4": "Yasmin's story",
                "5": "Latest stories"
            }
        }
    },
    "sub_brand": "Connected Church"
}
Header Tilz {% include 'components/core/header~tilz' %}
#
HTML
<header class="alternative small-alternative header-sticky" role="banner" style="position: relative">
    <div class="main header">
        <div class="inner">
            <div class="logo">
                <span class="img">
                    <a href="/">
                        <img src="/images/mainsite5/logo@2x.png" alt="Tearfund">
                    </a>
                </span>
            </div>
            <h1 class="sub-brand">
                Learn
            </h1>
            <div class="inline-header-items">
                <div class="header-inline header-language">
                    <a class="" href="#">English</a> 
                    <div class="header-language--content">
                        <ul>
                            <li><a class="" href="#">Español</a></li>
                            <li><a class="" href="#">Français</a></li>
                            <li><a class="" href="#">Português</a></li>
                            <li><a class="" href="#">Other languages</a></li>
                        </ul>
                    </div>
                </div>
                <div class="header-inline header-search search">
                    <!--<a href="#">Search</a>-->
                    <label for="top-search">Search</label>
                    <input class="top-search" type="text" placeholder="Search">
                    <input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
                </div>
                <div class="header-inline header-login">
<a href="#"></a>
</div>
                <div class="header-inline header-social">
                    <a href="#">Follow</a>

                    <div class="header-inline header-social--content">
<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
<a class="header-inline header-social__icon header-social__email" href="#"></a>
<a class="header-inline header-social__icon header-social__rss" href="#"></a>
</div>
                </div>
            </div>
            <nav class="primary">
                <ul>
                    <li class="has-sub-nav">
                        <a href="#">About Us</a>

                        <ul>
                            <li>
                                <a href="#">Where your money goes</a>

                                <li>
                                    <a href="#">How we work</a>

                                    <li>
                                        <a href="#">History</a>

                                        <li>
                                            <a href="#">Who&#039;s who</a>

                                            <li>
                                                <a href="#">Finance</a>

                                                <li>
                                                    <a href="#">Contact us</a>

                                                </ul>
                                            </li>
                                            <li class="has-sub-nav">
                                                <a href="#">Get Involved</a>

                                                <ul>
                                                    <li>
                                                        <a href="#">Pray</a>

                                                        <li>
                                                            <a href="#">Action</a>

                                                            <li>
                                                                <a href="#">Events</a>

                                                                <li>
                                                                    <a href="#">Fundraise</a>

                                                                    <li>
                                                                        <a href="#">Your church</a>

                                                                        <li>
                                                                            <a href="#">Go overseas</a>

                                                                            <li>
                                                                                <a href="#">Volunteer</a>

                                                                                <li>
                                                                                    <a href="#">Around the UK</a>

                                                                                    <li>
                                                                                        <a href="#">Lifestyle</a>

                                                                                        <li>
                                                                                            <a href="#">Youth</a>

                                                                                            <li>
                                                                                                <a href="#">Resources</a>

                                                                                            </ul>
                                                                                        </li>
                                                                                        <li class="has-sub-nav">
                                                                                            <a href="#">Latest</a>

                                                                                            <ul>
                                                                                                <li>
                                                                                                    <a href="#">Hunger steals</a>

                                                                                                    <li>
                                                                                                        <a href="#">East Africa</a>

                                                                                                        <li>
                                                                                                            <a href="#">Yemen</a>

                                                                                                            <li>
                                                                                                                <a href="#">Middle East Crisis</a>

                                                                                                                <li>
                                                                                                                    <a href="#">Yasmin&#039;s story</a>

                                                                                                                    <li>
                                                                                                                        <a href="#">Latest stories</a>

                                                                                                                    </ul>
                                                                                                                </li>
                                                                                                            </ul>
                                                                                                        </nav>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </header>
Twig
{% if header == 'regular' or header == 'usa' %}
    <header class="regular header-small header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% elseif header == 'alternative' or header == 'tilz' %}
	<header class="alternative small-alternative header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% endif %}
	<div class="main header">
		<div class="inner">
			<div class="logo">
					<span class="img"><a href="/"><img src="{{logo}}" alt="Tearfund"></a></span>
			</div>
			{% if header == 'alternative' or header == 'tilz' %}
				<h1 class="sub-brand">{{sub_brand}}</h1>
			{% endif %}
			<div class="inline-header-items">

				{% if header == 'tilz' %}
					<div class="header-inline header-language">
	                    <a class="" href="#">English</a>
	                    <div class="header-language--content">
	                        <ul>
	                            <li><a class="" href="#">Español</a></li>
	                            <li><a class="" href="#">Français</a></li>
	                            <li><a class="" href="#">Português</a></li>
	                            <li><a class="" href="#">Other languages</a></li>
	                        </ul>
	                    </div>
	                </div>    
	            {% endif %}
				
				{% if header == 'alternative' %}
					<div class="header-inline header-login">
	                    <a class="show-lightbox" data-lightbox="99999" href="#">Login</a>
	                </div>

	                <div class="lightbox"  data-lightbox="99999">
	                    <h3 class="lightbox__title">Login</h3>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Username/Email</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Username/Email</span>
	                                    <input class="field-set__input" id="text1" type="text">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Password</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Password</span>
	                                    <input class="field-set__input" id="text1" type="password">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <input type="submit" value="Login" class="button">
	                    <a href="#" class="lightbox__close lightbox__close--icon"></a>
	                </div>
	            {% endif %}

	            {% if header == 'alternative' or header == 'regular' or header == 'tilz' %}
					<div class="header-inline header-search search">
						<!--<a href="#">Search</a>-->
						<label for="top-search">Search</label>
						<input class="top-search" type="text" placeholder="Search">
						<input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
					</div>
					<div class="header-inline header-login">
						<a href="#"></a>
					</div>
					<div class="header-inline header-social">
						<a href="#">Follow</a>
						<div class="header-inline header-social--content">
							<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
							<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
							<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
							<a class="header-inline header-social__icon header-social__email" href="#"></a>
							<a class="header-inline header-social__icon header-social__rss" href="#"></a>
						</div>
					</div>
				{% endif %}

				{% if header == 'alternative' or header == 'regular' %}
				<div class="header-inline header-donate header-primary-button">
					<a href="#" class="button">Donate Now</a>
				</div>
				{% endif %}

				{% if header == 'usa' %}
					<a href="#" class="button-underline button-underline--twitter">Follow Us</a>
				{% endif %}
			
			</div>
			<nav class="primary">
				<ul>
					{% for nav in nav %}
						<li class="has-sub-nav">
							<a href="#">{{nav.title}}</a>
							<ul>
								{% for page in nav.pages %}
									<li><a href="#">{{ page }}</a>
								{% endfor %}
							</ul>
						</li>
					{% endfor %}
				</ul>
			</nav>
		</div>
	</div>
</header>
{
    "header": "tilz",
    "logo": "\/images\/mainsite5\/logo@2x.png",
    "nav": {
        "0": {
            "title": "About Us",
            "pages": {
                "0": "Where your money goes",
                "1": "How we work",
                "2": "History",
                "3": "Who's who",
                "4": "Finance",
                "5": "Contact us"
            }
        },
        "1": {
            "title": "Get Involved",
            "pages": {
                "0": "Pray",
                "1": "Action",
                "2": "Events",
                "3": "Fundraise",
                "4": "Your church",
                "5": "Go overseas",
                "6": "Volunteer",
                "7": "Around the UK",
                "8": "Lifestyle",
                "9": "Youth",
                "10": "Resources"
            }
        },
        "2": {
            "title": "Latest",
            "pages": {
                "0": "Hunger steals",
                "1": "East Africa",
                "2": "Yemen",
                "3": "Middle East Crisis",
                "4": "Yasmin's story",
                "5": "Latest stories"
            }
        }
    },
    "sub_brand": "Learn"
}
Header {% include 'components/core/header' %}
#
HTML
<header class="regular header-small header-sticky" role="banner" style="position: relative">
    <div class="main header">
        <div class="inner">
            <div class="logo">
                <span class="img">
                    <a href="/">
                        <img src="/images/mainsite5/logo@2x.png" alt="Tearfund">
                    </a>
                </span>
            </div>
            <div class="inline-header-items">
                <div class="header-inline header-search search">
                    <!--<a href="#">Search</a>-->
                    <label for="top-search">Search</label>
                    <input class="top-search" type="text" placeholder="Search">
                    <input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
                </div>
                <div class="header-inline header-login">
<a href="#"></a>
</div>
                <div class="header-inline header-social">
                    <a href="#">Follow</a>

                    <div class="header-inline header-social--content">
<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
<a class="header-inline header-social__icon header-social__email" href="#"></a>
<a class="header-inline header-social__icon header-social__rss" href="#"></a>
</div>
                </div>
                <div class="header-inline header-donate header-primary-button">
<a href="#" class="button">Donate Now</a>
</div>
            </div>
            <nav class="primary">
                <ul>
                    <li class="has-sub-nav">
                        <a href="#">About Us</a>

                        <ul>
                            <li>
                                <a href="#">Where your money goes</a>

                                <li>
                                    <a href="#">How we work</a>

                                    <li>
                                        <a href="#">History</a>

                                        <li>
                                            <a href="#">Who&#039;s who</a>

                                            <li>
                                                <a href="#">Finance</a>

                                                <li>
                                                    <a href="#">Contact us</a>

                                                </ul>
                                            </li>
                                            <li class="has-sub-nav">
                                                <a href="#">Get Involved</a>

                                                <ul>
                                                    <li>
                                                        <a href="#">Pray</a>

                                                        <li>
                                                            <a href="#">Action</a>

                                                            <li>
                                                                <a href="#">Events</a>

                                                                <li>
                                                                    <a href="#">Fundraise</a>

                                                                    <li>
                                                                        <a href="#">Your church</a>

                                                                        <li>
                                                                            <a href="#">Go overseas</a>

                                                                            <li>
                                                                                <a href="#">Volunteer</a>

                                                                                <li>
                                                                                    <a href="#">Around the UK</a>

                                                                                    <li>
                                                                                        <a href="#">Lifestyle</a>

                                                                                        <li>
                                                                                            <a href="#">Youth</a>

                                                                                            <li>
                                                                                                <a href="#">Resources</a>

                                                                                            </ul>
                                                                                        </li>
                                                                                        <li class="has-sub-nav">
                                                                                            <a href="#">Latest</a>

                                                                                            <ul>
                                                                                                <li>
                                                                                                    <a href="#">Hunger steals</a>

                                                                                                    <li>
                                                                                                        <a href="#">East Africa</a>

                                                                                                        <li>
                                                                                                            <a href="#">Yemen</a>

                                                                                                            <li>
                                                                                                                <a href="#">Middle East Crisis</a>

                                                                                                                <li>
                                                                                                                    <a href="#">Yasmin&#039;s story</a>

                                                                                                                    <li>
                                                                                                                        <a href="#">Latest stories</a>

                                                                                                                    </ul>
                                                                                                                </li>
                                                                                                            </ul>
                                                                                                        </nav>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </header>
Twig
{% if header == 'regular' or header == 'usa' %}
    <header class="regular header-small header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% elseif header == 'alternative' or header == 'tilz' %}
	<header class="alternative small-alternative header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% endif %}
	<div class="main header">
		<div class="inner">
			<div class="logo">
					<span class="img"><a href="/"><img src="{{logo}}" alt="Tearfund"></a></span>
			</div>
			{% if header == 'alternative' or header == 'tilz' %}
				<h1 class="sub-brand">{{sub_brand}}</h1>
			{% endif %}
			<div class="inline-header-items">

				{% if header == 'tilz' %}
					<div class="header-inline header-language">
	                    <a class="" href="#">English</a>
	                    <div class="header-language--content">
	                        <ul>
	                            <li><a class="" href="#">Español</a></li>
	                            <li><a class="" href="#">Français</a></li>
	                            <li><a class="" href="#">Português</a></li>
	                            <li><a class="" href="#">Other languages</a></li>
	                        </ul>
	                    </div>
	                </div>    
	            {% endif %}
				
				{% if header == 'alternative' %}
					<div class="header-inline header-login">
	                    <a class="show-lightbox" data-lightbox="99999" href="#">Login</a>
	                </div>

	                <div class="lightbox"  data-lightbox="99999">
	                    <h3 class="lightbox__title">Login</h3>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Username/Email</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Username/Email</span>
	                                    <input class="field-set__input" id="text1" type="text">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Password</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Password</span>
	                                    <input class="field-set__input" id="text1" type="password">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <input type="submit" value="Login" class="button">
	                    <a href="#" class="lightbox__close lightbox__close--icon"></a>
	                </div>
	            {% endif %}

	            {% if header == 'alternative' or header == 'regular' or header == 'tilz' %}
					<div class="header-inline header-search search">
						<!--<a href="#">Search</a>-->
						<label for="top-search">Search</label>
						<input class="top-search" type="text" placeholder="Search">
						<input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
					</div>
					<div class="header-inline header-login">
						<a href="#"></a>
					</div>
					<div class="header-inline header-social">
						<a href="#">Follow</a>
						<div class="header-inline header-social--content">
							<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
							<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
							<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
							<a class="header-inline header-social__icon header-social__email" href="#"></a>
							<a class="header-inline header-social__icon header-social__rss" href="#"></a>
						</div>
					</div>
				{% endif %}

				{% if header == 'alternative' or header == 'regular' %}
				<div class="header-inline header-donate header-primary-button">
					<a href="#" class="button">Donate Now</a>
				</div>
				{% endif %}

				{% if header == 'usa' %}
					<a href="#" class="button-underline button-underline--twitter">Follow Us</a>
				{% endif %}
			
			</div>
			<nav class="primary">
				<ul>
					{% for nav in nav %}
						<li class="has-sub-nav">
							<a href="#">{{nav.title}}</a>
							<ul>
								{% for page in nav.pages %}
									<li><a href="#">{{ page }}</a>
								{% endfor %}
							</ul>
						</li>
					{% endfor %}
				</ul>
			</nav>
		</div>
	</div>
</header>
{
    "header": "regular",
    "logo": "\/images\/mainsite5\/logo@2x.png",
    "nav": {
        "0": {
            "title": "About Us",
            "pages": {
                "0": "Where your money goes",
                "1": "How we work",
                "2": "History",
                "3": "Who's who",
                "4": "Finance",
                "5": "Contact us"
            }
        },
        "1": {
            "title": "Get Involved",
            "pages": {
                "0": "Pray",
                "1": "Action",
                "2": "Events",
                "3": "Fundraise",
                "4": "Your church",
                "5": "Go overseas",
                "6": "Volunteer",
                "7": "Around the UK",
                "8": "Lifestyle",
                "9": "Youth",
                "10": "Resources"
            }
        },
        "2": {
            "title": "Latest",
            "pages": {
                "0": "Hunger steals",
                "1": "East Africa",
                "2": "Yemen",
                "3": "Middle East Crisis",
                "4": "Yasmin's story",
                "5": "Latest stories"
            }
        }
    }
}
Footer Usa {% include 'components/core/footer-usa' %}
#
HTML
<footer class="site-footer site-footer--usa">
    <div class="site-footer__top">
        <div class="inner">
PO Box 3810, Reston VA 20195 | ©2018 All Rights Reserved | <a href="/privacy-policy">PRIVACY POLICY</a>
</div>
    </div>
</footer>
Twig
<footer class="site-footer site-footer--usa">
	<div class="site-footer__top">
		<div class="inner">
			PO Box 3810, Reston VA 20195  | ©2018 All Rights Reserved | <a href="/privacy-policy">PRIVACY POLICY</a>
		</div>
	</div>
</footer>
{}
Header Usa {% include 'components/core/header~usa' %}
#
HTML
<header class="regular header-small header-sticky" role="banner" style="position: relative">
    <div class="main header">
        <div class="inner">
            <div class="logo">
                <span class="img">
                    <a href="/">
                        <img src="/images/mainsite5/logo@2x.png" alt="Tearfund">
                    </a>
                </span>
            </div>
            <div class="inline-header-items"> <a href="#" class="button-underline button-underline--twitter">Follow Us</a> </div>
            <nav class="primary">
                <ul>
                    <li class="has-sub-nav">
                        <a href="#">About Us</a>

                        <ul>
                            <li>
                                <a href="#">Where your money goes</a>

                                <li>
                                    <a href="#">How we work</a>

                                    <li>
                                        <a href="#">History</a>

                                        <li>
                                            <a href="#">Who&#039;s who</a>

                                            <li>
                                                <a href="#">Finance</a>

                                                <li>
                                                    <a href="#">Contact us</a>

                                                </ul>
                                            </li>
                                            <li class="has-sub-nav">
                                                <a href="#">Get Involved</a>

                                                <ul>
                                                    <li>
                                                        <a href="#">Pray</a>

                                                        <li>
                                                            <a href="#">Action</a>

                                                            <li>
                                                                <a href="#">Events</a>

                                                                <li>
                                                                    <a href="#">Fundraise</a>

                                                                    <li>
                                                                        <a href="#">Your church</a>

                                                                        <li>
                                                                            <a href="#">Go overseas</a>

                                                                            <li>
                                                                                <a href="#">Volunteer</a>

                                                                                <li>
                                                                                    <a href="#">Around the UK</a>

                                                                                    <li>
                                                                                        <a href="#">Lifestyle</a>

                                                                                        <li>
                                                                                            <a href="#">Youth</a>

                                                                                            <li>
                                                                                                <a href="#">Resources</a>

                                                                                            </ul>
                                                                                        </li>
                                                                                        <li class="has-sub-nav">
                                                                                            <a href="#">Latest</a>

                                                                                            <ul>
                                                                                                <li>
                                                                                                    <a href="#">Hunger steals</a>

                                                                                                    <li>
                                                                                                        <a href="#">East Africa</a>

                                                                                                        <li>
                                                                                                            <a href="#">Yemen</a>

                                                                                                            <li>
                                                                                                                <a href="#">Middle East Crisis</a>

                                                                                                                <li>
                                                                                                                    <a href="#">Yasmin&#039;s story</a>

                                                                                                                    <li>
                                                                                                                        <a href="#">Latest stories</a>

                                                                                                                    </ul>
                                                                                                                </li>
                                                                                                            </ul>
                                                                                                        </nav>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </header>
Twig
{% if header == 'regular' or header == 'usa' %}
    <header class="regular header-small header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% elseif header == 'alternative' or header == 'tilz' %}
	<header class="alternative small-alternative header-sticky" role="banner" {% if view != 'template' %}style="position: relative"{% endif %}>
{% endif %}
	<div class="main header">
		<div class="inner">
			<div class="logo">
					<span class="img"><a href="/"><img src="{{logo}}" alt="Tearfund"></a></span>
			</div>
			{% if header == 'alternative' or header == 'tilz' %}
				<h1 class="sub-brand">{{sub_brand}}</h1>
			{% endif %}
			<div class="inline-header-items">

				{% if header == 'tilz' %}
					<div class="header-inline header-language">
	                    <a class="" href="#">English</a>
	                    <div class="header-language--content">
	                        <ul>
	                            <li><a class="" href="#">Español</a></li>
	                            <li><a class="" href="#">Français</a></li>
	                            <li><a class="" href="#">Português</a></li>
	                            <li><a class="" href="#">Other languages</a></li>
	                        </ul>
	                    </div>
	                </div>    
	            {% endif %}
				
				{% if header == 'alternative' %}
					<div class="header-inline header-login">
	                    <a class="show-lightbox" data-lightbox="99999" href="#">Login</a>
	                </div>

	                <div class="lightbox"  data-lightbox="99999">
	                    <h3 class="lightbox__title">Login</h3>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Username/Email</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Username/Email</span>
	                                    <input class="field-set__input" id="text1" type="text">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <div class="field-set">
	                        <label class="field-set__title" for="text1">Password</label>

	                        <div class="field-set__content">
	                            <div class="field-set__items">
	                                <div class="field-set__item">
	                                    <span class="field-set__label">Password</span>
	                                    <input class="field-set__input" id="text1" type="password">
	                                </div>
	                            </div>
	                        </div>

	                    </div>
	                    <input type="submit" value="Login" class="button">
	                    <a href="#" class="lightbox__close lightbox__close--icon"></a>
	                </div>
	            {% endif %}

	            {% if header == 'alternative' or header == 'regular' or header == 'tilz' %}
					<div class="header-inline header-search search">
						<!--<a href="#">Search</a>-->
						<label for="top-search">Search</label>
						<input class="top-search" type="text" placeholder="Search">
						<input type="button" name="btnSearch" onclick="javascript:..." class="header-search__button" id="btnSearch">
					</div>
					<div class="header-inline header-login">
						<a href="#"></a>
					</div>
					<div class="header-inline header-social">
						<a href="#">Follow</a>
						<div class="header-inline header-social--content">
							<a class="header-inline header-social__icon header-social__facebook" href="#"></a>
							<a class="header-inline header-social__icon header-social__twitter" href="#"></a>
							<a class="header-inline header-social__icon header-social__instagram" href="#"></a>
							<a class="header-inline header-social__icon header-social__email" href="#"></a>
							<a class="header-inline header-social__icon header-social__rss" href="#"></a>
						</div>
					</div>
				{% endif %}

				{% if header == 'alternative' or header == 'regular' %}
				<div class="header-inline header-donate header-primary-button">
					<a href="#" class="button">Donate Now</a>
				</div>
				{% endif %}

				{% if header == 'usa' %}
					<a href="#" class="button-underline button-underline--twitter">Follow Us</a>
				{% endif %}
			
			</div>
			<nav class="primary">
				<ul>
					{% for nav in nav %}
						<li class="has-sub-nav">
							<a href="#">{{nav.title}}</a>
							<ul>
								{% for page in nav.pages %}
									<li><a href="#">{{ page }}</a>
								{% endfor %}
							</ul>
						</li>
					{% endfor %}
				</ul>
			</nav>
		</div>
	</div>
</header>
{
    "header": "usa",
    "logo": "\/images\/mainsite5\/logo@2x.png",
    "nav": {
        "0": {
            "title": "About Us",
            "pages": {
                "0": "Where your money goes",
                "1": "How we work",
                "2": "History",
                "3": "Who's who",
                "4": "Finance",
                "5": "Contact us"
            }
        },
        "1": {
            "title": "Get Involved",
            "pages": {
                "0": "Pray",
                "1": "Action",
                "2": "Events",
                "3": "Fundraise",
                "4": "Your church",
                "5": "Go overseas",
                "6": "Volunteer",
                "7": "Around the UK",
                "8": "Lifestyle",
                "9": "Youth",
                "10": "Resources"
            }
        },
        "2": {
            "title": "Latest",
            "pages": {
                "0": "Hunger steals",
                "1": "East Africa",
                "2": "Yemen",
                "3": "Middle East Crisis",
                "4": "Yasmin's story",
                "5": "Latest stories"
            }
        }
    }
}