Core
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'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'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' %}
{% 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{% if hasScrollingDonate %} header--scrolling-donate{% endif %}">
<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"
}
}
}
}
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'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'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' %}
{% 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{% if hasScrollingDonate %} header--scrolling-donate{% endif %}">
<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"
}
}
}
}Header Scrolling Donate {% include 'components/core/header~scrolling-donate' %}
HTML
<header class="regular header-small header-sticky" role="banner" style="position: relative">
<div class="main header header--scrolling-donate">
<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'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'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' %}
{% 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{% if hasScrollingDonate %} header--scrolling-donate{% endif %}">
<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"
}
}
},
"hasScrollingDonate": true
}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 & 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">©2013 All Rights Reserved.</span>
<span class="site-footer__charity-info">Registered Charity No.265464 (England & 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
<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">©2013 All Rights Reserved.</span>
<span class="site-footer__charity-info">Registered Charity No.265464 (England & 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 Tilz {% include 'components/core/header~tilz' %}
HTML
<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'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'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' %}
{% 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{% if hasScrollingDonate %} header--scrolling-donate{% endif %}">
<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 Connected {% include 'components/core/header~connected' %}
HTML
<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'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'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' %}
{% 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{% if hasScrollingDonate %} header--scrolling-donate{% endif %}">
<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"
}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>{}