Elements
#
Forms
#
Radio {% include 'elements/forms/radio' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa1" name="radioa" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioa1">Visa (debit)</label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa2" name="radioa" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioa2">Visa (credit)</label>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa1" name="radioa" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioa1">{{values.1}}</label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa2" name="radioa" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioa2">{{values.2}}</label>
            </div>
        </div>
    </div>
</div>
{
    "values": {
        "1": "Visa (debit)",
        "2": "Visa (credit)"
    }
}
Disclaimer {% include 'elements/forms/disclaimer' %}
#
HTML
<div class="form__disclaimer">
    <div class="article-inner">
        <p><em>We’d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time – just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes.</em></p>
    </div>
</div>
Twig
<div class="form__disclaimer">
    <div class="article-inner">
        <p><em>{{ disclaimer }}</em></p>
    </div>
</div>
{
    "disclaimer": "We\u2019d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time \u2013 just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes."
}

We’d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time – just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes.

Input Button {% include 'elements/forms/input-button' %}
#
HTML
<div class="field-set">
    <label class="field-set__title" for="text">Address</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-small-col-8 form-large-col-10 field-set__item--pad-right">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-small-col-4 form-large-col-2">
                <input type="submit" value="Find" class="secondary-button">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <label class="field-set__title" for="text">{{ label }}</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-small-col-8 form-large-col-10 field-set__item--pad-right">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
            <div class="field-set__item form-small-col-4 form-large-col-2">
                <input type="submit" value="{{button}}" class="secondary-button">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Address",
    "button": "Find"
}
Input {% include 'elements/forms/input' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input"
}
Merged Fields Three {% include 'elements/forms/merged-fields~three' %}
#
HTML
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">Text Field</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">{{ merged_field_label }}</span>

    <div class="field-set__content">
        <div class="field-set__items">
            
            {% for field in merged_fields %}
                <div class="field-set__item form-large-col-{{ merge_fields_col }}">
                    <label class="field-set__label">Text Field</label>
                    <input class="field-set__input" type="text">
                </div>
            {% endfor %}

        </div>
    </div>
</div>
{
    "merged_field_label": "Text Field",
    "merge_fields_col": 4,
    "merged_fields": {
        "0": {
            "label": "Text Field"
        },
        "1": {
            "label": "Text Field"
        },
        "2": {
            "label": "Text Field"
        }
    }
}
Text Field
Checkbox {% include 'elements/forms/checkbox' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox1" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox1"><span class="field-set__label-text">This is a really long choice that could be used as a confirmation</span></label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox2" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox2"><span class="field-set__label-text">Choice B</span></label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox3" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox3"><span class="field-set__label-text">Choice C</span></label>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            {% for value in values %}
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--checkbox default-style" id="checkbox{{loop.index}}" name="checkbox" type="checkbox" />
                    <label class="field-set__label field-set__label--checkbox" for="checkbox{{loop.index}}"><span class="field-set__label-text">{{value}}</span></label>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{
    "label": "Title",
    "values": {
        "1": "This is a really long choice that could be used as a confirmation",
        "2": "Choice B",
        "3": "Choice C"
    }
}
Merged Fields {% include 'elements/forms/merged-fields' %}
#
HTML
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">Text Field</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-large-col-6">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-6">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">{{ merged_field_label }}</span>

    <div class="field-set__content">
        <div class="field-set__items">
            
            {% for field in merged_fields %}
                <div class="field-set__item form-large-col-{{ merge_fields_col }}">
                    <label class="field-set__label">Text Field</label>
                    <input class="field-set__input" type="text">
                </div>
            {% endfor %}

        </div>
    </div>
</div>
{
    "merged_field_label": "Text Field",
    "merge_fields_col": 6,
    "merged_fields": {
        "0": {
            "label": "Text Field"
        },
        "1": {
            "label": "Text Field"
        }
    }
}
Text Field
Input Error {% include 'elements/forms/input~error' %}
#
HTML
<div class="field-set field-set--error">
    <label class="field-set__title" for="text">Email Input</label>
    <span class="error-message">Please enter a valid email address</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--error">
                <span class="field-set__label">you@yourdomain.com</span> 
                <input class="field-set__input" type="email">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "email",
    "placeholder": "you@yourdomain.com",
    "label": "Email Input",
    "error": "Please enter a valid email address"
}
Please enter a valid email address
you@yourdomain.com
Payment Type {% include 'elements/forms/payment-type' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="col-wrapper">
            <div class="field-set__items">
                <div class="payment-types">
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc1" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc1">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Mastercard (debit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc2" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc2">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Mastercard (credit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc3" name="radioc" type="radio" checked="checked" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc3">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Visa (debit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc4" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc4">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Visa (credit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc5" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc5">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Paypal
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="col-wrapper">
            <div class="field-set__items">
                <div class="payment-types">
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc1" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc1"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.1}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc2" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc2"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.2}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc3" name="radioc" type="radio" checked="checked" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc3"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.3}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc4" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc4"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.4}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc5" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc5"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.5}}</label>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{
    "payment": {
        "1": "Mastercard (debit)",
        "2": "Mastercard (credit)",
        "3": "Visa (debit)",
        "4": "Visa (credit)",
        "5": "Paypal"
    }
}
Input Email {% include 'elements/forms/input~email' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input"
}
Tabbed Radio {% include 'elements/forms/tabbed-radio' %}
#
HTML
<div class="field-set field-set--tabbed-radio">
    <span class="field-set__title">Direct Debit instruction is</span>

    <div class="field-set__content">
        <div class="field-set__items">
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe1" name="radioe" type="radio" checked="checked" />
                    <label class="field-set__label field-set__label--radio" for="radioe1">New</label>
                </div>
            </div>
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe2" name="radioe" type="radio" />
                    <label class="field-set__label field-set__label--radio" for="radioe2">Add to existing</label>
                </div>
            </div>
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe3" name="radioe" type="radio" />
                    <label class="field-set__label field-set__label--radio" for="radioe3">Replace existing</label>
                </div>
            </div>
        </div>
    </div>
Twig
<div class="field-set field-set--tabbed-radio">
<span class="field-set__title">{{label}}</span>
<div class="field-set__content">
    <div class="field-set__items">
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe1" name="radioe" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioe1">{{values.1}}</label>
            </div>
        </div>
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe2" name="radioe" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioe2">{{values.2}}</label>
            </div>
        </div>
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe3" name="radioe" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioe3">{{values.3}}</label>
            </div>
        </div>
    </div>
</div>
{
    "label": "Direct Debit instruction is",
    "values": {
        "1": "New",
        "2": "Add to existing",
        "3": "Replace existing"
    }
}
Direct Debit instruction is
Input With Limiter {% include 'elements/forms/input-with-limiter' %}
#
HTML
<div class="field-set">
    <div class="field-set__item">
        <div class="field-set__item field-set__input-limit-item form-large-col-12">
            <label class="field-set__label">Text Input</label>
            <input class="field-set__input field-set__input-limit" data-limit="50" type="textarea" />
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__item">
        <div class="field-set__item field-set__input-limit-item form-large-col-12">
            <label class="field-set__label">{{label}}</label>
            <input class="field-set__input field-set__input-limit" data-limit="{{limit}}" type="{{type}}" />
        </div>
    </div>
</div>
{
    "type": "textarea",
    "placeholder": "",
    "label": "Text Input",
    "limit": 50
}
Select {% include 'elements/forms/select' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--select">
                <!-- Multi field so this is a label - it will be visibly hidden though -->
                <label class="field-set__label field-set__label--select">Title</label>
                <div class="field-set__input field-set__input--select">
                    <div class="custom-select">
                        <span class="custom-select__selected-value"></span> 
                        <select class="custom-select__input" id="your-role" name="selecta2">
                            <option value="mr">Mr</option>
                            <option value="miss">Miss</option>
                            <option value="mrs">Mrs</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--select">
                <!-- Multi field so this is a label - it will be visibly hidden though -->
                <label class="field-set__label field-set__label--select">{{label}}</label>
                <div class="field-set__input field-set__input--select">
                    <div class="custom-select">
                        <span class="custom-select__selected-value"></span>
                        <select class="custom-select__input" id="your-role" name="selecta2">
                            <option value="mr">{{values.1}}</option>
                            <option value="miss">{{values.2}}</option>
                            <option value="mrs">{{values.3}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{
    "label": "Title",
    "values": {
        "1": "Mr",
        "2": "Miss",
        "3": "Mrs"
    }
}
Input Tooltip {% include 'elements/forms/input~tooltip' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="tooltip">
            <span class="tooltip__button">?</span> 
            <div class="tooltip__content" style="display: none;">Tooltip text</div>
        </div>
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input",
    "tooltip": "Tooltip text"
}
?
Input Date {% include 'elements/forms/input-date' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Date</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Date</span> 
                <input class="field-set__input field-set__input-date" value="15-8-2018" data-min-date="15.8.2018" data-max-date="15.10.2018" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-date" value="{{ default_date }}" data-min-date="15.8.2018" data-max-date="15.10.2018" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Date",
    "label": "Date",
    "default_date": "15-8-2018"
}
Select Date
Input Datetime {% include 'elements/forms/input-datetime' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Date</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Date</span> 
                <input class="field-set__input field-set__input-datetime" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-datetime" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Date",
    "label": "Date"
}
Select Date
Input Time {% include 'elements/forms/input-time' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Time</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Time</span> 
                <input class="field-set__input field-set__input-time" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-time" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Time",
    "label": "Time"
}
Select Time
Input Sortcode {% include 'elements/forms/input-sortcode' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Sort code</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--sort-code ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item field-set__item--sort-code {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Sort code"
}
Toggle {% include 'elements/forms/toggle' %}
#
HTML
<div class="inner">
    <div class="field-set">
        <div class="field-set__content">
            <div class="field-set__items">
                <div class="field-set__item">
                    <label class="field-set__label field-set__label--toggle">
                        <h4>
                            Tearfund action emails
                        </h4>
                        Join us and find out more about how you can put your faith into action to see His Kingdom come. 
                    </label>
                    <div class="field-set__item--switch">
                        <input class="field-set__input field-set__input--switch" id="checkboxa" name="checkbox" type="checkbox" checked="checked" />
                        <span class="field-set__switch-slider"></span> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="inner">
    <div class="field-set">
        <div class="field-set__content">
            <div class="field-set__items">
                <div class="field-set__item">
                    <label class="field-set__label field-set__label--toggle">
                        <h4>Tearfund action emails</h4>
                        Join us and find out more about how you can put your faith into action to see His Kingdom come.
                    </label>
                    <div class="field-set__item--switch">
                        <input class="field-set__input field-set__input--switch" id="checkboxa" name="checkbox" type="checkbox" checked="checked" />
                        <span class="field-set__switch-slider"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{}
Scaffolding
#
Columns {% include 'elements/scaffolding/columns' %}
#
HTML
<div class="inner clearfix patternlab-grid-display">
    <div class="large-col-12">One column</div>
    <div class="large-col-6">Two columns</div>
    <div class="large-col-6">Two columns</div>
    <div class="large-col-4">Three columns</div>
    <div class="large-col-4">Three columns</div>
    <div class="large-col-4">Three columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
</div>
Twig
<div class="inner clearfix patternlab-grid-display">
	<div class="large-col-12">One column</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>

	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>


</div>
{
    "row": {
        "1": {
            "span": "6"
        },
        "2": {
            "span": "6"
        }
    }
}
One column
Two columns
Two columns
Three columns
Three columns
Three columns
Four columns
Four columns
Four columns
Four columns
1
1
1
1
1
1
1
1
1
1
1
1
Colours
#
Tints {% include 'elements/colours/tints' %}
#
HTML
<div class="pl-color pl-color-green-tint-100">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-90">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-80">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-70">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-60">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-50">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-40">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-30">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-20">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-10">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-green-tint-100">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-90">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-80">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-70">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-60">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-50">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-40">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-30">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-20">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-10">
	<div class="pl-color-swatch"></div>
</div>
{}
Greys {% include 'elements/colours/greys' %}
#
HTML
<div class="pl-color pl-color-dark-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-mid-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-light-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-footer-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-border-grey">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-dark-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-mid-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-light-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-footer-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-border-grey">
	<div class="pl-color-swatch"></div>
</div>
{}
Brand {% include 'elements/colours/brand' %}
#
HTML
<div class="pl-color pl-color-green-primary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-secondary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-primary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-secondary">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-green-primary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-secondary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-primary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-secondary">
	<div class="pl-color-swatch"></div>
</div>
{}
Secondary {% include 'elements/colours/secondary' %}
#
HTML
<div class="pl-color pl-color-brand-green">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-red">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-turquoise">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-orange">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-brand-green">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-red">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-turquoise">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-orange">
	<div class="pl-color-swatch"></div>
</div>
{}
Headings
#
H2 {% include 'elements/headings/h2' %}
#
HTML
<h2>
    Lorem ipsum dolor sit amet consectetur
</h2>
Twig
<h2>{{title}}</h2>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H5 {% include 'elements/headings/h5' %}
#
HTML
<h5>
    Lorem ipsum dolor sit amet consectetur
</h5>
Twig
<h5>{{title}}</h5>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}
Lorem ipsum dolor sit amet consectetur
H4 {% include 'elements/headings/h4' %}
#
HTML
<h4>
    Lorem ipsum dolor sit amet consectetur
</h4>
Twig
<h4>{{title}}</h4>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H3 {% include 'elements/headings/h3' %}
#
HTML
<h3>
    Lorem ipsum dolor sit amet consectetur
</h3>
Twig
<h3>{{title}}</h3>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H6 {% include 'elements/headings/h6' %}
#
HTML
<h6>
    Lorem ipsum dolor sit amet consectetur
</h6>
Twig
<h6>{{title}}</h6>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}
Lorem ipsum dolor sit amet consectetur
H1 {% include 'elements/headings/h1' %}
#
HTML
<h1 class=" ">
    Lorem ipsum dolor sit amet consectetur
</h1>
Twig
<h1 class="{% if center %}center-text{% endif %} {% if underline %}heading-underline{% endif %}">{{title}}</h1>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H1 Underline {% include 'elements/headings/h1~underline' %}
#
HTML
<h1 class="center-text heading-underline">
    Lorem ipsum dolor sit amet consectetur
</h1>
Twig
<h1 class="{% if center %}center-text{% endif %} {% if underline %}heading-underline{% endif %}">{{title}}</h1>
{
    "title": "Lorem ipsum dolor sit amet consectetur",
    "underline": true,
    "center": true
}

Lorem ipsum dolor sit amet consectetur

H1 Centered {% include 'elements/headings/h1~centered' %}
#
HTML
<h1 class="center-text ">
    Lorem ipsum dolor sit amet consectetur
</h1>
Twig
<h1 class="{% if center %}center-text{% endif %} {% if underline %}heading-underline{% endif %}">{{title}}</h1>
{
    "title": "Lorem ipsum dolor sit amet consectetur",
    "center": true
}

Lorem ipsum dolor sit amet consectetur

Text
#
Strong {% include 'elements/text/strong' %}
#
HTML
<strong>Strong is used to indicate strong importance</strong>
Twig
<strong>{{ text }}</strong>
{
    "text": "Strong is used to indicate strong importance"
}
Strong is used to indicate strong importance
Italic {% include 'elements/text/italic' %}
#
HTML
The <i>i element</i> is text that is set off from the normal text
Twig
The <i>i element</i> is text that is set off from the normal text
{}
The i element is text that is set off from the normal text
Link {% include 'elements/text/link' %}
#
HTML
<a href="#">Link text</a>
Twig
<a href="#">{{ text }}</a>
{
    "text": "Link text"
}
Bold {% include 'elements/text/bold' %}
#
HTML
The <b>b element</b> is stylistically different text from normal text, without any special importance
Twig
The <b>b element</b> is stylistically different text from normal text, without any special importance
{}
The b element is stylistically different text from normal text, without any special importance
Horizontal Line
#
Horizontal Line {% include 'elements/horizontal-line/horizontal-line' %}
#

Used as a divider between content.

HTML
<div class="hr"></div>
Twig
<div class="hr"></div>
{}
Components
#
Buttons
#
Green {% include 'components/buttons/green' %}
#
HTML
<a href="#" class="button button--green">Link as a button</a>

<button class="button button--green" type="input">Button as a button</button>
Twig
<a href="#" class="button button--green">{{ button_one }}</a>
<button class="button button--green" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Transparent {% include 'components/buttons/transparent' %}
#
HTML
<div class="element-bg">
    <a href="#" class="button button--transparent">Link as a button</a>

    <button class="button button--transparent" type="input">Button as a button</button>
</div>
Twig
<div class="element-bg">
	<a href="#" class="button button--transparent">{{ button_one }}</a>
	<button class="button button--transparent" type="input">{{ button_two }}</button>
</div>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
White {% include 'components/buttons/white' %}
#
HTML
<div class="element-bg">
    <a href="#" class="button button--white">Link as a button</a>

    <button class="button button--white" type="input">Button as a button</button>
</div>
Twig
<div class="element-bg">
	<a href="#" class="button button--white">{{ button_one }}</a>
	<button class="button button--white" type="input">{{ button_two }}</button>
</div>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Primary {% include 'components/buttons/primary' %}
#
HTML
<a href="#" class="button">Link as a button</a>

<button class="button" type="input">Button as a button</button>
Twig
<a href="#" class="button">{{ button_one }}</a>
<button class="button" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Secondary {% include 'components/buttons/secondary' %}
#
HTML
<a href="#" class="secondary-button">Link as a button</a>

<button class="secondary-button" type="input">Button as a button</button>
Twig
<a href="#" class="secondary-button">{{ button_one }}</a>
<button class="secondary-button" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Button Underline {% include 'components/buttons/button-underline' %}
#
HTML
<a href="#" class="button-underline">Button underline</a>
Twig
<a href="#" class="button-underline">Button underline</a>
{}
Retired Green {% include 'components/buttons/retired-green' %}
#
HTML
<a href="#" class="button button--green">Link as a button</a>

<button class="button button--green" type="input">Button as a button</button>
Twig
<a href="#" class="button button--green">{{ button_one }}</a>
<button class="button button--green" type="input">{{ button_two }}</button>
{
    "button_one": "Link as a button",
    "button_two": "Button as a button"
}
Link as a button
Content
#
Tabs {% include 'components/content/tabs' %}
#
HTML
<div class="inner">
    <div class="tabbed-header">
        <div class="inner"></div>
    </div>
    <div class="tabbed-container">
        <div class="tabbed__item" data-title="First">
First content
</div>
        <div class="tabbed__item" data-title="Second">
Second content
</div>
        <div class="tabbed__item" data-title="Third">
Third content
</div>
        <div class="tabbed__item" data-title="Fourth">
Fourth content
</div>
    </div>
</div>
Twig
<div class="inner">
	<div class="tabbed-header">
		<div class="inner">
		</div>
	</div>
	<div class="tabbed-container">

		{% for tab in tabs %}
			<div class="tabbed__item" data-title="{{ tab.title }}">
				{{ tab.content }}
			</div>
		{% endfor %}

	</div>
</div>
{
    "tabs": {
        "0": {
            "title": "First",
            "content": "First content"
        },
        "1": {
            "title": "Second",
            "content": "Second content"
        },
        "2": {
            "title": "Third",
            "content": "Third content"
        },
        "3": {
            "title": "Fourth",
            "content": "Fourth content"
        }
    }
}
First content
Second content
Third content
Fourth content
Accordian {% include 'components/content/accordian' %}
#
HTML
<div class="accordion accordion--gvt" data-initial-open="true">
    <div class="accordion__item">
        <h3 class="accordion__title">
            Where can I go?
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.&lt;/p&gt;</p>
    </div>
    <div class="accordion__item">
        <h3 class="accordion__title">
            Where can I go?
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.&lt;/p&gt;</p>
    </div>
    <div class="accordion__item">
        <h3 class="accordion__title">
            Where can I go?
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.&lt;/p&gt;</p>
    </div>
</div>
Twig
<div class="accordion accordion--gvt" data-initial-open="true">
    {% for faq in faqs %}
         <div class="accordion__item">
            <h3 class="accordion__title">{{ faq.title }}</h3>
            <p>{{ faq.content }}</p>
        </div>
    {% endfor %}
</div>
{
    "faqs": {
        "0": {
            "title": "Where can I go?",
            "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.<\/p>"
        },
        "1": {
            "title": "Where can I go?",
            "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.<\/p>"
        },
        "2": {
            "title": "Where can I go?",
            "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.<\/p>"
        }
    }
}

Where can I go?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.</p>

Where can I go?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.</p>

Where can I go?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.</p>

Paragraph {% include 'components/content/paragraph' %}
#

Standard format for paragraph text on pages.

HTML
<div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig
<div class="inner">
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Reveal {% include 'components/content/reveal' %}
#
HTML
<div class="reveal">
    <a class="button reveal__button" href="javascript:void()" data-reveal="reveal1">Click to reveal</a>

    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
</p>
    </div>
</div>
Twig
<div class="reveal">
	<a class="button reveal__button" href="javascript:void()" data-reveal="{{reveal_id}}">{{reveal_button}}</a>
	<div class="reveal__element reveal__element--collapsed" data-reveal="{{reveal_id}}">
		<p>
			{{reveal_content}}
		</p>
	</div>
</div>
{
    "reveal_button": "Click to reveal",
    "reveal_id": "reveal1",
    "reveal_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula."
}
Click to reveal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.

Paragraph Inline Image Left With Caption {% include 'components/content/paragraph-inline-image-left-with-caption' %}
#
HTML
<div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <figure class="img-40-left">
        <img src="http://placehold.it/600x400" alt="Image">
        <figcaption class="caption">Caption goes here</figcaption>
    </figure>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-left">
		<img src="http://placehold.it/600x400" alt="Image">
		<figcaption class="caption">Caption goes here</figcaption>
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image
Caption goes here

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Promo Triple Grey {% include 'components/content/promo-triple~grey' %}
#
HTML
<div class="grey-section">
    <div class="inner">
        <div class="promo-triple">
            <div class="promo-triple__col">
                <div class="promo-triple__content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                </div>
            </div>
            <div class="promo-triple__col">
                <div class="promo-triple__content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
            </div>
            <div class="promo-triple__col">
                <div class="promo-triple__content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
{% if promo_background %} <div class="grey-section"> {% endif %}
	<div class="inner">
		<div class="promo-triple">

			{% for promo in promo_boxes %}

				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>{{ promo }}</p>
					</div>
				</div>

			{% endfor %}

		</div>
	</div>
</div>
{
    "promo_boxes": {
        "0": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        "1": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.",
        "2": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    "promo_background": "grey"
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph Inline Image Right {% include 'components/content/paragraph-inline-image-right' %}
#
HTML
<div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <figure class="img-40-right">
        <img src="http://placehold.it/600x400" alt="Image">
    </figure>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-right">
		<img src="http://placehold.it/600x400" alt="Image">
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph Inline Image Left {% include 'components/content/paragraph-inline-image-left' %}
#
HTML
<div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <figure class="img-40-left">
        <img src="http://placehold.it/600x400" alt="Image">
    </figure>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-left">
		<img src="http://placehold.it/600x400" alt="Image">
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph Inline Image Right With Caption {% include 'components/content/paragraph-inline-image-right-with-caption' %}
#
HTML
<div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <figure class="img-40-right">
        <img src="http://placehold.it/600x400" alt="Image">
        <figcaption class="caption">Caption goes here</figcaption>
    </figure>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-right">
		<img src="http://placehold.it/600x400" alt="Image">
		<figcaption class="caption">Caption goes here</figcaption>
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image
Caption goes here

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Grey Section {% include 'components/content/grey-section' %}
#
HTML
<div class="grey-section">
    <div class="inner">
        <h1>
            Grey section
        </h1>
    </div>
</div>
Twig
<div class="grey-section">
	<div class="inner">
		<h1>Grey section</h1>	
	</div>
</div>
{}

Grey section

Promo Triple {% include 'components/content/promo-triple' %}
#
HTML
<div class="inner">
    <div class="promo-triple">
        <div class="promo-triple__col">
            <div class="promo-triple__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
        </div>
        <div class="promo-triple__col">
            <div class="promo-triple__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
            </div>
        </div>
        <div class="promo-triple__col">
            <div class="promo-triple__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
</div>
</div>
Twig
{% if promo_background %} <div class="grey-section"> {% endif %}
	<div class="inner">
		<div class="promo-triple">

			{% for promo in promo_boxes %}

				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>{{ promo }}</p>
					</div>
				</div>

			{% endfor %}

		</div>
	</div>
</div>
{
    "promo_boxes": {
        "0": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        "1": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.",
        "2": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Responsive Video {% include 'components/content/responsive-video' %}
#

Use this code to ensure video's work properly on all screen sizes.

HTML
<div class="inner">
    <!-- RESPONSIVE VIDEO CODE -->
    <div class="rwd-video">
        <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/fqhVK4EtPR4" frameborder="0" allowfullscreen=""></iframe>
    </div>
    <!-- END RESPONSIVE VIDEO CODE -->
</div>
Twig
<div class="inner">
	<!-- RESPONSIVE VIDEO CODE -->
	<div class="rwd-video">
		<iframe class="video" width="560" height="315" src="{{video_url}}" frameborder="0" allowfullscreen=""></iframe>
	</div>
	<!-- END RESPONSIVE VIDEO CODE -->
</div>
{
    "video_url": "https:\/\/www.youtube.com\/embed\/fqhVK4EtPR4"
}
Tooltip Inline {% include 'components/content/tooltip-inline' %}
#
HTML
This is a sentence with a <span class="tooltip-inline" title="This is the definition">tooltip</span>.
Twig
This is a sentence with a <span class="tooltip-inline" title="This is the definition">tooltip</span>.
{}
This is a sentence with a tooltip.
Paragraph Article {% include 'components/content/paragraph-article' %}
#

This text sits within the 'article-inner' class. This is how all stories will be formatted on the site.

HTML
<div class="article-inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig
<div class="article-inner">
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Intro Overlap Header {% include 'components/content/intro-overlap-header' %}
#
HTML
<div class="banner-overlap">
    <div class="inner">
        <h2 class="no-margin">
            LOREM IPSUM
        </h2>
    </div>
</div>
Twig
<div class="banner-overlap">
	<div class="inner">
		<h2 class="no-margin">LOREM IPSUM</h2>
	</div>
</div>
{}
Text Video {% include 'components/content/text-video' %}
#
HTML
<div class="inner">
    <div class="large-col-7">
Test
</div>
    <div class="large-col-5">
Video
</div>
</div>
Twig
<div class="inner">
	<div class="large-col-7">
		{{ video_section.content }}
	</div>
	<div class="large-col-5">
		{{ video_section.video }}
	</div>
</div>
{
    "video_section": {
        "content": "Test",
        "video": "Video"
    }
}
Test
Video
Dark Grey Section {% include 'components/content/dark-grey-section' %}
#
HTML
<div class="dark-grey-section dark-grey-section--c19 section--overlap-top clearfix">
    <div class="container">
        <div class="image-quote">
            <picture class="animate-up">
                <source media="(min-width: 1400px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
                    <source media="(min-width: 1200px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
                        <source media="(min-width: 1000px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
                            <source media="(min-width: 800px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
                                <source media="(min-width: 647px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
                                    <source media="(min-width: 465px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
                                        <source media="(min-width: 375px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg" alt="alt">
                                            <img src="/images/mainsite5/c19/mobile-image-quote.jpg" alt="alt">
                                        </picture>
                                        <blockquote class="quote-block quote-block-- quote-block--yellow ">
                                            <div class="quote-block__container">
                                                <p>&#039;Everything seemed hopeless, but I still prayed for a breakthrough.&#039;</p>
                                            </div>
                                        </blockquote>
                                    </div>
                                    <div class="inner center-text">
                                        <h2 class="c19">
                                            Your generosity makes amazing things happen
                                        </h2>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                    </div>
                                </div>
                            </div>
Twig
<div class="dark-grey-section dark-grey-section--c19 section--overlap-top clearfix">	
	<div class="container">
		<div class="image-quote">

			<picture class="animate-up">
				<source media="(min-width: 1400px)" srcset="{{ image.mobile }}">
				<source media="(min-width: 1200px)" srcset="{{ image.mobile }}">
				<source media="(min-width: 1000px)" srcset="{{ image.mobile }}">
				<source media="(min-width: 800px)" srcset="{{ image.mobile }}">
			  	<source media="(min-width: 647px)" srcset="{{ image.mobile }}">
			 	<source media="(min-width: 465px)" srcset="{{ image.mobile }}">
			 	<source media="(min-width: 375px)" srcset="{{ image.mobile }}" alt="{{ image.alt }}">
			 	<img src="{{ image.mobile }}" alt="{{ image.alt }}">
			</picture>
			{% include 'components/quotes/quote-block' with quote %}
		</div>

		<div class="inner center-text">
			<h2 class="c19">Your generosity makes amazing things happen</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>
</div>
{
    "image": {
        "mobile": "\/images\/mainsite5\/c19\/mobile-image-quote.jpg",
        "desktop": "\/images\/mainsite5\/c19\/desktop-image-quote.jpg",
        "alt": "alt"
    },
    "quote": {
        "colour": "yellow",
        "quote": "'Everything seemed hopeless, but I still prayed for a breakthrough.'"
    }
}
alt

'Everything seemed hopeless, but I still prayed for a breakthrough.'

Your generosity makes amazing things happen

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Image Section {% include 'components/content/image-section' %}
#
HTML
<section class="image-section image-section--mobile-white full-banner--image" data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg">
    <div class="inner">
        <h1>
            Image section
        </h1>
    </div>
</section>
Twig
<section class="image-section image-section--mobile-white full-banner--image" data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg">
	<div class="inner">
		<h1>Image section</h1>	
	</div>
</section>
{}

Image section

Lightbox
#
Lightbox Large {% include 'components/lightbox/lightbox~large' %}
#
HTML
<a href="#" class="button show-lightbox" data-lightbox="2">Large lightbox</a> 
<div class="lightbox lightbox--large" data-lightbox="2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>
Twig
<a href="#" class="button show-lightbox" data-lightbox="{{lightbox_id}}">{{button}}</a>
			
<div class="lightbox {% if large %} lightbox--large{% endif %}"  data-lightbox="{{lightbox_id}}">
	<p>{{content}}</p>
	<div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>
{
    "lightbox_id": "2",
    "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "button": "Large lightbox",
    "large": true
}
Large lightbox
Lightbox {% include 'components/lightbox/lightbox' %}
#
HTML
<a href="#" class="button show-lightbox" data-lightbox="1">Regular lightbox</a> 
<div class="lightbox " data-lightbox="1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>
Twig
<a href="#" class="button show-lightbox" data-lightbox="{{lightbox_id}}">{{button}}</a>
			
<div class="lightbox {% if large %} lightbox--large{% endif %}"  data-lightbox="{{lightbox_id}}">
	<p>{{content}}</p>
	<div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>
{
    "lightbox_id": "1",
    "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "button": "Regular lightbox"
}
Regular lightbox
Social
#
Social Email {% include 'components/social/social-email' %}
#
HTML
<a href="#" class="share-button share-button--email">
    <div class="share-button__content">
        <img src="/images/mainsite5/svg/social/email.svg" />
        <div class="share-button__text"> Email</div>
    </div>
</a>
Twig
<a href="#" class="share-button share-button--email">
	<div class="share-button__content">
		<img src="/images/mainsite5/svg/social/email.svg" /> <div class="share-button__text"> Email</div>
	</div>
</a>
{}
Share Whatsapp {% include 'components/social/share-whatsapp' %}
#
HTML
<a href="#" class="share-button share-button--whatsapp">
    <div class="share-button__content">
        <img src="/images/mainsite5/svg/social/twitter.svg" />
        <div class="share-button__text"> Whatsapp</div>
    </div>
</a>
Twig
<a href="#" class="share-button share-button--whatsapp">
	<div class="share-button__content">
		<img src="/images/mainsite5/svg/social/twitter.svg" /> <div class="share-button__text"> Whatsapp</div>
	</div>
</a>
{}
Share Facebook {% include 'components/social/share-facebook' %}
#
HTML
<a href="#" class="share-button share-button--facebook">
    <div class="share-button__content">
        <img src="/images/mainsite5/svg/social/facebook.svg" />
        <div class="share-button__text"> Facebook</div>
    </div>
</a>
Twig
<a href="#" class="share-button share-button--facebook">
	<div class="share-button__content">
		<img src="/images/mainsite5/svg/social/facebook.svg" /> <div class="share-button__text"> Facebook</div>
	</div>
</a>
{}
Share Twitter {% include 'components/social/share-twitter' %}
#
HTML
<a href="#" class="share-button share-button--twitter">
    <div class="share-button__content">
        <img src="/images/mainsite5/svg/social/twitter.svg" />
        <div class="share-button__text"> Twitter</div>
    </div>
</a>
Twig
<a href="#" class="share-button share-button--twitter">
	<div class="share-button__content">
		<img src="/images/mainsite5/svg/social/twitter.svg" /> <div class="share-button__text"> Twitter</div>
	</div>
</a>
{}
Icons
#
Icons Transparent {% include 'components/icons/icons~transparent' %}
#
HTML
<div class="inner">
<span class="icon-disaster-trans"></span>
<span class="icon-hunger-trans"></span>
<span class="icon-conflict-trans"></span>
<span class="icon-matter-trans"></span>
<span class="icon-health-trans"></span>
<span class="icon-money-trans"></span>
<span class="icon-see-trans"></span>
<span class="icon-blog-trans"></span>
<span class="icon-calendar-trans"></span>
<span class="icon-gender-trans"></span>
<span class="icon-children-trans"></span>
<span class="icon-church-trans"></span>
<span class="icon-water-trans"></span>
<span class="icon-communities-trans"></span>
<span class="icon-injustice-trans"></span>
<span class="icon-vulnerable-trans"></span>
<span class="icon-signup-trans"></span>
<span class="icon-empowerment-trans"></span>
<span class="icon-livelihoods-trans"></span>
<span class="icon-climate-trans"></span>
<span class="icon-hiv-trans"></span>
<span class="icon-marginalised-trans"></span>
<span class="icon-education-trans"></span>
<span class="icon-whole-person-trans"></span>
</div>
Twig
<div class="inner">
	<span class="icon-disaster-{{colour}}"></span>
	<span class="icon-hunger-{{colour}}"></span>
	<span class="icon-conflict-{{colour}}"></span>
	<span class="icon-matter-{{colour}}"></span>
	<span class="icon-health-{{colour}}"></span>
	<span class="icon-money-{{colour}}"></span>
	<span class="icon-see-{{colour}}"></span>
	<span class="icon-blog-{{colour}}"></span>
	<span class="icon-calendar-{{colour}}"></span>
	<span class="icon-gender-{{colour}}"></span>
	<span class="icon-children-{{colour}}"></span>
	<span class="icon-church-{{colour}}"></span>
	<span class="icon-water-{{colour}}"></span>
	<span class="icon-communities-{{colour}}"></span>
	<span class="icon-injustice-{{colour}}"></span>
	<span class="icon-vulnerable-{{colour}}"></span>
	<span class="icon-signup-{{colour}}"></span>
	<span class="icon-empowerment-{{colour}}"></span>
	<span class="icon-livelihoods-{{colour}}"></span>
	<span class="icon-climate-{{colour}}"></span>
	<span class="icon-hiv-{{colour}}"></span>
	<span class="icon-marginalised-{{colour}}"></span>
	<span class="icon-education-{{colour}}"></span>
	<span class="icon-whole-person-{{colour}}"></span>
</div>
{
    "colour": "trans"
}
Icons {% include 'components/icons/icons' %}
#
HTML
<div class="inner">
<span class="icon-disaster-yellow"></span>
<span class="icon-hunger-yellow"></span>
<span class="icon-conflict-yellow"></span>
<span class="icon-matter-yellow"></span>
<span class="icon-health-yellow"></span>
<span class="icon-money-yellow"></span>
<span class="icon-see-yellow"></span>
<span class="icon-blog-yellow"></span>
<span class="icon-calendar-yellow"></span>
<span class="icon-gender-yellow"></span>
<span class="icon-children-yellow"></span>
<span class="icon-church-yellow"></span>
<span class="icon-water-yellow"></span>
<span class="icon-communities-yellow"></span>
<span class="icon-injustice-yellow"></span>
<span class="icon-vulnerable-yellow"></span>
<span class="icon-signup-yellow"></span>
<span class="icon-empowerment-yellow"></span>
<span class="icon-livelihoods-yellow"></span>
<span class="icon-climate-yellow"></span>
<span class="icon-hiv-yellow"></span>
<span class="icon-marginalised-yellow"></span>
<span class="icon-education-yellow"></span>
<span class="icon-whole-person-yellow"></span>
</div>
Twig
<div class="inner">
	<span class="icon-disaster-{{colour}}"></span>
	<span class="icon-hunger-{{colour}}"></span>
	<span class="icon-conflict-{{colour}}"></span>
	<span class="icon-matter-{{colour}}"></span>
	<span class="icon-health-{{colour}}"></span>
	<span class="icon-money-{{colour}}"></span>
	<span class="icon-see-{{colour}}"></span>
	<span class="icon-blog-{{colour}}"></span>
	<span class="icon-calendar-{{colour}}"></span>
	<span class="icon-gender-{{colour}}"></span>
	<span class="icon-children-{{colour}}"></span>
	<span class="icon-church-{{colour}}"></span>
	<span class="icon-water-{{colour}}"></span>
	<span class="icon-communities-{{colour}}"></span>
	<span class="icon-injustice-{{colour}}"></span>
	<span class="icon-vulnerable-{{colour}}"></span>
	<span class="icon-signup-{{colour}}"></span>
	<span class="icon-empowerment-{{colour}}"></span>
	<span class="icon-livelihoods-{{colour}}"></span>
	<span class="icon-climate-{{colour}}"></span>
	<span class="icon-hiv-{{colour}}"></span>
	<span class="icon-marginalised-{{colour}}"></span>
	<span class="icon-education-{{colour}}"></span>
	<span class="icon-whole-person-{{colour}}"></span>
</div>
{
    "colour": "yellow"
}
Icons Grey {% include 'components/icons/icons~grey' %}
#
HTML
<div class="inner">
<span class="icon-disaster-grey"></span>
<span class="icon-hunger-grey"></span>
<span class="icon-conflict-grey"></span>
<span class="icon-matter-grey"></span>
<span class="icon-health-grey"></span>
<span class="icon-money-grey"></span>
<span class="icon-see-grey"></span>
<span class="icon-blog-grey"></span>
<span class="icon-calendar-grey"></span>
<span class="icon-gender-grey"></span>
<span class="icon-children-grey"></span>
<span class="icon-church-grey"></span>
<span class="icon-water-grey"></span>
<span class="icon-communities-grey"></span>
<span class="icon-injustice-grey"></span>
<span class="icon-vulnerable-grey"></span>
<span class="icon-signup-grey"></span>
<span class="icon-empowerment-grey"></span>
<span class="icon-livelihoods-grey"></span>
<span class="icon-climate-grey"></span>
<span class="icon-hiv-grey"></span>
<span class="icon-marginalised-grey"></span>
<span class="icon-education-grey"></span>
<span class="icon-whole-person-grey"></span>
</div>
Twig
<div class="inner">
	<span class="icon-disaster-{{colour}}"></span>
	<span class="icon-hunger-{{colour}}"></span>
	<span class="icon-conflict-{{colour}}"></span>
	<span class="icon-matter-{{colour}}"></span>
	<span class="icon-health-{{colour}}"></span>
	<span class="icon-money-{{colour}}"></span>
	<span class="icon-see-{{colour}}"></span>
	<span class="icon-blog-{{colour}}"></span>
	<span class="icon-calendar-{{colour}}"></span>
	<span class="icon-gender-{{colour}}"></span>
	<span class="icon-children-{{colour}}"></span>
	<span class="icon-church-{{colour}}"></span>
	<span class="icon-water-{{colour}}"></span>
	<span class="icon-communities-{{colour}}"></span>
	<span class="icon-injustice-{{colour}}"></span>
	<span class="icon-vulnerable-{{colour}}"></span>
	<span class="icon-signup-{{colour}}"></span>
	<span class="icon-empowerment-{{colour}}"></span>
	<span class="icon-livelihoods-{{colour}}"></span>
	<span class="icon-climate-{{colour}}"></span>
	<span class="icon-hiv-{{colour}}"></span>
	<span class="icon-marginalised-{{colour}}"></span>
	<span class="icon-education-{{colour}}"></span>
	<span class="icon-whole-person-{{colour}}"></span>
</div>
{
    "colour": "grey"
}
Maps
#
Bigbake Map {% include 'components/maps/bigbake-map' %}
#
HTML
<div id="bb-map"></div>
Twig
<div id="bb-map"></div>
{}
Where We Work {% include 'components/maps/where-we-work' %}
#
HTML
<div class="grey-section">
    <div class="inner">
        <div class="where-we-work">
            <div id="where-we-work__map" data-svg="/images/mainsite5/about-us-map.svg"></div>
        </div>
    </div>
</div>
<div class="inner">
    <ul class="where-we-work__regions">
        <li class="where-we-work__region" data-key="central-africa">
            <h3 class="where-we-work__region-title">
                East and Central Africa
            </h3>
            <ul class="where-we-work__countries">
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/burundi/" data-id="{46F8C0C4-3112-4AA6-AD08-FB69DAAF7E15}">Burundi</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/car/" data-id="{ECADFE0D-221A-4D44-BA35-D911B6AC8684}">Central African Republic</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/democratic_republic_of_congo/" data-id="{56A3B366-725C-4EBE-8960-B669C34F9ABB}">Democratic Republic of Congo</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/ethiopia/" data-id="{5A630FD5-C449-4467-9FA3-913DD15EFA1F}">Ethiopia</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/kenya/" data-id="{70C6E472-A16D-404B-A5CD-DD08CAEF14F8}">Kenya</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/somalia/" data-id="{6643C53B-0C1A-4943-B546-165504D66C3E}">Somalia</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/uganda/" data-id="{11AB7CCF-E355-429D-83E7-48BAFD04790B}">Uganda</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/south_sudan/" data-id="{C6C98130-1775-45E2-8A8A-EA45CF021091}">South Sudan</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/rwanda/" data-id="{C237F973-BE84-44E0-B234-6C67FEE7B801}">Rwanda</a></li>
            </ul>
        </li>
        <li class="where-we-work__region" data-key="northern-africa">
            <h3 class="where-we-work__region-title">
                West Africa
            </h3>
            <ul class="where-we-work__countries">
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/burkina_faso/" data-id="{4C376F5F-CCD7-4C85-8C76-F629D4B66E20}">Burkina Faso</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/chad/" data-id="{43B0B826-A591-4DF8-88B4-B584CE37264D}">Chad</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/egypt/" data-id="{D5D06328-4C66-4A41-B7D0-F5F9570EA83C}">Egypt</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/ivory_coast/" data-id="{B01EB0B1-E0AA-4E2C-A069-F31CDB8B016E}">Ivory Coast</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/mali/" data-id="{49520900-F8DF-4705-9526-975E8DAE1C70}">Mali</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/nigeria/" data-id="{46BCAD56-BFEB-49AB-8F13-D4F5A48E04D6}">Nigeria</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/niger/" data-id="{B58323D4-3953-45D7-B20D-ABA3B3DE5DE8}">Niger</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/liberia/" data-id="{913E1D59-069C-45E0-B032-0BDBF6018071}">Liberia</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/sierra_leone/" data-id="{D8F0729B-7EF0-4A75-A0D2-1E51DB17F1F1}">Sierra Leone</a></li>
            </ul>
        </li>
        <li class="where-we-work__region" data-key="southern-africa">
            <h3 class="where-we-work__region-title">
                Southern Africa
            </h3>
            <ul class="where-we-work__countries">
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/angola/" data-id="{5EBDB855-94E5-4F19-A16C-9B482224304A}">Angola</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/new_zambia/" data-id="{7F15075A-FB42-4898-ACAA-B8A7F72AC175}">Zambia</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/mozambique/" data-id="{1ADDEB9C-923F-4CB0-BD81-61ACF54F8DB2}">Mozambique</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/zimbabwe/" data-id="{7916452A-33E1-45CE-ABC0-21DAB51ACCCA}">Zimbabwe</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/tanzania/" data-id="{01C3D8EC-1EB2-4B9C-97EA-655BC1FC5FBC}">Tanzania</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/malawi/" data-id="{6F9B40AE-56F3-4C39-A1FF-6235CCFE859B}">Malawi</a></li>
            </ul>
        </li>
        <li class="where-we-work__region" data-key="asia">
            <h3 class="where-we-work__region-title">
                Asia
            </h3>
            <ul class="where-we-work__countries">
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/afghanistan/" data-id="{36EA9A63-20F3-4DD7-9E5B-5F8554D46260}">Afghanistan</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/bangladesh/" data-id="{1CEE2F16-748A-4912-B337-9FD63B810A14}">Bangladesh</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/cambodia/" data-id="{7A6B4F50-90D3-42AE-9CE3-97504FC1F43B}">Cambodia</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/central_asian_states/" data-id="{3210D20E-B430-4CAD-8DA3-72671CBF46D8}">Central Asian States</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/india/" data-id="{4E672FD6-F62F-4E6B-965E-77A1F0482F06}">India</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/nepal/" data-id="{572717D1-AFB4-48E2-8BA3-9D308B90909F}">Nepal</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/pakistan/" data-id="{490F4335-2C63-448A-A4BD-F3E9D1AC36D6}">Pakistan</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/vanuatu/" data-id="{32DEBF8B-E7A6-42BD-B6B4-B73F92155C2E}">Vanuatu</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/iraq/" data-id="{30CB8936-FEE9-4239-A9FC-16027F72EF4A}">Iraq</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/jordan/" data-id="{0635E0E6-4E13-4D2B-A0AA-CC93A40A605D}">Jordan</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/yemen/" data-id="{EA315DC8-DB0D-4E6A-927B-FDE7A53C253C}">Yemen</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/lebanon/" data-id="{DC346A6F-E067-4F48-9628-92F298316346}">Lebanon</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/syria/" data-id="{35D8D3D7-B690-408F-AC6D-FA9C297B9662}">Syria</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/mekong_subregion/" data-id="{E39E9AAF-241A-41EB-B012-20DD6246E653}">Mekong subregion</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/philippines/" data-id="{BCAB2440-2AA1-4403-84A0-634DA170CF41}">Philippines</a></li>
            </ul>
        </li>
        <li class="where-we-work__region" data-key="latin-america">
            <h3 class="where-we-work__region-title">
                Latin America &amp; Caribbean
            </h3>
            <ul class="where-we-work__countries">
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/colombia/" data-id="{E23F1563-9415-4BA3-8D6E-2DE2EFA1DF80}">Colombia</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/bolivia/" data-id="{CA1F800E-3A38-48E1-852A-2CF926509935}">Bolivia</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/brazil/" data-id="{3DC3E1B9-CD27-4147-AD50-0A232CED1DDE}">Brazil</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/guatemala/" data-id="{549CC313-7F21-4EDB-B567-1AB988BC1849}">Guatemala</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/haiti/" data-id="{5125F40A-C0CB-441F-A3F2-7E26B499D157}">Haiti</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/honduras/" data-id="{3D5D3107-2F88-4763-B573-B0773E65ADDE}">Honduras</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/nicaragua/" data-id="{A437DAF3-C03A-4868-A727-8B7C6F53B1CC}">Nicaragua</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/peru/" data-id="{3BA60102-508A-48C8-A56C-9E0BDD265736}">Peru</a></li>
            </ul>
        </li>
        <li class="where-we-work__region" data-key="europe">
            <h3 class="where-we-work__region-title">
                UK
            </h3>
            <ul class="where-we-work__countries">
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/europe/northern_ireland/" data-id="{039830F9-4691-4EAC-ACE8-89BFD729106F}">Northern Ireland</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/europe/scotland/" data-id="{C2620E46-2417-42F9-A775-C3CCF3366E6A}">Scotland</a></li>
                <li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/europe/wales/" data-id="{A8715478-34B6-4FC3-AC9F-F985198351E2}">Wales</a></li>
            </ul>
        </li>
    </ul>
Twig
<div class="grey-section">
	<div class="inner">
		<div class="where-we-work">
			<div id="where-we-work__map" data-svg="/images/mainsite5/about-us-map.svg"></div>
		</div>
	</div>
</div>

<div class="inner">
	<ul class="where-we-work__regions">
		<li class="where-we-work__region" data-key="central-africa">
			<h3 class="where-we-work__region-title">East and Central Africa</h3>
			<ul class="where-we-work__countries"><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/burundi/" data-id="{46F8C0C4-3112-4AA6-AD08-FB69DAAF7E15}">Burundi</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/car/" data-id="{ECADFE0D-221A-4D44-BA35-D911B6AC8684}">Central African Republic</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/democratic_republic_of_congo/" data-id="{56A3B366-725C-4EBE-8960-B669C34F9ABB}">Democratic Republic of Congo</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/ethiopia/" data-id="{5A630FD5-C449-4467-9FA3-913DD15EFA1F}">Ethiopia</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/kenya/" data-id="{70C6E472-A16D-404B-A5CD-DD08CAEF14F8}">Kenya</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/somalia/" data-id="{6643C53B-0C1A-4943-B546-165504D66C3E}">Somalia</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/uganda/" data-id="{11AB7CCF-E355-429D-83E7-48BAFD04790B}">Uganda</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/south_sudan/" data-id="{C6C98130-1775-45E2-8A8A-EA45CF021091}">South Sudan</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/east_and_central_africa/rwanda/" data-id="{C237F973-BE84-44E0-B234-6C67FEE7B801}">Rwanda</a></li></ul>
		</li>
		<li class="where-we-work__region" data-key="northern-africa">
			<h3 class="where-we-work__region-title">West Africa</h3>
			<ul class="where-we-work__countries"><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/burkina_faso/" data-id="{4C376F5F-CCD7-4C85-8C76-F629D4B66E20}">Burkina Faso</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/chad/" data-id="{43B0B826-A591-4DF8-88B4-B584CE37264D}">Chad</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/egypt/" data-id="{D5D06328-4C66-4A41-B7D0-F5F9570EA83C}">Egypt</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/ivory_coast/" data-id="{B01EB0B1-E0AA-4E2C-A069-F31CDB8B016E}">Ivory Coast</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/mali/" data-id="{49520900-F8DF-4705-9526-975E8DAE1C70}">Mali</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/nigeria/" data-id="{46BCAD56-BFEB-49AB-8F13-D4F5A48E04D6}">Nigeria</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/niger/" data-id="{B58323D4-3953-45D7-B20D-ABA3B3DE5DE8}">Niger</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/liberia/" data-id="{913E1D59-069C-45E0-B032-0BDBF6018071}">Liberia</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/west_africa/sierra_leone/" data-id="{D8F0729B-7EF0-4A75-A0D2-1E51DB17F1F1}">Sierra Leone</a></li></ul>
		</li>
		<li class="where-we-work__region" data-key="southern-africa">
			<h3 class="where-we-work__region-title">Southern Africa</h3>
			<ul class="where-we-work__countries"><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/angola/" data-id="{5EBDB855-94E5-4F19-A16C-9B482224304A}">Angola</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/new_zambia/" data-id="{7F15075A-FB42-4898-ACAA-B8A7F72AC175}">Zambia</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/mozambique/" data-id="{1ADDEB9C-923F-4CB0-BD81-61ACF54F8DB2}">Mozambique</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/zimbabwe/" data-id="{7916452A-33E1-45CE-ABC0-21DAB51ACCCA}">Zimbabwe</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/tanzania/" data-id="{01C3D8EC-1EB2-4B9C-97EA-655BC1FC5FBC}">Tanzania</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/southern_africa/malawi/" data-id="{6F9B40AE-56F3-4C39-A1FF-6235CCFE859B}">Malawi</a></li></ul>
		</li>
		<li class="where-we-work__region" data-key="asia">
			<h3 class="where-we-work__region-title">Asia</h3>
			<ul class="where-we-work__countries"><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/afghanistan/" data-id="{36EA9A63-20F3-4DD7-9E5B-5F8554D46260}">Afghanistan</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/bangladesh/" data-id="{1CEE2F16-748A-4912-B337-9FD63B810A14}">Bangladesh</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/cambodia/" data-id="{7A6B4F50-90D3-42AE-9CE3-97504FC1F43B}">Cambodia</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/central_asian_states/" data-id="{3210D20E-B430-4CAD-8DA3-72671CBF46D8}">Central Asian States</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/india/" data-id="{4E672FD6-F62F-4E6B-965E-77A1F0482F06}">India</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/nepal/" data-id="{572717D1-AFB4-48E2-8BA3-9D308B90909F}">Nepal</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/pakistan/" data-id="{490F4335-2C63-448A-A4BD-F3E9D1AC36D6}">Pakistan</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/vanuatu/" data-id="{32DEBF8B-E7A6-42BD-B6B4-B73F92155C2E}">Vanuatu</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/iraq/" data-id="{30CB8936-FEE9-4239-A9FC-16027F72EF4A}">Iraq</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/jordan/" data-id="{0635E0E6-4E13-4D2B-A0AA-CC93A40A605D}">Jordan</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/yemen/" data-id="{EA315DC8-DB0D-4E6A-927B-FDE7A53C253C}">Yemen</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/lebanon/" data-id="{DC346A6F-E067-4F48-9628-92F298316346}">Lebanon</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/syria/" data-id="{35D8D3D7-B690-408F-AC6D-FA9C297B9662}">Syria</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/mekong_subregion/" data-id="{E39E9AAF-241A-41EB-B012-20DD6246E653}">Mekong subregion</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/asia/philippines/" data-id="{BCAB2440-2AA1-4403-84A0-634DA170CF41}">Philippines</a></li></ul>
		</li>
		<li class="where-we-work__region" data-key="latin-america">
			<h3 class="where-we-work__region-title">Latin America &amp; Caribbean</h3>
			<ul class="where-we-work__countries"><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/colombia/" data-id="{E23F1563-9415-4BA3-8D6E-2DE2EFA1DF80}">Colombia</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/bolivia/" data-id="{CA1F800E-3A38-48E1-852A-2CF926509935}">Bolivia</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/brazil/" data-id="{3DC3E1B9-CD27-4147-AD50-0A232CED1DDE}">Brazil</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/guatemala/" data-id="{549CC313-7F21-4EDB-B567-1AB988BC1849}">Guatemala</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/haiti/" data-id="{5125F40A-C0CB-441F-A3F2-7E26B499D157}">Haiti</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/honduras/" data-id="{3D5D3107-2F88-4763-B573-B0773E65ADDE}">Honduras</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/nicaragua/" data-id="{A437DAF3-C03A-4868-A727-8B7C6F53B1CC}">Nicaragua</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/latin_america_and_caribbean/peru/" data-id="{3BA60102-508A-48C8-A56C-9E0BDD265736}">Peru</a></li></ul>
		</li>
		<li class="where-we-work__region" data-key="europe">
			<h3 class="where-we-work__region-title">UK</h3>
			<ul class="where-we-work__countries"><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/europe/northern_ireland/" data-id="{039830F9-4691-4EAC-ACE8-89BFD729106F}">Northern Ireland</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/europe/scotland/" data-id="{C2620E46-2417-42F9-A775-C3CCF3366E6A}">Scotland</a></li><li><a href="http://www.tearfund.org/en/about_us/what_we_do_and_where/countries/europe/wales/" data-id="{A8715478-34B6-4FC3-AC9F-F985198351E2}">Wales</a></li></ul>
		</li>
	</ul>
{}
Run Map {% include 'components/maps/run-map' %}
#
HTML
<div id="run-map"></div>
<div class="inner clearfix run-locations">
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Reigate_half_marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            REIGATE HALF MARATHON
        </h4>
        <p>23 SEPTEMBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Belfast_Half_Marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            BELFAST HALF MARATHON
        </h4>
        <p>23 SEPTEMBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Great_bristol_half_marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            GREAT BRISTOL HALF MARATHON
        </h4>
        <p>23 SEPTEMBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Great_scottish_run_half_marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            GREAT SCOTTISH RUN
        </h4>
        <p>30 SEPTEMBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Ealing_half_marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            EALING HALF MARATHON
        </h4>
        <p>30 SEPTEMBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Bournemouth_half_marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            BOURNEMOUTH HALF MARATHON
        </h4>
        <p>7 OCTOBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Cardiff_half_marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            CARDIFF HALF MARATHON
        </h4>
        <p>7 OCTOBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Great_birmingham_run" class="scaffolding-triple-col">
        <h4 class="run-heading">
            GREAT BIRMINGHAM RUN
        </h4>
        <p>14 OCTOBER 2018</p>
    </a>
    <a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/manchester_half_marathon" class="scaffolding-triple-col">
        <h4 class="run-heading">
            MANCHESTER HALF MARATHON
        </h4>
        <p>14 OCTOBER 2018</p>
    </a>
</div>
Twig
<div id="run-map"></div>
<div class="inner clearfix run-locations">
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Reigate_half_marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">REIGATE HALF MARATHON</h4>
		<p>23 SEPTEMBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Belfast_Half_Marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">BELFAST HALF MARATHON</h4>
		<p>23 SEPTEMBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Great_bristol_half_marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">GREAT BRISTOL HALF MARATHON</h4>
		<p>23 SEPTEMBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Great_scottish_run_half_marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">GREAT SCOTTISH RUN</h4>
		<p>30 SEPTEMBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Ealing_half_marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">EALING HALF MARATHON</h4>
		<p>30 SEPTEMBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Bournemouth_half_marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">BOURNEMOUTH HALF MARATHON</h4>
		<p>7 OCTOBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Cardiff_half_marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">CARDIFF HALF MARATHON</h4>
		<p>7 OCTOBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/Great_birmingham_run" class="scaffolding-triple-col">
		<h4 class="run-heading">GREAT BIRMINGHAM RUN</h4>
		<p>14 OCTOBER 2018</p>
	</a> 
	<a href="https://www.tearfund.org/about_you/Fundraise/Run_to_beat_poverty/manchester_half_marathon" class="scaffolding-triple-col">
		<h4 class="run-heading">MANCHESTER HALF MARATHON</h4>
		<p>14 OCTOBER 2018</p>
	</a> 
</div>
{}
Big Bake
#
Recipe {% include 'components/big-bake/recipe' %}
#
HTML
<div class="recipe inner">
    <div class="recipe--ingredients">
        <h3>
            Ingredients
        </h3>
        <ul>
            <li>4 eggs</li>
            <li>300g flour</li>
            <li>100g sugar</li>
            <li>1 unicorn horn</li>
        </ul>
    </div>
    <div class="recipe--method">
        <h3>
            Method
        </h3>
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu molestie sapien, eget vulputate sapien. Curabitur eleifend pulvinar dolor, id pellentesque magna aliquet vitae. Cras neque ipsum, luctus sed magna in, gravida ultricies ante. Nulla facilisi. Donec metus ligula, pretium eu felis ut, bibendum pretium nisi.</li>
            <li>Pellentesque pellentesque justo nec rutrum bibendum. Cras non orci vel enim lobortis facilisis at at lectus. Nullam vitae diam et metus semper tincidunt.</li>
            <li>Nulla quam sapien, tempor quis vestibulum non, congue eu lacus. Sed bibendum nisl eu enim dictum interdum. Cras nec sapien nec ipsum fringilla condimentum et eget ipsum. Aenean eget semper leo. Sed porttitor vehicula metus. Aliquam erat volutpat. Mauris laoreet eros at pulvinar ultrices.</li>
            <li>Eat the stuff</li>
        </ol>
    </div>
</div>
Twig
<div class="recipe inner">
	<div class="recipe--ingredients">
		<h3>Ingredients</h3>
		<ul>
			{% for ingredient in ingredients %}
				<li>{{ ingredient }}</li>
			{% endfor %}
		</ul>
	</div>

	<div class="recipe--method">
		<h3>Method</h3>
		<ol>
			{% for method in methods %}
				<li>{{ method }}</li>
			{% endfor %}
		</ol>
	</div>

</div>
{
    "ingredients": {
        "0": "4 eggs",
        "1": "300g flour",
        "2": "100g sugar",
        "3": "1 unicorn horn"
    },
    "methods": {
        "0": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu molestie sapien, eget vulputate sapien. Curabitur eleifend pulvinar dolor, id pellentesque magna aliquet vitae. Cras neque ipsum, luctus sed magna in, gravida ultricies ante. Nulla facilisi. Donec metus ligula, pretium eu felis ut, bibendum pretium nisi.",
        "1": "Pellentesque pellentesque justo nec rutrum bibendum. Cras non orci vel enim lobortis facilisis at at lectus. Nullam vitae diam et metus semper tincidunt.",
        "2": "Nulla quam sapien, tempor quis vestibulum non, congue eu lacus. Sed bibendum nisl eu enim dictum interdum. Cras nec sapien nec ipsum fringilla condimentum et eget ipsum. Aenean eget semper leo. Sed porttitor vehicula metus. Aliquam erat volutpat. Mauris laoreet eros at pulvinar ultrices.",
        "3": "Eat the stuff"
    }
}

Ingredients

  • 4 eggs
  • 300g flour
  • 100g sugar
  • 1 unicorn horn

Method

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu molestie sapien, eget vulputate sapien. Curabitur eleifend pulvinar dolor, id pellentesque magna aliquet vitae. Cras neque ipsum, luctus sed magna in, gravida ultricies ante. Nulla facilisi. Donec metus ligula, pretium eu felis ut, bibendum pretium nisi.
  2. Pellentesque pellentesque justo nec rutrum bibendum. Cras non orci vel enim lobortis facilisis at at lectus. Nullam vitae diam et metus semper tincidunt.
  3. Nulla quam sapien, tempor quis vestibulum non, congue eu lacus. Sed bibendum nisl eu enim dictum interdum. Cras nec sapien nec ipsum fringilla condimentum et eget ipsum. Aenean eget semper leo. Sed porttitor vehicula metus. Aliquam erat volutpat. Mauris laoreet eros at pulvinar ultrices.
  4. Eat the stuff
Secondary Navigation
#
Secondary Navigation Bar White {% include 'components/secondary-navigation/secondary-navigation-bar~white' %}
#
HTML
1 
<div class="stickynav fixedsticky stickynav--white">
    <div class="inner">
        <ul>
            <li data-stickynav-destination="top" class=""><a href="#top">Top</a></li>
            <li data-stickynav-destination="need" class="current"><a href="#need">The need</a></li>
            <li data-stickynav-destination="aims"><a href="#aims">Our aims</a></li>
            <li data-stickynav-destination="impact"><a href="#impact">Project impact</a></li>
            <li data-stickynav-destination="join"><a href="#join">join us</a></li>
        </ul>
    </div>
</div>
Twig
{{ sticky_nav_white }}

<div class="stickynav fixedsticky {% if sticky_nav_white %}stickynav--white{% endif %}">
	<div class="inner">
	<ul>
	    <li data-stickynav-destination="top" class=""><a href="#top">Top</a></li>
	    <li data-stickynav-destination="need" class="current"><a href="#need">The need</a></li>
	    <li data-stickynav-destination="aims"><a href="#aims">Our aims</a></li>
	    <li data-stickynav-destination="impact"><a href="#impact">Project impact</a></li>
	    <li data-stickynav-destination="join"><a href="#join">join us</a></li>
	</ul>
	</div>
</div>
{
    "sticky_nav_white": true
}
Inpage Menu {% include 'components/secondary-navigation/inpage-menu' %}
#
HTML
<!-- <div class="inner in-page-menu clearfix">
<div class="in-page-menu__menu">
    <ul class="dropdown menu desktop-menu sticky-sidebar" style="position: relative !important; top: 0px;">
        <li class="in-page-menu__current-item"><a href="http://tfbrand.anchordigital.co.uk/">Introduction</a></li>
        <li>
            <a data-scroll="link" class="scroll-to" href="#">Link</a>

            <ul class="dropdown">
                <li><a href="http://tfbrand.anchordigital.co.uk/copy/a/">A</a></li>
                <li><a href="http://tfbrand.anchordigital.co.uk/copy/b/">B</a></li>
                <li><a href="http://tfbrand.anchordigital.co.uk/copy/c/">C</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="in-page-menu__content">
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
-->
Twig
<!-- <div class="inner in-page-menu clearfix">
	<div class="in-page-menu__menu">
		<ul class="dropdown menu desktop-menu sticky-sidebar" style="position: relative !important; top: 0px;">
			<li class="in-page-menu__current-item"><a href="http://tfbrand.anchordigital.co.uk/">Introduction</a></li>
			<li><a data-scroll="link" class="scroll-to" href="#">Link</a>
				<ul class="dropdown">
					<li><a href="http://tfbrand.anchordigital.co.uk/copy/a/">A</a></li>
					<li><a href="http://tfbrand.anchordigital.co.uk/copy/b/">B</a></li>
					<li><a href="http://tfbrand.anchordigital.co.uk/copy/c/">C</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="in-page-menu__content">
		<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>		
</div> -->
{}
Secondary Navigation Bar {% include 'components/secondary-navigation/secondary-navigation-bar' %}
#
HTML
<div class="stickynav fixedsticky ">
    <div class="inner">
        <ul>
            <li data-stickynav-destination="top" class=""><a href="#top">Top</a></li>
            <li data-stickynav-destination="need" class="current"><a href="#need">The need</a></li>
            <li data-stickynav-destination="aims"><a href="#aims">Our aims</a></li>
            <li data-stickynav-destination="impact"><a href="#impact">Project impact</a></li>
            <li data-stickynav-destination="join"><a href="#join">join us</a></li>
        </ul>
    </div>
</div>
Twig
{{ sticky_nav_white }}

<div class="stickynav fixedsticky {% if sticky_nav_white %}stickynav--white{% endif %}">
	<div class="inner">
	<ul>
	    <li data-stickynav-destination="top" class=""><a href="#top">Top</a></li>
	    <li data-stickynav-destination="need" class="current"><a href="#need">The need</a></li>
	    <li data-stickynav-destination="aims"><a href="#aims">Our aims</a></li>
	    <li data-stickynav-destination="impact"><a href="#impact">Project impact</a></li>
	    <li data-stickynav-destination="join"><a href="#join">join us</a></li>
	</ul>
	</div>
</div>
{}
Subsection Navigation {% include 'components/secondary-navigation/subsection-navigation' %}
#
HTML
<div class="secondary_navigation">
    <div class="inner">
        <div class="secondary_navigation__links">
<a href="#">About</a>
<a href="#">Placements</a>
<a href="#">Stories</a>
</div>
        <div class="secondary_navigation__buttons"> <a href="#" class="button button--green">Apply</a>
<a href="#" class="secondary-button">Login</a> </div>
    </div>
</div>
Twig
<div class="secondary_navigation">

	<div class="inner">

		<div class="secondary_navigation__links">
			<a href="#">About</a>
			<a href="#">Placements</a>
			<a href="#">Stories</a>
		</div>

		<div class="secondary_navigation__buttons">

			<a href="#" class="button button--green">Apply</a>
			<a href="#" class="secondary-button">Login</a>

		</div>


	</div>

</div>
{}
Home Banner
#
Home Banner 3 Items {% include 'components/home-banner/home-banner~3-items' %}
#
HTML
<div class="multiple-banner">
    <div class="banner-grid-1xp-2xl">
        <a href="#" class="">
            <div class="banner-grid banner-grid-1 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="">
            <div class="banner-grid banner-grid-2 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="">
            <div class="banner-grid banner-grid-3 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
Twig
<div class="multiple-banner">

	{% if banners|length == 3 %}
	    <div class="banner-grid-1xp-2xl">
	{% elseif banners|length == 2 %}
		<div class="banner-grid-1xp-1xp">
	{% elseif banners|length == 1 %}
		<div class="banner-grid-1xp">
	{% endif %}

		{% for banner in banners %}
			<a href="#" class="">
				<div class="banner-grid banner-grid-{{ loop.index }} 
					{% if banner.breaking %}
						banner-grid--breaking-news
					{% endif %}
					{% if banner.emergency %}
						banner-emergency__strip banner-emergency__chevron
					{% endif %}
				" data-image="{{ banner.image }}">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>{{ banner.title  }}</h1>
									<p>{{ banner.content }}</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
		{% endfor %}
		
	</div>
</div>
{
    "banners": {
        "1": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        },
        "2": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        },
        "3": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        }
    }
}
Home Banner {% include 'components/home-banner/home-banner' %}
#
HTML
<div class="multiple-banner">
    <div class="banner-grid-1xp">
        <a href="#" class="">
            <div class="banner-grid banner-grid-1 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
Twig
<div class="multiple-banner">

	{% if banners|length == 3 %}
	    <div class="banner-grid-1xp-2xl">
	{% elseif banners|length == 2 %}
		<div class="banner-grid-1xp-1xp">
	{% elseif banners|length == 1 %}
		<div class="banner-grid-1xp">
	{% endif %}

		{% for banner in banners %}
			<a href="#" class="">
				<div class="banner-grid banner-grid-{{ loop.index }} 
					{% if banner.breaking %}
						banner-grid--breaking-news
					{% endif %}
					{% if banner.emergency %}
						banner-emergency__strip banner-emergency__chevron
					{% endif %}
				" data-image="{{ banner.image }}">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>{{ banner.title  }}</h1>
									<p>{{ banner.content }}</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
		{% endfor %}
		
	</div>
</div>
{
    "banners": {
        "1": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        }
    }
}
Home Banner Emergency {% include 'components/home-banner/home-banner~emergency' %}
#
HTML
<div class="multiple-banner">
    <div class="banner-grid-1xp">
        <a href="#" class="">
            <div class="banner-grid banner-grid-1 banner-emergency__strip banner-emergency__chevron
" data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
Twig
<div class="multiple-banner">

	{% if banners|length == 3 %}
	    <div class="banner-grid-1xp-2xl">
	{% elseif banners|length == 2 %}
		<div class="banner-grid-1xp-1xp">
	{% elseif banners|length == 1 %}
		<div class="banner-grid-1xp">
	{% endif %}

		{% for banner in banners %}
			<a href="#" class="">
				<div class="banner-grid banner-grid-{{ loop.index }} 
					{% if banner.breaking %}
						banner-grid--breaking-news
					{% endif %}
					{% if banner.emergency %}
						banner-emergency__strip banner-emergency__chevron
					{% endif %}
				" data-image="{{ banner.image }}">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>{{ banner.title  }}</h1>
									<p>{{ banner.content }}</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
		{% endfor %}
		
	</div>
</div>
{
    "banners": {
        "1": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg",
            "emergency": true
        }
    }
}
Home Banner 2 Items {% include 'components/home-banner/home-banner~2-items' %}
#
HTML
<div class="multiple-banner">
    <div class="banner-grid-1xp-1xp">
        <a href="#" class="">
            <div class="banner-grid banner-grid-1 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="">
            <div class="banner-grid banner-grid-2 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
Twig
<div class="multiple-banner">

	{% if banners|length == 3 %}
	    <div class="banner-grid-1xp-2xl">
	{% elseif banners|length == 2 %}
		<div class="banner-grid-1xp-1xp">
	{% elseif banners|length == 1 %}
		<div class="banner-grid-1xp">
	{% endif %}

		{% for banner in banners %}
			<a href="#" class="">
				<div class="banner-grid banner-grid-{{ loop.index }} 
					{% if banner.breaking %}
						banner-grid--breaking-news
					{% endif %}
					{% if banner.emergency %}
						banner-emergency__strip banner-emergency__chevron
					{% endif %}
				" data-image="{{ banner.image }}">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>{{ banner.title  }}</h1>
									<p>{{ banner.content }}</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
		{% endfor %}
		
	</div>
</div>
{
    "banners": {
        "1": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        },
        "2": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        }
    }
}
Home Banner Breaking News No Image {% include 'components/home-banner/home-banner~breaking-news-no-image' %}
#
HTML
<div class="multiple-banner">
    <div class="banner-grid-1xp-2xl">
        <a href="#" class="">
            <div class="banner-grid banner-grid-1 banner-grid--breaking-news
" data-image="">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="">
            <div class="banner-grid banner-grid-2 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="">
            <div class="banner-grid banner-grid-3 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
Twig
<div class="multiple-banner">

	{% if banners|length == 3 %}
	    <div class="banner-grid-1xp-2xl">
	{% elseif banners|length == 2 %}
		<div class="banner-grid-1xp-1xp">
	{% elseif banners|length == 1 %}
		<div class="banner-grid-1xp">
	{% endif %}

		{% for banner in banners %}
			<a href="#" class="">
				<div class="banner-grid banner-grid-{{ loop.index }} 
					{% if banner.breaking %}
						banner-grid--breaking-news
					{% endif %}
					{% if banner.emergency %}
						banner-emergency__strip banner-emergency__chevron
					{% endif %}
				" data-image="{{ banner.image }}">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>{{ banner.title  }}</h1>
									<p>{{ banner.content }}</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
		{% endfor %}
		
	</div>
</div>
{
    "banners": {
        "1": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "breaking": true
        },
        "2": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        },
        "3": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        }
    }
}
Home Banner Breaking News {% include 'components/home-banner/home-banner~breaking-news' %}
#
HTML
<div class="multiple-banner">
    <div class="banner-grid-1xp-2xl">
        <a href="#" class="">
            <div class="banner-grid banner-grid-1 banner-grid--breaking-news
" data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="">
            <div class="banner-grid banner-grid-2 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="">
            <div class="banner-grid banner-grid-3 " data-image="/slider/photo1.jpg">
                <div class="banner-grid__panel">
                    <div class="banner-grid__overlay"></div>
                    <div class="banner-grid__content-wrapper">
                        <!-- RESPONSIVE CONTAINER -->
                        <div class="position">
                            <div class="banner-grid__content">
                                <h1>
                                    Building lives in the Phillipines
                                </h1>
                                <p>Help children like Nina step out of the shadow of conflict</p>
                            </div>
                            <div class="banner-grid__content--hover"></div>
                        </div>
                        <!-- CONTENT END -->
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
Twig
<div class="multiple-banner">

	{% if banners|length == 3 %}
	    <div class="banner-grid-1xp-2xl">
	{% elseif banners|length == 2 %}
		<div class="banner-grid-1xp-1xp">
	{% elseif banners|length == 1 %}
		<div class="banner-grid-1xp">
	{% endif %}

		{% for banner in banners %}
			<a href="#" class="">
				<div class="banner-grid banner-grid-{{ loop.index }} 
					{% if banner.breaking %}
						banner-grid--breaking-news
					{% endif %}
					{% if banner.emergency %}
						banner-emergency__strip banner-emergency__chevron
					{% endif %}
				" data-image="{{ banner.image }}">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>{{ banner.title  }}</h1>
									<p>{{ banner.content }}</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
		{% endfor %}
		
	</div>
</div>
{
    "banners": {
        "1": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg",
            "breaking": true
        },
        "2": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        },
        "3": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        }
    }
}
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"
            }
        }
    }
}
Mean Bean
#
Nutrition Header {% include 'components/mean-bean/nutrition-header' %}
#
HTML
<div class="full-banner full-banner--mean-bean-alt full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
    <div class="inner">
        <div class="full-banner__content-wrapper">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content">
                <h1 class="full-banner__title">
                    Mean Bean Nutrition
                </h1>
                <p>with DR. BEAN, MB</p>
                <div class="mean-bean-nutrition"></div>
            </div>
            <!-- CONTENT END -->
        </div>
    </div>
</div>
Twig
<div class="full-banner full-banner--mean-bean-alt full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
	<div class="inner">
		<div class="full-banner__content-wrapper"><!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
			<div class="full-banner__content">
				<h1 class="full-banner__title">Mean Bean Nutrition</h1>
				<p>with DR. BEAN, MB</p>
				<div class="mean-bean-nutrition"></div>
			</div>
			<!-- CONTENT END -->
		</div>
	</div>
</div>
{}

Mean Bean Nutrition

with DR. BEAN, MB

Tales {% include 'components/mean-bean/tales' %}
#
HTML
<div class="inner mean-bean">
    <h1>
        Bean <span>Tales</span>
    </h1>
    <div class="clearfix">
        <div class="bean-tale">
            <img src="https://www.tearfund.org/images/mainsite5/birthday/birthday-norma.png">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.</p>
        </div>
        <div class="bean-tale">
            <img src="https://www.tearfund.org/images/mainsite5/birthday/birthday-norma.png">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.</p>
        </div>
        <div class="bean-tale">
            <img src="https://www.tearfund.org/images/mainsite5/birthday/birthday-norma.png">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.</p>
        </div>
    </div>
    <div class="bean-tales-cta">
        <a href="#" class="button button--mean-bean button--mean-bean--bean button--mean-bean-small">Sign Up Today</a>

        <p><strong>Something has to be done. We're Mean Beaners and we won't stop fighting hunger - we won't stop until poverty stops. So get your friends together, stock up on those beans and let's smash poverty together.</strong></p>
    </div>
</div>
Twig
<div class="inner mean-bean">
	<h1>Bean <span>Tales</span></h1>

	<div class="clearfix">
		<div class="bean-tale">
			<img src="https://www.tearfund.org/images/mainsite5/birthday/birthday-norma.png">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.</p>
		</div>
		<div class="bean-tale">
			<img src="https://www.tearfund.org/images/mainsite5/birthday/birthday-norma.png">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.</p>
		</div>
		<div class="bean-tale">
			<img src="https://www.tearfund.org/images/mainsite5/birthday/birthday-norma.png">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.</p>
		</div>
	</div>

	<div class="bean-tales-cta">
		<a href="#" class="button button--mean-bean button--mean-bean--bean button--mean-bean-small">Sign Up Today</a>
		<p><strong>Something has to be done. We're Mean Beaners and we won't stop fighting hunger - we won't stop until poverty stops. So get your friends together, stock up on those beans and let's smash poverty together.</strong></p>
	</div>		
</div>
{}

Bean Tales

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus semper velit semper consectetur sed et mauris. Sed efficitur eget sem ac dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales nisl at feugiat tempus. Nulla sit amet dignissim orci, vel congue magna. Etiam porta sem a justo fringilla posuere. Proin dignissim luctus viverra.

Sign Up Today

Something has to be done. We're Mean Beaners and we won't stop fighting hunger - we won't stop until poverty stops. So get your friends together, stock up on those beans and let's smash poverty together.

Video Section {% include 'components/mean-bean/video-section' %}
#
HTML
<div class="grey-section">
    <div class="inner mean-bean">
        <picture class="desktop-only">
            <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Landing_Page_Youtube-Video_Beans.png, /images/mainsite5/mean-bean/2019/Landing_Page_Youtube-Video_Beans_@2x.png 2x">
                <source media="(min-width: 100px)" srcset="">
                    <img src="/images/mainsite5/mean-bean/2019/Landing_Page_Youtube-Video_Beans.png" class="mean-bean-video-image" alt="Mean Bean Challenge">
                </picture>
                <div class="rwd-video">
                    <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Pdkbwj0S9hM?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
Twig
<div class="grey-section">
	<div class="inner mean-bean">
		<picture class="desktop-only">
		  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Landing_Page_Youtube-Video_Beans.png, /images/mainsite5/mean-bean/2019/Landing_Page_Youtube-Video_Beans_@2x.png 2x">
		  <source media="(min-width: 100px)" srcset="">
		  <img src="/images/mainsite5/mean-bean/2019/Landing_Page_Youtube-Video_Beans.png" class="mean-bean-video-image" alt="Mean Bean Challenge">
		</picture> 
		<div class="rwd-video">
			<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Pdkbwj0S9hM?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
</div>
{}
Mean Bean Challenge
Intro {% include 'components/mean-bean/intro' %}
#
HTML
<div class="mean-bean mean-bean-content inner clearfix">
    <div class="large-col-4">
        <h1 class="mobile-only">
            CASE STUDY HEADLINE TO GO HERE
        </h1>
        <a class="matunda-link" href="#">
            <div class="matunda-container"></div>
        </a>
    </div>
    <div class="large-col-8">
        <div class="mean-bean-content-left">
            <h2 class="desktop-only">
                CASE STUDY HEADLINE TO GO HERE
            </h2>
            <p>After losing her parents, Birungi missed out on an education in order to look after her younger twin sisters, neither of whom could walk. With no means to provide for her family, Birungi received sewing skills training through a Tearfund partner and now runs her own sustainable business.</p>
            <p><strong>Xxxxxxxxg with us, you’ll be changing the lives of people living in desperate need – people like Birungi.</strong></p>
            <div class="mean-bean-button">
                <a href="#" class="button button--mean-bean button--mean-bean-white-bg">
                    <div class="button-bottom"></div>
                    <div class="button-top">Read Matunda's story</div>
                </a>
            </div>
        </div>
    </div>
</div>
Twig
<div class="mean-bean mean-bean-content inner clearfix">

	<div class="large-col-4">
		<h1 class="mobile-only">CASE STUDY HEADLINE TO GO HERE</h1>
		<a class="matunda-link" href="#">
			<div class="matunda-container">
			</div>
		</a>
	</div>

	<div class="large-col-8">
		<div class="mean-bean-content-left">
			<h2 class="desktop-only">CASE STUDY HEADLINE TO GO HERE</h2>
			<p>After losing her parents, Birungi missed out on an education in order to look after her younger twin sisters, neither of whom could walk. With no means to provide for her family, Birungi received sewing skills training through a Tearfund partner and now runs her own sustainable business.</p>

			<p><strong>Xxxxxxxxg with us, you’ll be changing the lives of people living in desperate need – people like Birungi.</strong></p>
			<div class="mean-bean-button">
                <a href="#" class="button button--mean-bean button--mean-bean-white-bg">
                    <div class="button-bottom"></div>
                    <div class="button-top">Read Matunda's story</div>
                </a>
            </div>
		</div>
	</div>
	
</div>
{}

CASE STUDY HEADLINE TO GO HERE

CASE STUDY HEADLINE TO GO HERE

After losing her parents, Birungi missed out on an education in order to look after her younger twin sisters, neither of whom could walk. With no means to provide for her family, Birungi received sewing skills training through a Tearfund partner and now runs her own sustainable business.

Xxxxxxxxg with us, you’ll be changing the lives of people living in desperate need – people like Birungi.

Header Story {% include 'components/mean-bean/header-story' %}
#
HTML
<div class="full-banner full-banner--mean-bean-lyson full-banner--image" data-image="/images/mainsite5/mean-bean/case-study-hero.jpg">
    <div class="inner">
        <div class="full-banner__content-wrapper">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content">
                <h1 class="full-banner__title">
                    Life on the edge
                </h1>
                <p>Help Matunda - take on the mean bean challenge</p>
                <a class="button button--mean-bean">
                    <div class="button--mean-bean__left-white"></div>
                    <div class="button--mean-bean__top"></div>
                    <div class="button--mean-bean__left"></div>
                    Sign Up Today

                    <div class="button--mean-bean__bottom-white"></div>
                    <div class="button--mean-bean__right"></div>
                    <div class="button--mean-bean__bottom"></div>
                </a>
            </div>
            <!-- CONTENT END -->
        </div>
    </div>
</div>
Twig
<div class="full-banner full-banner--mean-bean-lyson full-banner--image" data-image="/images/mainsite5/mean-bean/case-study-hero.jpg">
	<div class="inner">
		<div class="full-banner__content-wrapper"><!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
			<div class="full-banner__content">
				<h1 class="full-banner__title">Life on the edge</h1>
				<p>Help Matunda - take on the mean bean challenge</p>
				<a class="button button--mean-bean">
					<div class="button--mean-bean__left-white"></div>
					<div class="button--mean-bean__top"></div>
					<div class="button--mean-bean__left"></div>
					Sign Up Today
					<div class="button--mean-bean__bottom-white"></div>
					<div class="button--mean-bean__right"></div>
					<div class="button--mean-bean__bottom"></div>
				</a>
			</div>
			<!-- CONTENT END -->
		</div>
	</div>
</div>
{}

Life on the edge

Help Matunda - take on the mean bean challenge

Sign Up Today
Quantities {% include 'components/mean-bean/quantities' %}
#
HTML
<section class="inner mean-bean">
    <div class="mean-bean-yellow-block mean-bean-yellow-block--quantity">
        <div class="mobile-only">
            <h1>
                The all-important <span>quantities</span>
            </h1>
            <strong>As a minimum, we'd recommend the following:</strong>

        </div>
        <div class="mean-bean-welcome__plate-fork"></div>
        <div class="desktop-only">
            <h1>
                The all-important <span>quantities</span>
            </h1>
            <strong>As a minimum, we'd recommend the following:</strong>

        </div>
        <div class="quantity-meal">
            <h2>
                Breakfast:
            </h2>
            100g porridge, made with water

        </div>
        <div class="quantity-meal">
            <h2>
                Lunch:
            </h2>
            50g rice with 100g beans

        </div>
        <div class="quantity-meal">
            <h2>
                Dinner:
            </h2>
            50g rice with 100g beans

        </div>
        <p>This ammounts to approve 980 calories per day. NB: All weights given are for dry, pre-cooked quantities. For more, see our <a href="https://www.tearfund.org/en/about_you/fundraise/mean_bean_challenge/nutrition/">nutrition advice</a>.</p>
    </div>
</section>
Twig
<section class="inner mean-bean">
	<div class="mean-bean-yellow-block mean-bean-yellow-block--quantity">
		<div class="mobile-only">
			<h1>The all-important <span>quantities</span></h1>
			<strong>As a minimum, we'd recommend the following:</strong>
		</div>
		<div class="mean-bean-welcome__plate-fork"></div>
		<div class="desktop-only">
			<h1>The all-important <span>quantities</span></h1>
			<strong>As a minimum, we'd recommend the following:</strong>
		</div>
		<div class="quantity-meal">
			<h2>Breakfast:</h2>
			100g porridge, made with water
		</div>
		<div class="quantity-meal">
			<h2>Lunch:</h2>
			50g rice with 100g beans
		</div>
		<div class="quantity-meal">
			<h2>Dinner:</h2>
			50g rice with 100g beans
		</div>
		<p>This ammounts to approve 980 calories per day. NB: All weights given are for dry, pre-cooked quantities. For more, see our <a href="https://www.tearfund.org/en/about_you/fundraise/mean_bean_challenge/nutrition/">nutrition advice</a>.</p>
	</div>
</section>
{}

The all-important quantities

As a minimum, we'd recommend the following:

The all-important quantities

As a minimum, we'd recommend the following:

Breakfast:

100g porridge, made with water

Lunch:

50g rice with 100g beans

Dinner:

50g rice with 100g beans

This ammounts to approve 980 calories per day. NB: All weights given are for dry, pre-cooked quantities. For more, see our nutrition advice.

Header Faq {% include 'components/mean-bean/header-faq' %}
#
HTML
<div class="full-banner full-banner--mean-bean-alt full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
    <div class="inner">
        <div class="full-banner__content-wrapper">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content">
                <h1 class="full-banner__title">
                    Mean Bean FAQS
                </h1>
                <!-- <p>
                Everything a Mean Bean needs to know.
            </p>
            -->
            <div class="mean-bean-faq"></div>
        </div>
        <!-- CONTENT END -->
    </div>
</div>
</div>
Twig
<div class="full-banner full-banner--mean-bean-alt full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
	<div class="inner">
		<div class="full-banner__content-wrapper"><!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
			<div class="full-banner__content">
				<h1 class="full-banner__title">Mean Bean FAQS</h1>
<!-- 				<p>Everything a Mean Bean needs to know.</p>
 -->				<div class="mean-bean-faq"></div>
			</div>
			<!-- CONTENT END -->
		</div>
	</div>
</div>
{}

Mean Bean FAQS

Pay Your Money In {% include 'components/mean-bean/pay-your-money-in' %}
#
HTML
<div class="inner mean-bean">
    <div class="mean-bean-pay-in clearfix">
        <div class="large-col-4">
            <picture class="desktop-only">
                <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile_@2x.png 2x">
                    <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile_@2x.png 2x">
                        <img src="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
                    </picture>
                </div>
                <div class="large-col-8">
                    <h2>
                        Pay in your money
                    </h2>
                    <p>XX Thank you so much for fundraising for Tearfund. We’re so grateful for all the hard work you put into helping us to bring an end to poverty. Please use our simple online form to pay in your money.</p>
                    <picture class="mobile-only">
                        <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile_@2x.png 2x">
                            <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile_@2x.png 2x">
                                <img src="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
                            </picture>
                        </div>
                    </div>
                </div>
Twig
<div class="inner mean-bean">
	<div class="mean-bean-pay-in clearfix">

		<div class="large-col-4">
			<picture class="desktop-only">
			  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile_@2x.png 2x">
			  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile_@2x.png 2x">
			  <img src="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
			</picture> 
		</div>

		<div class="large-col-8">
			<h2>Pay in your money</h2>
			<p>XX Thank you so much for fundraising for Tearfund. We’re so grateful for all the hard work you put into helping us to bring an end to poverty. Please use our simple online form to pay in your money.</p>

			<picture class="mobile-only">
			  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Red_Bean_Mobile_@2x.png 2x">
			  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile_@2x.png 2x">
			  <img src="/images/mainsite5/mean-bean/2019/PayInYourMoney_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
			</picture> 
		</div>

	</div>
</div>
{}
Mean Bean Challenge

Pay in your money

XX Thank you so much for fundraising for Tearfund. We’re so grateful for all the hard work you put into helping us to bring an end to poverty. Please use our simple online form to pay in your money.

Mean Bean Challenge
Altetnate Footer {% include 'components/mean-bean/altetnate-footer' %}
#
HTML
<div class="mean-bean mean-bean-sign-section mean-bean-sign-section--alt">
    <div class="mean-bean-sign-section--alt__logo"></div>
    <a class="button button--mean-bean">
        <div class="button--mean-bean__left-white"></div>
        <div class="button--mean-bean__top"></div>
        <div class="button--mean-bean__left"></div>
        Sign Up Today

        <div class="button--mean-bean__bottom-white"></div>
        <div class="button--mean-bean__right"></div>
        <div class="button--mean-bean__bottom"></div>
    </a>
</div>
Twig
<div class="mean-bean mean-bean-sign-section mean-bean-sign-section--alt">

	<div class="mean-bean-sign-section--alt__logo"></div>
	<a class="button button--mean-bean">
		<div class="button--mean-bean__left-white"></div>
		<div class="button--mean-bean__top"></div>
		<div class="button--mean-bean__left"></div>
		Sign Up Today
		<div class="button--mean-bean__bottom-white"></div>
		<div class="button--mean-bean__right"></div>
		<div class="button--mean-bean__bottom"></div>
	</a>
</div>
{}
Welcome {% include 'components/mean-bean/welcome' %}
#
HTML
<div class="inner mean-bean mean-bean-guide-welcome" style="position: relative;">
    <div class="mean-bean-welcome__guide desktop-only"></div>
    <div class="mean-bean-yellow-block">
        <h2>
            Welcome <span>Mean Beaners!</span>
        </h2>
        <p>This is the one-stop shop for all your Mean Bean needs. You'll find a step-by-step guide, some useful tips, plus some awesome resources to make sure your challenge is as full of beans as possible.</p>
        <div class="mean-bean-welcome__guide mobile-only"></div>
    </div>
</div>
Twig
<div class="inner mean-bean mean-bean-guide-welcome" style="position: relative;">
	<div class="mean-bean-welcome__guide desktop-only"></div>
	<div class="mean-bean-yellow-block">
		<h2>Welcome <span>Mean Beaners!</span></h2>
		<p>This is the one-stop shop for all your Mean Bean needs. You'll find a step-by-step guide, some useful tips, plus some awesome resources to make sure your challenge is as full of beans as possible.</p>
		<div class="mean-bean-welcome__guide mobile-only"></div>
	</div>
</div>
{}

Welcome Mean Beaners!

This is the one-stop shop for all your Mean Bean needs. You'll find a step-by-step guide, some useful tips, plus some awesome resources to make sure your challenge is as full of beans as possible.

Welcome Nutrition {% include 'components/mean-bean/welcome-nutrition' %}
#
HTML
<div class="inner mean-bean" style="position: relative;">
    <!-- <div class="mean-bean-welcome__nutrition desktop-only"></div>
-->
<div class="mean-bean-yellow-block mean-bean-yellow-block--nutrition clearfix">
    <div class="large-col-4">
        <img src="/images/mainsite5/mean-bean/mb-nutrition-welcome.gif" alt="Dr. Bean">
        <!-- <div class="mean-bean-welcome__nutrition mobile-only"></div>
    -->

</div>
<div class="large-col-8">
    <h1>
        Meet the doc
    </h1>
    <p>
        <strong>
            How can I stay healthy during the Mean Bean challenge?
            <br />
            Just how many calories are there in a portion of beans?
            <br />
            What if I feel unwell? And are kidney beans made from real kidneys?
        </strong>
    </p>
    <p>Nutrition expert and legume extroadinaire Dr Bean* is here to answer all the questions you may have about the Mean Bean Challenge.</p>
    <p>
        **AKA Wendy Williams, BSc (Hons) – qualified nutritionist and human bean.
    </strong>
</p>
</div>
</div>
</div>
Twig
<div class="inner mean-bean" style="position: relative;">
<!-- 	<div class="mean-bean-welcome__nutrition desktop-only"></div>
 -->	<div class="mean-bean-yellow-block mean-bean-yellow-block--nutrition clearfix">
		<div class="large-col-4">
		    <img src="/images/mainsite5/mean-bean/mb-nutrition-welcome.gif" alt="Dr. Bean">
			<!-- <div class="mean-bean-welcome__nutrition mobile-only"></div> -->
		</div>
		<div class="large-col-8">
		<h1>Meet the doc</h1>
			<p><strong>How can I stay healthy during the Mean Bean challenge?<br />
			Just how many calories are there in a portion of beans?<br />
			What if I feel unwell? And are kidney beans made from real kidneys?</strong></p>

			<p>Nutrition expert and legume extroadinaire Dr Bean* is here to answer all the questions you may have about the Mean Bean Challenge.</p>

			<p>**AKA Wendy Williams, BSc (Hons) – qualified nutritionist and human bean.</strong></p>
		</div>
	</div>
</div>
{}
Dr. Bean

Meet the doc

How can I stay healthy during the Mean Bean challenge?
Just how many calories are there in a portion of beans?
What if I feel unwell? And are kidney beans made from real kidneys?

Nutrition expert and legume extroadinaire Dr Bean* is here to answer all the questions you may have about the Mean Bean Challenge.

**AKA Wendy Williams, BSc (Hons) – qualified nutritionist and human bean.

Guide Content {% include 'components/mean-bean/guide-content' %}
#
HTML
<div class="mean-bean clearfix">
    <div class="grey-section">
        <div class="inner clearfix">
            <div class="large-col-6">
                <picture>
                    <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/OnYourMarks_Desktop.png, /images/mainsite5/mean-bean/2019/OnYourMarks_Desktop_@2x.png 2x">
                        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/OnYourMarks_Mobile.png, /images/mainsite5/mean-bean/2019/OnYourMarks_Mobile_@2x.png 2x">
                            <img class="mb-on-your-marks" src="/images/mainsite5/mean-bean/2019/OnYourMarks_Mobile.png" alt="On Your Marks">
                        </picture>
                    </div>
                    <div class="large-col-6">
                        <div class="mean-bean-step">
                            <h3>
                                <span>STEP 1</span> SIGN UP
                            </h3>
                            <p>The easy bit. Want to take on the beans in the name of smashing poverty? <a href="http://www.tearfund.org/meanbean">Sign up here.</a></p>
                        </div>
                    </div>
                    <div class="large-col-12">
                        <div class="mean-bean-step mean-bean-step--step-2 clearfix">
                            <h3>
                                <span>STEP 2</span> Bean team… assemble!
                            </h3>
                            <picture>
                                <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Mobile.png, /images/mainsite5/mean-bean/2019/Invite_Your_Friends_Mobile_@2x.png 2x">
                                    <img class="mobile-only" src="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Mobile.png" alt="Mean Bean Team Assemble">
                                </picture>
                                <div class="large-col-6">
                                    <p>Beaners are better together. Share your challenge and invite your friends to sign up here <a href="http://www.tearfund.org/meanbean">www.tearfund.org/meanbean</a>. The challenge is more fun (and easier!) when you have someone to support you.</p>
                                    <a href="#" class="button button--mean-bean button--mean-bean-red">
                                        <div class="button-bottom"></div>
                                        <div class="button-top">Invite a friend</div>
                                    </a>
                                </div>
                                <div class="large-col-6">
                                    <picture>
                                        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Desktop.png, /images/mainsite5/mean-bean/2019/Invite_Your_Friends_Desktop_@2x.png 2x">
                                            <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Fistbump_Beans.png, /images/mainsite5/mean-bean/2019/Invite_Your_Friends_Fistbump_Beans_@2x.png 2x">
                                                <img style="margin-bottom: -5px;" src="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Fistbump_Beans.png.png" alt="Mean Bean Team Assemble">
                                            </picture>
                                        </div>
                                    </div>
                                </div>
                                <div class="large-col-6">
                                    <picture>
                                        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Desktop.png, /images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Desktop_@2x.png 2x">
                                            <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Mobile_@2x.png 2x">
                                                <img src="/images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Desktop.png" alt="Mean Bean Fundraising">
                                            </picture>
                                        </div>
                                        <div class="large-col-6">
                                            <div class="mean-bean-step">
                                                <h3>
                                                    <span>STEP 3</span> START FUNDRAISING!
                                                </h3>
                                                <p>When you sign up, we’ll create a JustGiving fundraising page for you (we’re nice like that). Personalised pages make more money, so make sure you add a picture and include your own motivation. Then it’s all about sharing the page with as many people as you can! Want a printed sponsorship form? No problem! You can find one in the resources section <a href="https://www.tearfund.org/en/about_you/fundraise/mean_bean_challenge/other_resources/">here</a>.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner clearfix">
                                    <div class="mobile-only large-col-6">
                                        <picture>
                                            <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png, /images/mainsite5/mean-bean/2019/Get_Set_Mobile_@2x.png 2x">
                                                <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
                                            </picture>
                                        </div>
                                        <div class="large-col-6">
                                            <div class="mean-bean-step">
                                                <h3>
                                                    <span>STEP 4</span> BE<span class="secondary">AN</span> PREPARED
                                                </h3>
                                                <p>Time to fill your cupboards with rice, beans and oats. You’ll be eating plain porridge for breakfast, and plain rice and beans for lunch and dinner. The recommended amounts are a little further on. Any questions? You're in luck – we’ve put together a <a href="http://www.tearfund.org/meanbean/faq">super-handy FAQ page</a> to answer all the questions you could possibly have (plus a few that you didn’t even know needed answering).</p>
                                            </div>
                                            <div class="mean-bean-step">
                                                <h3>
                                                    <span>STEP 5</span> GET SOME FREEBIES
                                                </h3>
                                                <p>We’ve got some awesome resources designed to help you with your fundraising efforts, eg sponsorship forms and Facebook profile images. <a href="https://www.tearfund.org/en/about_you/fundraise/mean_bean_challenge/other_resources/">Check them out here</a>.</p>
                                            </div>
                                        </div>
                                        <div class="desktop-only large-col-6">
                                            <picture>
                                                <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/Get_Set_Desktop.png, /images/mainsite5/mean-bean/2019/Get_Set_Desktop_@2x.png 2x">
                                                    <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
                                                </picture>
                                            </div>
                                        </div>
                                        <div class="grey-section">
                                            <div class="inner clearfix">
                                                <div class="large-col-6">
                                                    <picture>
                                                        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/Go_Desktop.png, /images/mainsite5/mean-bean/2019/Go_Desktop_@2x.png 2x">
                                                            <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Go_Mobile.png, /images/mainsite5/mean-bean/2019/Go_Mobile_@2x.png 2x">
                                                                <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
                                                            </picture>
                                                        </div>
                                                        <div class="large-col-6">
                                                            <div class="mean-bean-step">
                                                                <h3>
                                                                    <span>STEP 6</span> POWER UP
                                                                </h3>
                                                                <p>This is it. Time to hit the beans. For motivation, check out Nida’s story [link] – people like [him/her] are the reason we’re doing this. Remember to pray as well – this is a spiritual challenge, as well as a physical one.</p>
                                                            </div>
                                                            <div class="mean-bean-step">
                                                                <h3>
                                                                    <span>STEP 7</span> SHARING THE LOVE
                                                                </h3>
                                                                <p>Join our Mean Beaner Facebook community here (they’re all lovely – it’s the beans that are mean). We’ll share words of encouragement, plus useful hints and tips every day. Use the hashtag #MeanBeanChallenge on social media to tell us about your experience.</p>
                                                            </div>
                                                            <div class="mean-bean-step">
                                                                <h3>
                                                                    <span>STEP 8</span> FINISH WELL
                                                                </h3>
                                                                <p>We’ll all finish the challenge together at 6pm on Sunday 24 March – including everyone taking part in the Mean Bean Weekender [link]. Why not meet with everyone you’ve been doing the challenge with to celebrate, as well as pray for people like Nida [link].</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
Twig
<div class="mean-bean clearfix">
	<div class="grey-section">
		<div class="inner clearfix">
			<div class="large-col-6">
				<picture>
					<source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/OnYourMarks_Desktop.png,  /images/mainsite5/mean-bean/2019/OnYourMarks_Desktop_@2x.png 2x">
			        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/OnYourMarks_Mobile.png, /images/mainsite5/mean-bean/2019/OnYourMarks_Mobile_@2x.png 2x">
		            <img class="mb-on-your-marks" src="/images/mainsite5/mean-bean/2019/OnYourMarks_Mobile.png" alt="On Your Marks">
	    	    </picture>
			</div>
			<div class="large-col-6">
				<div class="mean-bean-step">
					<h3><span>STEP 1</span> SIGN UP</h3>
					<p>The easy bit. Want to take on the beans in the name of smashing poverty? <a href="http://www.tearfund.org/meanbean">Sign up here.</a></p>
				</div>
			</div>

			<div class="large-col-12">
				<div class="mean-bean-step mean-bean-step--step-2 clearfix">
					<h3><span>STEP 2</span> Bean team… assemble!</h3>
					<picture>
					        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Mobile.png, /images/mainsite5/mean-bean/2019/Invite_Your_Friends_Mobile_@2x.png 2x">
				            <img class="mobile-only" src="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Mobile.png" alt="Mean Bean Team Assemble">
		    	    </picture>
		    	    <div class="large-col-6">
						<p>Beaners are better together. Share your challenge and invite your friends to sign up here <a href="http://www.tearfund.org/meanbean">www.tearfund.org/meanbean</a>.  The challenge is more fun (and easier!) when you have someone to support you.</p>
						<a href="#" class="button button--mean-bean button--mean-bean-red">
	                        <div class="button-bottom"></div>
	                        <div class="button-top">Invite a friend</div>
	                    </a>
                   	</div>
                   	<div class="large-col-6">
						<picture>
								<source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Desktop.png,  /images/mainsite5/mean-bean/2019/Invite_Your_Friends_Desktop_@2x.png 2x">
						        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Fistbump_Beans.png, /images/mainsite5/mean-bean/2019/Invite_Your_Friends_Fistbump_Beans_@2x.png 2x">
					            <img style="margin-bottom: -5px;" src="/images/mainsite5/mean-bean/2019/Invite_Your_Friends_Fistbump_Beans.png.png" alt="Mean Bean Team Assemble">
			    	    </picture>
			    	</div>
				</div>
			</div>

			<div class="large-col-6">	
				<picture>
			        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Desktop.png,  /images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Desktop_@2x.png 2x">
			        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Mobile_@2x.png 2x">
		            <img src="/images/mainsite5/mean-bean/2019/MeanBeanGuide_Fundraise_Bean_Desktop.png" alt="Mean Bean Fundraising">
    	    </picture>
			</div>
			<div class="large-col-6">
				<div class="mean-bean-step">
					<h3><span>STEP 3</span> START FUNDRAISING!</h3>
					<p>When you sign up, we’ll create a JustGiving fundraising page for you (we’re nice like that). Personalised pages make more money, so make sure you add a picture and include your own motivation. Then it’s all about sharing the page with as many people as you can! Want a printed sponsorship form? No problem! You can find one in the resources section <a href="https://www.tearfund.org/en/about_you/fundraise/mean_bean_challenge/other_resources/">here</a>.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="inner clearfix">
		<div class="mobile-only large-col-6">
			<picture>
		        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png, /images/mainsite5/mean-bean/2019/Get_Set_Mobile_@2x.png 2x">
	            <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
    	    </picture>
		</div>		
		<div class="large-col-6">
			<div class="mean-bean-step">
				<h3><span>STEP 4</span> BE<span class="secondary">AN</span> PREPARED</h3>
				<p>Time to fill your cupboards with rice, beans and oats. You’ll be eating plain porridge for breakfast, and plain rice and beans for lunch and dinner. The recommended amounts are a little further on. Any questions? You're in luck – we’ve put together a <a href="http://www.tearfund.org/meanbean/faq">super-handy FAQ page</a> to answer all the questions you could possibly have (plus a few that you didn’t even know needed answering).</p>
			</div>	

			<div class="mean-bean-step">
				<h3><span>STEP 5</span> GET SOME FREEBIES</h3>
				<p>We’ve got some awesome resources designed to help you with your fundraising efforts, eg sponsorship forms and Facebook profile images.  <a href="https://www.tearfund.org/en/about_you/fundraise/mean_bean_challenge/other_resources/">Check them out here</a>.</p>
			</div>	
		</div>
		<div class="desktop-only large-col-6">
			<picture>
		        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/Get_Set_Desktop.png,  /images/mainsite5/mean-bean/2019/Get_Set_Desktop_@2x.png 2x">
	            <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
    	    </picture>
		</div>		
	</div>
	<div class="grey-section">
		<div class="inner clearfix">
			<div class="large-col-6">
				<picture>
			        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/Go_Desktop.png,  /images/mainsite5/mean-bean/2019/Go_Desktop_@2x.png 2x">
			        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/Go_Mobile.png, /images/mainsite5/mean-bean/2019/Go_Mobile_@2x.png 2x">
		            <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
	    	    </picture>
			</div>		
			<div class="large-col-6">
				<div class="mean-bean-step">
					<h3><span>STEP 6</span> POWER UP</h3>
					<p>This is it. Time to hit the beans. For motivation, check out Nida’s story [link] – people like [him/her] are the reason we’re doing this. Remember to pray as well – this is a spiritual challenge, as well as a physical one.</p>
				</div>

				<div class="mean-bean-step">
					<h3><span>STEP 7</span> SHARING THE LOVE</h3>
					<p>Join our Mean Beaner Facebook community here (they’re all lovely – it’s the beans that are mean). We’ll share words of encouragement, plus useful hints and tips every day. Use the hashtag #MeanBeanChallenge on social media to tell us about your experience.</p>
				</div>	

				<div class="mean-bean-step">
					<h3><span>STEP 8</span> FINISH WELL</h3>
					<p>We’ll all finish the challenge together at 6pm on Sunday 24 March – including everyone taking part in the Mean Bean Weekender [link]. Why not meet with everyone you’ve been doing the challenge with to celebrate, as well as pray for people like Nida [link].</p>
				</div>	
			</div>
		</div>
	</div>
</div>
{}
On Your Marks

STEP 1 SIGN UP

The easy bit. Want to take on the beans in the name of smashing poverty? Sign up here.

STEP 2 Bean team… assemble!

Mean Bean Team Assemble

Beaners are better together. Share your challenge and invite your friends to sign up here www.tearfund.org/meanbean. The challenge is more fun (and easier!) when you have someone to support you.

Invite a friend
Mean Bean Team Assemble
Mean Bean Fundraising

STEP 3 START FUNDRAISING!

When you sign up, we’ll create a JustGiving fundraising page for you (we’re nice like that). Personalised pages make more money, so make sure you add a picture and include your own motivation. Then it’s all about sharing the page with as many people as you can! Want a printed sponsorship form? No problem! You can find one in the resources section here.

Get Set

STEP 4 BEAN PREPARED

Time to fill your cupboards with rice, beans and oats. You’ll be eating plain porridge for breakfast, and plain rice and beans for lunch and dinner. The recommended amounts are a little further on. Any questions? You're in luck – we’ve put together a super-handy FAQ page to answer all the questions you could possibly have (plus a few that you didn’t even know needed answering).

STEP 5 GET SOME FREEBIES

We’ve got some awesome resources designed to help you with your fundraising efforts, eg sponsorship forms and Facebook profile images. Check them out here.

Get Set
Get Set

STEP 6 POWER UP

This is it. Time to hit the beans. For motivation, check out Nida’s story [link] – people like [him/her] are the reason we’re doing this. Remember to pray as well – this is a spiritual challenge, as well as a physical one.

STEP 7 SHARING THE LOVE

Join our Mean Beaner Facebook community here (they’re all lovely – it’s the beans that are mean). We’ll share words of encouragement, plus useful hints and tips every day. Use the hashtag #MeanBeanChallenge on social media to tell us about your experience.

STEP 8 FINISH WELL

We’ll all finish the challenge together at 6pm on Sunday 24 March – including everyone taking part in the Mean Bean Weekender [link]. Why not meet with everyone you’ve been doing the challenge with to celebrate, as well as pray for people like Nida [link].

Tips {% include 'components/mean-bean/tips' %}
#
HTML
<section class="inner mean-bean">
    <div class="mb-tips clearfix">
        <h1>
            Top Ten <span>Tips</span>
        </h1>
        <div class="equaliser-row">
            <div class="mb-tip equalise">
                <div class="mb-tip__title-container">
                    <div class="mb-tip__number">1</div>
                    <div class="mb-tip__title">
                        <h3>
                            Create Space
                        </h3>
                    </div>
                </div>
                <p>Create some space during the week to just stop and reflect. You look at life differently during the challenge.</p>
            </div>
            <div class="mb-tip equalise">
                <div class="mb-tip__title-container">
                    <div class="mb-tip__number">2</div>
                    <div class="mb-tip__title">
                        <h3>
                            Stay Hydrated
                        </h3>
                    </div>
                </div>
                <picture>
                    <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/water.png, /images/mainsite5/mean-bean/water@2x.png 2x">
                        <img class="mb-water" src="/images/mainsite5/mean-bean/water.png" alt="Water">
                    </picture>
                    <p>Drink loads of water – it will keep you hydrated and fill you up a little better when you're craving cake.</p>
                </div>
            </div>
            <div class="equaliser-row">
                <div class="mb-tip equalise">
                    <div class="mb-tip__title-container">
                        <div class="mb-tip__number">3</div>
                        <div class="mb-tip__title">
                            <h3>
                                Prepare
                            </h3>
                        </div>
                    </div>
                    <p>Wean yourself off caffeine/sugary snacks the week leading up to Mean Bean or else you'll suffer from caffeine withdrawal headaches or sugar cravings.</p>
                </div>
                <div class="mb-tip equalise">
                    <div class="mb-tip__title-container">
                        <div class="mb-tip__number">4</div>
                        <div class="mb-tip__title">
                            <h3>
                                Try Fasting
                            </h3>
                        </div>
                    </div>
                    <p>You could treat this as a fast. Expect God to be your sustenance as you choose not to live on bread alone (Deuteronomy 8:3).</p>
                    <picture>
                        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Desktop.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Desktop_@2x.png 2x">
                            <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Mobile_@2x.png 2x">
                                <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
                            </picture>
                        </div>
                    </div>
                    <div class="mb-tip equalise">
                        <div class="mb-tip__title-container">
                            <div class="mb-tip__number">5</div>
                            <div class="mb-tip__title">
                                <h3>
                                    Team Up
                                </h3>
                            </div>
                        </div>
                        <p>Get your housemates, friends or family to do it with you. It's much harder if you're doing it alone, surrounded by other people tucking into some Coq au vin.</p>
                        <picture>
                            <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Desktop.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Desktop_@2x.png 2x">
                                <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
                                    <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" style="margin: 0 auto" alt="Get Set">
                                </picture>
                            </div>
                            <div class="mb-tip equalise">
                                <div class="mb-tip__title-container">
                                    <div class="mb-tip__number">6</div>
                                    <div class="mb-tip__title">
                                        <h3>
                                            Know your limits
                                        </h3>
                                    </div>
                                </div>
                                <p>Your brain will be operating on less sugar and this will reduce your mental capacity. You'll forget stuff more easily, lose your train of thought and operate more slowly – so take it easy.</p>
                            </div>
                            <div class="mb-tip equalise">
                                <div class="mb-tip__title-container">
                                    <div class="mb-tip__number">7</div>
                                    <div class="mb-tip__title">
                                        <h3>
                                            Take a Trip
                                        </h3>
                                    </div>
                                </div>
                                <p>Go to the supermarket at least once during the week. You'll notice the crazy amount of choice we have in the UK, which will help you reflect on how fortunate we are.</p>
                            </div>
                            <div class="mb-tip equalise">
                                <div class="mb-tip__title-container">
                                    <div class="mb-tip__number">8</div>
                                    <div class="mb-tip__title">
                                        <h3>
                                            Divide and Conquer
                                        </h3>
                                    </div>
                                </div>
                                <p>It can help to split up meals so that the hunger pangs are less severe – ie eat half your breakfast amount, then finish it at 11am.</p>
                            </div>
                            <div class="mb-tip equalise">
                                <div class="mb-tip__title-container">
                                    <div class="mb-tip__number">9</div>
                                    <div class="mb-tip__title">
                                        <h3>
                                            Keep busy
                                        </h3>
                                    </div>
                                </div>
                                <p>While it can be hard to make plans with friends when you know you’ll be hungry, having a couple of evenings being busy can help make the week go quickly.</p>
                            </div>
                            <div class="mb-tip equalise mb-tip--full equalise">
                                <div class="mb-tip__title-container">
                                    <div class="mb-tip__number">10</div>
                                    <div class="mb-tip__title">
                                        <h3>
                                            Celebrate
                                        </h3>
                                    </div>
                                </div>
                                <div class="large-col-6">
                                    <p>When the clock hits 6pm on Sunday 24 March, you’ll have completed something amazing. Around 20 per cent of donations come in after the challenge, so continue to remind people how they can sponsor you. Then, celebrate the fact that lives have been transformed, and treat yourself to a cuppa – <strong>you’ve earned it!</strong></p>
                                </div>
                                <div class="large-col-6">
                                    <picture>
                                        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Desktop.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Desktop_@2x.png 2x">
                                            <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Mobile_@2x.png 2x">
                                                <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Desktop.png" alt="Celebrate">
                                            </picture>
                                        </div>
                                    </div>
                                </div>
                            </section>
Twig
<section class="inner mean-bean">
	<div class="mb-tips clearfix">

	<h1>Top Ten <span>Tips</span></h1>

		<div class="equaliser-row">
			<div class="mb-tip equalise">
				<div class="mb-tip__title-container">
					<div class="mb-tip__number">1</div>
					<div class="mb-tip__title"><h3>Create Space</h3></div>
				</div>
				<p>Create some space during the week to just stop and reflect. You look at life differently during the challenge.</p>
			</div>

			<div class="mb-tip equalise">
				<div class="mb-tip__title-container">
					<div class="mb-tip__number">2</div>
					<div class="mb-tip__title"><h3>Stay Hydrated</h3></div>
				</div>
				<picture>
			        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/water.png, /images/mainsite5/mean-bean/water@2x.png 2x">
		            <img class="mb-water" src="/images/mainsite5/mean-bean/water.png" alt="Water">
	    	    </picture>
				<p>Drink loads of water – it will keep you hydrated and fill you up a little better when you're craving cake.</p>
			</div>
		</div>
		<div class="equaliser-row">
			<div class="mb-tip equalise">
				<div class="mb-tip__title-container">
					<div class="mb-tip__number">3</div>
					<div class="mb-tip__title"><h3>Prepare</h3></div>
				</div>
				<p>Wean yourself off caffeine/sugary snacks the week leading up to Mean Bean or else you'll suffer from caffeine withdrawal headaches or sugar cravings.</p>
			</div>

			<div class="mb-tip equalise">
				<div class="mb-tip__title-container">
					<div class="mb-tip__number">4</div>
					<div class="mb-tip__title"><h3>Try Fasting</h3></div>
				</div>
				<p>You could treat this as a fast. Expect God to be your sustenance as you choose not to live on bread alone (Deuteronomy 8:3).</p>
				<picture>
				        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Desktop.png,  /images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Desktop_@2x.png 2x">
				        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_Try_Fasting_Mobile_@2x.png 2x">
			            <img src="/images/mainsite5/mean-bean/2019/Get_Set_Mobile.png" alt="Get Set">
		    	    </picture>
			</div>
		</div>

		<div class="mb-tip equalise">
			<div class="mb-tip__title-container">
				<div class="mb-tip__number">5</div>
				<div class="mb-tip__title"><h3>Team Up</h3></div>
			</div>
			<p>Get your housemates, friends or family to do it with you. It's much harder if you're doing it alone, surrounded by other people tucking into some Coq au vin.</p>
			<picture>
		        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Desktop.png,  /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Desktop_@2x.png 2x">
		        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
	            <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" style="margin: 0 auto" alt="Get Set">
    	    </picture>
		</div>

		<div class="mb-tip equalise">
			<div class="mb-tip__title-container">
				<div class="mb-tip__number">6</div>
				<div class="mb-tip__title"><h3>Know your limits</h3></div>
			</div>
			<p>Your brain will be operating on less sugar and this will reduce your mental capacity. You'll forget stuff more easily, lose your train of thought and operate more slowly – so take it easy.</p>
		</div>

		<div class="mb-tip equalise">
			<div class="mb-tip__title-container">
				<div class="mb-tip__number">7</div>
				<div class="mb-tip__title"><h3>Take a Trip</h3></div>
			</div>
			<p>Go to the supermarket at least once during the week. You'll notice the crazy amount of choice we have in the UK, which will help you reflect on how fortunate we are.</p>
		</div>

		<div class="mb-tip equalise">
			<div class="mb-tip__title-container">
				<div class="mb-tip__number">8</div>
				<div class="mb-tip__title"><h3>Divide and Conquer</h3></div>
			</div>
			<p>It can help to split up meals so that the hunger pangs are less severe – ie eat half your breakfast amount, then finish it at 11am.</p>
		</div>

		<div class="mb-tip equalise">
			<div class="mb-tip__title-container">
				<div class="mb-tip__number">9</div>
				<div class="mb-tip__title"><h3>Keep busy</h3></div>
			</div>
			<p>While it can be hard to make plans with friends when you know you’ll be hungry, having a couple of evenings being busy can help make the week go quickly.</p>
		</div>

		<div class="mb-tip equalise mb-tip--full equalise">
			<div class="mb-tip__title-container">
				<div class="mb-tip__number">10</div>
				<div class="mb-tip__title"><h3>Celebrate</h3></div>
			</div>
			<div class="large-col-6">
				<p>When the clock hits 6pm on Sunday 24 March, you’ll have completed something amazing. Around 20 per cent of donations come in after the challenge, so continue to remind people how they can sponsor you. Then, celebrate the fact that lives have been transformed, and treat yourself to a cuppa – <strong>you’ve earned it!</strong></p>
			</div>
			<div class="large-col-6">
				<picture>
			        <source media="(min-width: 647px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Desktop.png,  /images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Desktop_@2x.png 2x">
			        <source media="(min-width: 375px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Mobile_@2x.png 2x">
		            <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_Celebrate_Desktop.png" alt="Celebrate">
	    	    </picture>
	    	</div>
		</div>
	
	</div>

</section>
{}

Top Ten Tips

1

Create Space

Create some space during the week to just stop and reflect. You look at life differently during the challenge.

2

Stay Hydrated

Water

Drink loads of water – it will keep you hydrated and fill you up a little better when you're craving cake.

3

Prepare

Wean yourself off caffeine/sugary snacks the week leading up to Mean Bean or else you'll suffer from caffeine withdrawal headaches or sugar cravings.

4

Try Fasting

You could treat this as a fast. Expect God to be your sustenance as you choose not to live on bread alone (Deuteronomy 8:3).

Get Set
5

Team Up

Get your housemates, friends or family to do it with you. It's much harder if you're doing it alone, surrounded by other people tucking into some Coq au vin.

Get Set
6

Know your limits

Your brain will be operating on less sugar and this will reduce your mental capacity. You'll forget stuff more easily, lose your train of thought and operate more slowly – so take it easy.

7

Take a Trip

Go to the supermarket at least once during the week. You'll notice the crazy amount of choice we have in the UK, which will help you reflect on how fortunate we are.

8

Divide and Conquer

It can help to split up meals so that the hunger pangs are less severe – ie eat half your breakfast amount, then finish it at 11am.

9

Keep busy

While it can be hard to make plans with friends when you know you’ll be hungry, having a couple of evenings being busy can help make the week go quickly.

10

Celebrate

When the clock hits 6pm on Sunday 24 March, you’ll have completed something amazing. Around 20 per cent of donations come in after the challenge, so continue to remind people how they can sponsor you. Then, celebrate the fact that lives have been transformed, and treat yourself to a cuppa – you’ve earned it!

Celebrate
Header Resource {% include 'components/mean-bean/header-resource' %}
#
HTML
<div class="full-banner full-banner--mean-bean-alt full-banner--mean-bean-resources full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
    <div class="inner">
        <div class="full-banner__content-wrapper">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content">
                <h1 class="full-banner__title">
                    Other Resources
                </h1>
                <div class="mean-bean-other-resources"></div>
            </div>
            <!-- CONTENT END -->
        </div>
    </div>
</div>
Twig
<div class="full-banner full-banner--mean-bean-alt full-banner--mean-bean-resources full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
	<div class="inner">
		<div class="full-banner__content-wrapper"><!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
			<div class="full-banner__content">
				<h1 class="full-banner__title">Other Resources</h1>
				<div class="mean-bean-other-resources"></div>
			</div>
			<!-- CONTENT END -->
		</div>
	</div>
</div>
{}

Other Resources

Totaliser {% include 'components/mean-bean/totaliser' %}
#
HTML
<div class="inner mean-bean">
    <div class="mean-bean-totaliser">
        <div class="mean-bean-totaliser__character"></div>
        <div class="giving-bar__amount giving-bar__community-amount">
            <div class="giving-bar__amount-total">
                <div class="giving-bar__amount-currency">
                    £
                    <input type="number" min="5" max="12000" step="1" class="giving-bar__input" style="width: 33px;">
                </div>
            </div>
        </div>
        <div class="giving-bar__content giving-bar__community-content" id="give">
            <div class="giving-description" data-min="72.00" data-max="288.00">
£72 could restore hope and value to a 1 woman like Birungi through business skills training. </div>
            <div class="giving-description hide" data-min="288.00" data-max="576.00">
£288 could restore hope and value to a 4 women like Birungi through business skills training. </div>
        </div>
        <div class="giving-bar__giving">
            <div class="mean-bean-slider"></div>
            Slide the bean to see how your fundraising could help change lives.

        </div>
        <a class="button button--mean-bean">
            <div class="button--mean-bean__left-white"></div>
            <div class="button--mean-bean__top"></div>
            <div class="button--mean-bean__left"></div>
            Sign Up Today

            <div class="button--mean-bean__bottom-white"></div>
            <div class="button--mean-bean__right"></div>
            <div class="button--mean-bean__bottom"></div>
        </a>
    </div>
</div>
Twig
<div class="inner mean-bean">
	<div class="mean-bean-totaliser">

		<div class="mean-bean-totaliser__character"></div>

		<div class="giving-bar__amount giving-bar__community-amount">
			<div class="giving-bar__amount-total">
				<div class="giving-bar__amount-currency">£<input type="number" min="5" max="12000" step="1" class="giving-bar__input" style="width: 33px;"></div>
			</div>
		</div>	

		<div class="giving-bar__content giving-bar__community-content" id="give">
			<div class="giving-description" data-min="72.00" data-max="288.00">
				£72 could restore hope and value to a 1 woman like Birungi through business skills training.  
			</div>
			<div class="giving-description hide" data-min="288.00" data-max="576.00">
				£288 could restore hope and value to a 4 women like Birungi through business skills training.  
			</div>

		</div>

		<div class="giving-bar__giving">		
			<div class="mean-bean-slider"></div>
			Slide the bean to see how your fundraising could help change lives.
		</div>

		<a class="button button--mean-bean">
			<div class="button--mean-bean__left-white"></div>
			<div class="button--mean-bean__top"></div>
			<div class="button--mean-bean__left"></div>
			Sign Up Today
			<div class="button--mean-bean__bottom-white"></div>
			<div class="button--mean-bean__right"></div>
			<div class="button--mean-bean__bottom"></div>
		</a>

	</div>
</div>
{}
£
£72 could restore hope and value to a 1 woman like Birungi through business skills training.
£288 could restore hope and value to a 4 women like Birungi through business skills training.
Slide the bean to see how your fundraising could help change lives.
Sign Up Today
Header Guide {% include 'components/mean-bean/header-guide' %}
#
HTML
<div class="full-banner full-banner--mean-bean-alt full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
    <div class="inner">
        <div class="full-banner__content-wrapper">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content">
                <h1 class="full-banner__title">
                    Mean Bean Guide
                </h1>
                <p>Everything you need to take on the Mean Bean Challenge</p>
                <div class="mean-bean-guide"></div>
            </div>
            <!-- CONTENT END -->
        </div>
    </div>
</div>
Twig
<div class="full-banner full-banner--mean-bean-alt full-banner--image" data-image="/images/mainsite5/mean-bean/background.jpg" >
	<div class="inner">
		<div class="full-banner__content-wrapper"><!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
			<div class="full-banner__content">
				<h1 class="full-banner__title">Mean Bean Guide</h1>
				<p>Everything you need to take on the Mean Bean Challenge</p>
				<div class="mean-bean-guide"></div>
			</div>
			<!-- CONTENT END -->
		</div>
	</div>
</div>
{}

Mean Bean Guide

Everything you need to take on the Mean Bean Challenge

Cta Bar {% include 'components/mean-bean/cta-bar' %}
#
HTML
<div class="mean-bean">
    <div class="mean-bean-cta clearfix">
        <div class="inner">
            <a href="#" class="mean-bean-cta__button mean-bean-cta__button--green">Mean Bean <span>guide</span></a>
            <a href="#" class="mean-bean-cta__button mean-bean-cta__button--orange">Nutrition <span>Advice</span></a>
            <a href="#" class="mean-bean-cta__button mean-bean-cta__button--red"><span class="top">48 HR</span> <span class="middle">youth</span> <span class="bottom">sign up</span></a>
            <a href="#" class="mean-bean-cta__button mean-bean-cta__button--faq">FAQs</a>

        </div>
    </div>
    <h2 class="pl-header">
        Sign Up Bar
    </h2>
    <div class="mean-bean-sign-section">
        <a class="button button--mean-bean">
            <div class="button--mean-bean__left-white"></div>
            <div class="button--mean-bean__top"></div>
            <div class="button--mean-bean__left"></div>
            Sign Up Today

            <div class="button--mean-bean__bottom-white"></div>
            <div class="button--mean-bean__right"></div>
            <div class="button--mean-bean__bottom"></div>
        </a>
        <a href="#" class="button button--mean-bean button--mean-bean--red">
            <div class="button--mean-bean__left-white"></div>
            <div class="button--mean-bean__top"></div>
            <div class="button--mean-bean__left"></div>
            Remind Me

            <div class="button--mean-bean__bottom-white"></div>
            <div class="button--mean-bean__right"></div>
            <div class="button--mean-bean__bottom"></div>
        </a>
        <h2>
            Mean Beans <span>Fight Hunger.</span>
        </h2>
    </div>
</div>
Twig
<div class="mean-bean">	
	<div class="mean-bean-cta clearfix">
		<div class="inner">
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--green">Mean Bean <span>guide</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--orange">Nutrition <span>Advice</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--red"><span class="top">48 HR</span> <span class="middle">youth</span> <span class="bottom">sign up</span></a>
			<a href="#" class="mean-bean-cta__button mean-bean-cta__button--faq">FAQs</a>
		</div>
	</div>

	<h2 class="pl-header">Sign Up Bar</h2>
	<div class="mean-bean-sign-section">
		<a class="button button--mean-bean">
			<div class="button--mean-bean__left-white"></div>
			<div class="button--mean-bean__top"></div>
			<div class="button--mean-bean__left"></div>
			Sign Up Today
			<div class="button--mean-bean__bottom-white"></div>
			<div class="button--mean-bean__right"></div>
			<div class="button--mean-bean__bottom"></div>
		</a>
		<a href="#" class="button button--mean-bean button--mean-bean--red">
			<div class="button--mean-bean__left-white"></div>
			<div class="button--mean-bean__top"></div>
			<div class="button--mean-bean__left"></div>
			Remind Me
			<div class="button--mean-bean__bottom-white"></div>
			<div class="button--mean-bean__right"></div>
			<div class="button--mean-bean__bottom"></div>
		</a>
		<h2>Mean Beans <span>Fight Hunger.</span></h2>
	</div>	
</div>
{}
Story Quote {% include 'components/mean-bean/story-quote' %}
#
HTML
<div class="inner">
    <div class="mb-matunda-quote">
        <div class="mb-matunda-quote__image large-col-6"></div>
        <div class="mb-matunda-quote__quote large-col-6">"I feel incredibly sad when I don’t have anything to give the children, but I don't know a place where I can get more food" <span>Matunda</span></div>
    </div>
</div>
Twig
<div class="inner">
	<div class="mb-matunda-quote">
	 <div class="mb-matunda-quote__image large-col-6"></div>
	 <div class="mb-matunda-quote__quote large-col-6">"I feel incredibly sad when I don’t have anything to give the children, but I don't know a place where I can get more food"
	 <span>Matunda</span></div>

	</div>
</div>
{}
"I feel incredibly sad when I don’t have anything to give the children, but I don't know a place where I can get more food" Matunda
Nutrition {% include 'components/mean-bean/nutrition' %}
#
HTML
<div class="mean-bean">
    <div class="inner clearfix">
        <div class="large-col-8">
            <div class="grey-section">
                <div class="">
                    <h3 class="mobile-only">
                        What exactly am I allowed to eat during the mean bean challenge?
                    </h3>
                    <div class="mb-eat"></div>
                    <h3 class="desktop-only">
                        What exactly am I allowed to eat during the mean bean challenge?
                    </h3>
                    <div class="mb-eat-plan">
                        <p><strong>For breakfast:</strong> Porridge made with water.</p>
                        <p><strong>For lunch and dinner:</strong> Plain beans with plain race.</p>
                        <p><strong>And to drink?</strong> Just water.</p>
                        <p><strong>Seasonings?</strong> A small amount of salt is allowed, but no black pepper, chilli flakes or Herbes de Province.</p>
                        <p><strong>What about my Piri Piri sauce?</strong> Sauces are a big no-no, I'm afraid. So no baked beans, either.</p>
                        <p><strong>What types of beans are allowed?</strong> Definitely not jelly beans, if that's what you're asking. Just kidney beans, black-eyed beans, butter beans etc. Chickpeas, funnily enough, aren’t peas at all, but are in fact beans. So chickpea to your heart’s content.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-col-4">
            <div class="mean-bean-positioner mean-bean-positioner--calorie">
                <div class="mean-bean-blue-block mean-bean-yellow-block--calorie">
                    <h3>
                        What is the normal recommended calorie intake for Men and Women?
                    </h3>
                    <p>Calories measure how much energy food and drink contain. The amount of energy you need will depend on your age, lifestyle, size, gender and state of health. <strong>The guideline daily amount of calories is 2,000Kcal for women and 2,500Kcal for men.</strong> These are only guidelines, however. In reality there is no such thing as an energy requirement that suits everyone. We all need a certain amount of calories to provide our bodies with the energy they need to keep ticking over.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="grey-section grey-section--dark">
        <div class="inner clearfix">
            <h1>
                More on Calories
            </h1>
            <div class="mb-porridge-intake">
                <div class="mb-porridge-water"></div>
                <h4>
                    What would my calorie intake of 100G* of porridge and water give me?
                </h4>
                <p>
                    Approximately <strong>360Kcal</strong>.
                    <br />
                    *Dry Weight
                </p>
            </div>
            <div class="mb-bean-intake">
                <div class="mean-bean-welcome__plate"></div>
                <h4>
                    WHAT WOULD BE MY CALORIE INTAKE IF I ATE 50G OF PLAIN COOKED RICE AND 100G (DRAINED WEIGHT) OF COOKED KIDNEY BEANS?
                </h4>
                <p>50g of plain, cooked rice is approximately 190Kcal, with 100g of drained kidney beans being approximately 125Kcal. The total calorie intake for one Mean Bean meal would be <strong>315Kcal.</strong></p>
            </div>
        </div>
    </div>
    <div class="inner">
        <h3 class="center-text">
            WHAT MINIMUM DAILY QUANTITIES DO YOU RECOMMEND?
        </h3>
        <div class="clearfix">
            <div class="breakfast-reccomend">
                <div class="mean-bean-yellow-block">
                    <div class="large-col-4">
                        <h4>
                            Breakfast
                        </h4>
                        <p>100g porridge, made with water</p>
                    </div>
                    <div class="large-col-4">
                        <h4>
                            Lunch
                        </h4>
                        <p>50g rice with 100g beans</p>
                    </div>
                    <div class="large-col-4">
                        <h4>
                            Dinner
                        </h4>
                        <p>50g rice with 100g beans</p>
                    </div>
                    <p>NB: Weights referred to are for uncooked rice and drained kidney beans. <strong>This amounts to approximately 990Kcal per day.</strong>
However, as previously highlighted, everyone's body is different, so it's best for everyone to determine themselves what daily quantities they feel they can manage.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="inner">
        <h1 class="center-text nutrient-header">
            What nutrients would I get from <span>just eating porridge, rice and beans?</span>
        </h1>
    </div>
    <div class="grey-section">
        <div class="inner clearfix">
            <div class="large-col-6">
                <div class="nutrients-rice"></div>
            </div>
            <div class="large-col-6 large-col-offset-6">
                <div class="mean-bean-step">
                    <p><strong>FIBRE - </strong>helps to maintain bowel function.</p>
                    <p><strong>B Vitamins - </strong>for example, thiamine which helps the body use energy from the carbohydrates we eat.</p>
                    <p><strong>IRON - </strong>required by red blood cells which transport oxygen around the body.</p>
                    <p><strong>CALCIUM - </strong>to help develop and maintain healthy bones and teeth.</p>
                    <p><strong>FOLATE - </strong>needed for the formation of healthy red blood cells and for the nervous system.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="inner clearfix">
        <div class="large-col-6">
            <div class="nutrients-beans"></div>
        </div>
        <div class="large-col-6 large-col-offset-6">
            <div class="mean-bean-step">
                <p>Beans are high in fibre and naturally lower in fat than animal sources of protein. This good group is a really important part of a healty, balanced diet, as these foods are good sources of protein, and lots of essential vitamins and minerals.</p>
                <p><strong>PROTEIN - </strong>for growth and maintanence of normal muscles and maintanance of healthy bones.</p>
                <p>One 80g portion of beans will count as one of your five a day.</p>
                <p>
                    <strong>However, if you eat any more than this in one day, it will still only count as one of your five a day - no matter how much you eat. This because although pulses contain fibre, they don't contain the same combinations of vitamins, minerals and other nutrients as fruit and vegetables.</strong>

                </div>
            </div>
        </div>
        <div class="grey-section">
            <div class="inner clearfix">
                <div class="large-col-6">
                    <div class="nutrients-oats"></div>
                </div>
                <div class="large-col-6 large-col-offset-6">
                    <div class="mean-bean-step">
                        <p><strong>THIAMINE - </strong>aids normal energy-yielding metabolism, growth, development, function of cells and the heart.</p>
                        <p><strong>FOLATE - </strong>contributes to normal blood formation, immune system, and protein and glycogen metabolism. Deficiency results in anaemia.</p>
                        <p><strong>IRON - </strong>contributes to normal red blood cell formation, cognitive function, oxygen transport in the body and function of the immune system.</p>
                        <p><strong>MAGNESIUM - </strong>helps with normal muscle function, electrolyte balance and maintanance of normal bones and teeth.</p>
                        <p><strong>ZINC - </strong>contributes to normal fertility and reporudction, cognitive function, wound healing and protein synthesis.</p>
                        <p><strong>DIETARY FIBRE - </strong>can reduce risk of heart disease, diabetes, some cancers and help weight control. It is also important for digestive health.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="inner clearfix">
            <div class="large-col-6">
                <div class="nutrients-water"></div>
            </div>
            <div class="large-col-6 large-col-offset-6">
                <div class="mean-bean-step">
                    <p>Water is essential for our bodies to work properly, for example, for regulating body temperature, transporting nutrients around the body and for normal brain function.</p>
                    <p>Drinking plenty of water relieves fatigue, improves mood, treats headaches and migraines, helps digestion and flushes out toxins.</p>
                </div>
            </div>
        </div>
        <div class="red-section clearfix">
            <div class="inner">
                <div class="large-col-6">
                    <h3>
                        What nourishment would I miss out on by just eating rice, beans and porridge?
                    </h3>
                    <p>Beans and rice are a staple diet in many countries around the world, making a complete protein when eaten together – one that contains all of the essential amino acids. While beans and rice, individually, are low in certain types of essential amino acids, each offers what the other lacks. However, eating beans and rice alone can lead to nutritional deficiencies in the long term.</p>
                </div>
                <div class="large-col-6">
                    <div class="mean-bean-positioner">
                        <div class="mean-bean-yellow-block--miss-out clearfix">
                            <div class="mb-miss-out"></div>
                            <div class="mb-miss-out-text">
                                <h4>
                                    YOU WILL MISS OUT ON:
                                </h4>
                                <ul>
                                    <li>Vitamins and minerals found in fruit and vegetables</li>
                                    <li>A variety of protein found in fish, meat and diary</li>
                                    <li>Some fat, which is essential in a healthy balanced diet</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="inner">
            <div class="clearfix mb-health-section">
                <div class="large-col-8 mb-symptoms">
                    <div class="mean-bean-yellow-block">
                        <div class="mb-flatulent-bean"></div>
                        <h3>
                            HOW WILL I EXPECT TO FEEL EATING THESE THREE THINGS FOR FIVE DAYS?
                        </h3>
                        <p><strong>Some side effects may occur and can include:</strong></p>
                        <ul>
                            <li>Hunger!</li>
                            <li>Dry mouth</li>
                            <li>Constipation or diarrhoea</li>
                            <li>Headaches (mainly due to caffeine and sugar withdrawals)</li>
                            <li>Dizziness</li>
                            <li>Flatulence (just blame it on the cat/dog/children)</li>
                        </ul>
                    </div>
                </div>
                <div class="large-col-4 mb-unwell">
                    <div class="mean-bean-yellow-block">
                        <div class="mean-bean-welcome__nutrition mean-bean-welcome__nutrition--unwell"></div>
                        <h3>
                            What should I do if I feel unwell?
                        </h3>
                        <p>Before starting a diet it is <strong>strongly advisable that you contact your GP</strong>, particularly if you are suffering from ill health or have a medical condition. If you feel unwell, stop doing the challenge.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="grey-section">
            <div class="inner">
                <h2 class="mb-heading-blue">
                    Case Study Headline
                </h2>
                <div class="nutrition-matunda"></div>
                <p>One meal a day of cassava leaves and yams would provide the necessary nutrients for anyone to function normally. The long-term effect of an unvaried diet, without fresh fruit and vegetables, would be to develop chronic malnutrition, with physical and menatal stunting as a consequence.</p>
                <p>Cassava leaves may be dangerour if consumed raw, in large amounts or when prepared incorrectly. This is because raw cassava contains poisonous chemicals which, when consumed frequently, are associated with paralysis and organ damage, and can be fatal.</p>
                <p>
                    This is the diet that poverty has forced Matunda and her community to eat. 
                    <br />
                    <strong>We won't stand idly by and let this happen. We won't stop until poverty stops.</strong>

                </div>
            </div>
        </div>
    </div>
Twig
<div class="mean-bean">
	<div class="inner clearfix">
		<div class="large-col-8">
			<div class="grey-section">
				<div class="">
					<h3 class="mobile-only">What exactly am I allowed to eat during the mean bean challenge?</h3>
					<div class="mb-eat"></div>
					<h3 class="desktop-only">What exactly am I allowed to eat during the mean bean challenge?</h3>
					<div class="mb-eat-plan">
						<p><strong>For breakfast:</strong> Porridge made with water.</p>
						<p><strong>For lunch and dinner:</strong> Plain beans with plain race.</p>
						<p><strong>And to drink?</strong> Just water.</p>
						<p><strong>Seasonings?</strong> A small amount of salt is allowed, but no black pepper, chilli flakes or Herbes de Province.</p>
						<p><strong>What about my Piri Piri sauce?</strong> Sauces are a big no-no, I'm afraid. So no baked beans, either.</p>
						<p><strong>What types of beans are allowed?</strong> Definitely not jelly beans, if that's what you're asking. Just kidney beans, black-eyed beans, butter beans etc. Chickpeas, funnily enough, aren’t peas at all, but are in fact beans. So chickpea to your heart’s content.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="large-col-4">
			<div class="mean-bean-positioner mean-bean-positioner--calorie">
				<div class="mean-bean-blue-block mean-bean-yellow-block--calorie">
					<h3>What is the normal recommended calorie intake for Men and Women?</h3>
					<p>Calories measure how much energy food and drink contain. The amount of energy you need will depend on your age, lifestyle, size, gender and state of health. <strong>The guideline daily amount of calories is 2,000Kcal for women and 2,500Kcal for men.</strong> These are only guidelines, however. In reality there is no such thing as an energy requirement that suits everyone. We all need a certain amount of calories to provide our bodies with the energy they need to keep ticking over.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="grey-section grey-section--dark">
		<div class="inner clearfix">
			<h1>More on Calories</h1>
			<div class="mb-porridge-intake">
				<div class="mb-porridge-water"></div>
				<h4>What would my calorie intake of 100G* of porridge and water give me?</h4>
				<p>Approximately <strong>360Kcal</strong>.<br />
				*Dry Weight</p>
			</div>

			<div class="mb-bean-intake">
				<div class="mean-bean-welcome__plate"></div>
				<h4>WHAT WOULD BE MY CALORIE INTAKE IF I ATE 50G OF PLAIN COOKED RICE AND 100G (DRAINED WEIGHT) OF COOKED KIDNEY BEANS?</h4>
				<p>50g of plain, cooked rice is approximately 190Kcal, with 100g of drained kidney beans being approximately 125Kcal. The total calorie intake for one Mean Bean meal would be <strong>315Kcal.</strong></p>
			</div>
		</div>
	</div>
	<div class="inner">
		<h3 class="center-text">WHAT MINIMUM DAILY QUANTITIES DO YOU RECOMMEND?</h3>
		<div class="clearfix">
			<div class="breakfast-reccomend">
				<div class="mean-bean-yellow-block">
					<div class="large-col-4">
						<h4>Breakfast</h4>
						<p>100g porridge, made with water</p>
					</div>

					<div class="large-col-4">
						<h4>Lunch</h4>
						<p>50g rice with 100g beans</p>
					</div>

					<div class="large-col-4">
						<h4>Dinner</h4>
						<p>50g rice with 100g beans</p>
					</div>

					<p>NB: Weights referred to are for uncooked rice and drained kidney beans. <strong>This amounts to approximately 990Kcal per day.</strong>
					However, as previously highlighted, everyone's body is different, so it's best for everyone to determine themselves what daily quantities they feel they can manage.</p>

				</div>
			</div>
		</div>
	</div>

		<div class="inner">
			<h1 class="center-text nutrient-header">What nutrients would I get from <span>just eating porridge, rice and beans?</span></h1>
		</div>
		<div class="grey-section">
			<div class="inner clearfix">
				<div class="large-col-6">
					<div class="nutrients-rice"></div>
				</div>
				<div class="large-col-6 large-col-offset-6">
					<div class="mean-bean-step">
						<p><strong>FIBRE - </strong>helps to maintain bowel function.</p>
						<p><strong>B Vitamins - </strong>for example, thiamine which helps the body use energy from the carbohydrates we eat.</p>
						<p><strong>IRON - </strong>required by red blood cells which transport oxygen around the body.</p>
						<p><strong>CALCIUM - </strong>to help develop and maintain healthy bones and teeth.</p>
						<p><strong>FOLATE - </strong>needed for the formation of healthy red blood cells and for the nervous system.</p>
					</div>
				</div>
			</div>
		</div>
			<div class="inner clearfix">
				<div class="large-col-6">
					<div class="nutrients-beans"></div>
				</div>
				<div class="large-col-6 large-col-offset-6">
					<div class="mean-bean-step">
						<p>Beans are high in fibre and naturally lower in fat than animal sources of protein. This good group is a really important part of a healty, balanced diet, as these foods are good sources of protein, and lots of essential vitamins and minerals.</p>
						<p><strong>PROTEIN - </strong>for growth and maintanence of normal muscles and maintanance of healthy bones.</p>
						<p>One 80g portion of beans will count as one of your five a day.</p>
						<p><strong>However, if you eat any more than this in one day, it will still only count as one of your five a day - no matter how much you eat. This because although pulses contain fibre, they don't contain the same combinations of vitamins, minerals and other nutrients as fruit and vegetables.</strong>
					</div>
				</div>
			</div>
		<div class="grey-section">
			<div class="inner clearfix">
				<div class="large-col-6">
					<div class="nutrients-oats"></div>
				</div>
				<div class="large-col-6 large-col-offset-6">
					<div class="mean-bean-step">
						<p><strong>THIAMINE - </strong>aids normal energy-yielding metabolism, growth, development, function of cells and the heart.</p>
						<p><strong>FOLATE - </strong>contributes to normal blood formation, immune system, and protein and glycogen metabolism. Deficiency results in anaemia.</p>
						<p><strong>IRON - </strong>contributes to normal red blood cell formation, cognitive function, oxygen transport in the body and function of the immune system.</p>
						<p><strong>MAGNESIUM - </strong>helps with normal muscle function, electrolyte balance and maintanance of normal bones and teeth.</p>
						<p><strong>ZINC - </strong>contributes to normal fertility and reporudction, cognitive function, wound healing and protein synthesis.</p>
						<p><strong>DIETARY FIBRE - </strong>can reduce risk of heart disease, diabetes, some cancers and help weight control. It is also important for digestive health.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="inner clearfix">
			<div class="large-col-6">
				<div class="nutrients-water"></div>
			</div>
			<div class="large-col-6 large-col-offset-6">
				<div class="mean-bean-step">
					<p>Water is essential for our bodies to work properly, for example, for regulating body temperature, transporting nutrients around the body and for normal brain function.</p>
					<p>Drinking plenty of water relieves fatigue, improves mood, treats headaches and migraines, helps digestion and flushes out toxins.</p>
				</div>
			</div>
		</div>
		<div class="red-section clearfix">
			<div class="inner">
				<div class="large-col-6">
					<h3>What nourishment would I miss out on by just eating rice, beans and porridge?</h3>
					<p>Beans and rice are a staple diet in many countries around the world, making a complete protein when eaten together – one that contains all of the essential amino acids. While beans and rice, individually, are low in certain types of essential amino acids, each offers what the other lacks. However, eating beans and rice alone can lead to nutritional deficiencies in the long term.</p>
				</div>

				<div class="large-col-6">
					<div class="mean-bean-positioner">
						<div class="mean-bean-yellow-block--miss-out clearfix">
							<div class="mb-miss-out"></div>
							<div class="mb-miss-out-text">
								<h4>YOU WILL MISS OUT ON:</h4>
								<ul>
									<li>Vitamins and minerals found in fruit and vegetables</li>
									<li>A variety of protein found in fish, meat and diary</li>
									<li>Some fat, which is essential in a healthy balanced diet</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="inner">
			<div class="clearfix mb-health-section">
				<div class="large-col-8 mb-symptoms">
					<div class="mean-bean-yellow-block">
						<div class="mb-flatulent-bean"></div>
						<h3>HOW WILL I EXPECT TO FEEL EATING THESE THREE THINGS FOR FIVE DAYS?</h3>
						<p><strong>Some side effects may occur and can include:</strong></p>
						<ul>
							<li>Hunger!</li>
							<li>Dry mouth</li>
							<li>Constipation or diarrhoea</li>
							<li>Headaches (mainly due to caffeine and sugar withdrawals)</li>
							<li>Dizziness</li>
							<li>Flatulence (just blame it on the cat/dog/children)</li>
						</ul>
					</div>
				</div>

				<div class="large-col-4 mb-unwell">
					<div class="mean-bean-yellow-block">
						<div class="mean-bean-welcome__nutrition mean-bean-welcome__nutrition--unwell"></div>
						<h3>What should I do if I feel unwell?</h3>
						<p>Before starting a diet it is <strong>strongly advisable that you contact your GP</strong>, particularly if you are suffering from ill health or have a medical condition. If you feel unwell, stop doing the challenge.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grey-section">
			<div class="inner">
				<h2 class="mb-heading-blue">Case Study Headline</h2>
				<div class="nutrition-matunda"></div>
				<p>One meal a day of cassava leaves and yams would provide the necessary nutrients for anyone to function normally. The long-term effect of an unvaried diet, without fresh fruit and vegetables, would be to develop chronic malnutrition, with physical and menatal stunting as a consequence.</p>
				<p>Cassava leaves may be dangerour if consumed raw, in large amounts or when prepared incorrectly. This is because raw cassava contains poisonous chemicals which, when consumed frequently, are associated with paralysis and organ damage, and can be fatal.</p>
				<p>This is the diet that poverty has forced Matunda and her community to eat. <br />
				<strong>We won't stand idly by and let this happen. We won't stop until poverty stops.</strong>
			</div>
		</div>
	</div>
</div>
{}

What exactly am I allowed to eat during the mean bean challenge?

What exactly am I allowed to eat during the mean bean challenge?

For breakfast: Porridge made with water.

For lunch and dinner: Plain beans with plain race.

And to drink? Just water.

Seasonings? A small amount of salt is allowed, but no black pepper, chilli flakes or Herbes de Province.

What about my Piri Piri sauce? Sauces are a big no-no, I'm afraid. So no baked beans, either.

What types of beans are allowed? Definitely not jelly beans, if that's what you're asking. Just kidney beans, black-eyed beans, butter beans etc. Chickpeas, funnily enough, aren’t peas at all, but are in fact beans. So chickpea to your heart’s content.

What is the normal recommended calorie intake for Men and Women?

Calories measure how much energy food and drink contain. The amount of energy you need will depend on your age, lifestyle, size, gender and state of health. The guideline daily amount of calories is 2,000Kcal for women and 2,500Kcal for men. These are only guidelines, however. In reality there is no such thing as an energy requirement that suits everyone. We all need a certain amount of calories to provide our bodies with the energy they need to keep ticking over.

More on Calories

What would my calorie intake of 100G* of porridge and water give me?

Approximately 360Kcal.
*Dry Weight

WHAT WOULD BE MY CALORIE INTAKE IF I ATE 50G OF PLAIN COOKED RICE AND 100G (DRAINED WEIGHT) OF COOKED KIDNEY BEANS?

50g of plain, cooked rice is approximately 190Kcal, with 100g of drained kidney beans being approximately 125Kcal. The total calorie intake for one Mean Bean meal would be 315Kcal.

WHAT MINIMUM DAILY QUANTITIES DO YOU RECOMMEND?

Breakfast

100g porridge, made with water

Lunch

50g rice with 100g beans

Dinner

50g rice with 100g beans

NB: Weights referred to are for uncooked rice and drained kidney beans. This amounts to approximately 990Kcal per day. However, as previously highlighted, everyone's body is different, so it's best for everyone to determine themselves what daily quantities they feel they can manage.

What nutrients would I get from just eating porridge, rice and beans?

FIBRE - helps to maintain bowel function.

B Vitamins - for example, thiamine which helps the body use energy from the carbohydrates we eat.

IRON - required by red blood cells which transport oxygen around the body.

CALCIUM - to help develop and maintain healthy bones and teeth.

FOLATE - needed for the formation of healthy red blood cells and for the nervous system.

Beans are high in fibre and naturally lower in fat than animal sources of protein. This good group is a really important part of a healty, balanced diet, as these foods are good sources of protein, and lots of essential vitamins and minerals.

PROTEIN - for growth and maintanence of normal muscles and maintanance of healthy bones.

One 80g portion of beans will count as one of your five a day.

However, if you eat any more than this in one day, it will still only count as one of your five a day - no matter how much you eat. This because although pulses contain fibre, they don't contain the same combinations of vitamins, minerals and other nutrients as fruit and vegetables.

THIAMINE - aids normal energy-yielding metabolism, growth, development, function of cells and the heart.

FOLATE - contributes to normal blood formation, immune system, and protein and glycogen metabolism. Deficiency results in anaemia.

IRON - contributes to normal red blood cell formation, cognitive function, oxygen transport in the body and function of the immune system.

MAGNESIUM - helps with normal muscle function, electrolyte balance and maintanance of normal bones and teeth.

ZINC - contributes to normal fertility and reporudction, cognitive function, wound healing and protein synthesis.

DIETARY FIBRE - can reduce risk of heart disease, diabetes, some cancers and help weight control. It is also important for digestive health.

Water is essential for our bodies to work properly, for example, for regulating body temperature, transporting nutrients around the body and for normal brain function.

Drinking plenty of water relieves fatigue, improves mood, treats headaches and migraines, helps digestion and flushes out toxins.

What nourishment would I miss out on by just eating rice, beans and porridge?

Beans and rice are a staple diet in many countries around the world, making a complete protein when eaten together – one that contains all of the essential amino acids. While beans and rice, individually, are low in certain types of essential amino acids, each offers what the other lacks. However, eating beans and rice alone can lead to nutritional deficiencies in the long term.

YOU WILL MISS OUT ON:

  • Vitamins and minerals found in fruit and vegetables
  • A variety of protein found in fish, meat and diary
  • Some fat, which is essential in a healthy balanced diet

HOW WILL I EXPECT TO FEEL EATING THESE THREE THINGS FOR FIVE DAYS?

Some side effects may occur and can include:

  • Hunger!
  • Dry mouth
  • Constipation or diarrhoea
  • Headaches (mainly due to caffeine and sugar withdrawals)
  • Dizziness
  • Flatulence (just blame it on the cat/dog/children)

What should I do if I feel unwell?

Before starting a diet it is strongly advisable that you contact your GP, particularly if you are suffering from ill health or have a medical condition. If you feel unwell, stop doing the challenge.

Case Study Headline

One meal a day of cassava leaves and yams would provide the necessary nutrients for anyone to function normally. The long-term effect of an unvaried diet, without fresh fruit and vegetables, would be to develop chronic malnutrition, with physical and menatal stunting as a consequence.

Cassava leaves may be dangerour if consumed raw, in large amounts or when prepared incorrectly. This is because raw cassava contains poisonous chemicals which, when consumed frequently, are associated with paralysis and organ damage, and can be fatal.

This is the diet that poverty has forced Matunda and her community to eat.
We won't stand idly by and let this happen. We won't stop until poverty stops.

Yellow Bar {% include 'components/mean-bean/yellow-bar' %}
#
HTML
<div class="mean-bean mean-bean-yellow-strip clearfix">
    <div class="inner">
        <div class="large-col-7">
            <h2>
                How your fundraiser will help
            </h2>
            <p><strong>£360 could enable 5 people like Birungi to learn a new skill restoring hope, value and potential.</strong></p>
            <div class="mean-bean-button">
                <a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
                    <div class="button-bottom"></div>
                    <div class="button-top">Sign Up Today</div>
                </a>
            </div>
        </div>
        <div class="large-col-4 column-lift">
            <picture>
                <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Desktop.png, /images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Desktop_@2x.png 2x">
                    <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Mobile.png, /images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Mobile_@2x.png 2x">
                        <img src="/images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Mobile.png" alt="Mean Bean Challenge">
                    </picture>
                </div>
            </div>
        </div>
Twig
<div class="mean-bean mean-bean-yellow-strip clearfix">

	<div class="inner">

		<div class="large-col-7">
			<h2>How your fundraiser will help</h2>
			<p><strong>£360 could enable 5 people like Birungi to learn a new skill restoring hope, value and potential.</strong></p>
			<div class="mean-bean-button">
				<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
					
					<div class="button-bottom"></div>
					<div class="button-top">Sign Up Today</div>
					
				</a>
			</div>
		</div>

		<div class="large-col-4 column-lift">
			<picture>
				  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Desktop.png, /images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Desktop_@2x.png 2x">
				  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Mobile.png, /images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Mobile_@2x.png 2x">
				  <img src="/images/mainsite5/mean-bean/2019/CaseStudy_Bean_Holding_Photograph_Mobile.png" alt="Mean Bean Challenge">
			</picture> 
		</div>

	</div>

</div>
{}

How your fundraiser will help

£360 could enable 5 people like Birungi to learn a new skill restoring hope, value and potential.

Mean Bean Challenge
Footer {% include 'components/mean-bean/footer' %}
#
HTML
<div class="mean-bean">
    <div class="mean-bean-sign-section">
        <div class="inner clearfix">
            <div class="mobile-only">
                <h2>
                    Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span>
                </h2>
            </div>
            <picture>
                <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
                    <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
                        <img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
                    </picture>
                    <div class="desktop-only">
                        <h2>
                            Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span>
                        </h2>
                    </div>
                    <div class="large-col-6">
                        <div>
                            <a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
                                <div class="button-bottom"></div>
                                <div class="button-top">Sign Up Today</div>
                            </a>
                        </div>
                    </div>
                    <div class="large-col-6">
                        <div>
                            <a href="javascript:void(0);" data-lightbox="1" class="show-lightbox button button--mean-bean button--mean-bean-red">
                                <div class="button-bottom"></div>
                                <div class="button-top">Invite a friend</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lightbox lightbox--large mean-bean" data-lightbox="1">
            <picture class="desktop-only">
                <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
                    <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
                </picture>
                <h1>
                    Invite a friend 
                </h1>
                <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
                <div class="share-container">
                    <a href="mailto:?&subject=Mean Bean&body=Copy" class="share-button share-button--email">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/email.svg" />
                            <div class="share-button__text"> Email</div>
                        </div>
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//tearfund.org/meanbean" class="share-button share-button--facebook">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/facebook.svg" />
                            <div class="share-button__text"> Facebook</div>
                        </div>
                    </a>
                    <a href="http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3
" class="share-button share-button--twitter">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/twitter.svg" />
                            <div class="share-button__text"> Twitter</div>
                        </div>
                    </a>
                    <a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="" class="share-button share-button--whatsapp mobile-only">
                        <div class="share-button__content">
                            <img src="/images/mainsite5/svg/social/whatsapp.svg" />
                            <div class="share-button__text"> Whatsapp</div>
                        </div>
                    </a>
                </div>
                <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
            </div>
Twig
<div class="mean-bean">	
	<div class="mean-bean-sign-section">
		<div class="inner clearfix">

			<div class="mobile-only">
				<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
			</div>
			
			<picture>
			  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
			  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
			  <img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
			</picture> 

			<div class="desktop-only">
				<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
			</div>

				<div class="large-col-6">
					<div>
						<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
							
							<div class="button-bottom"></div>
							<div class="button-top">Sign Up Today</div>
							
						</a>
					</div>
				</div>


				<div class="large-col-6">
					<div>
						<a href="javascript:void(0);" data-lightbox="1" class="show-lightbox button button--mean-bean button--mean-bean-red">
							
							<div class="button-bottom"></div>
							<div class="button-top">Invite a friend</div>
							
						</a>
					</div>
				</div>

		</div>
	</div>
</div>

<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
    <picture class="desktop-only">
        <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
            <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
        </picture>
        <h1>
            Invite a friend
        </h1>
        <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
        <div class="share-container">
       		<a href="mailto:?&subject=Mean Bean&body=Copy" class="share-button share-button--email">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/email.svg" />
	                <div class="share-button__text"> Email</div>
	            </div>
	        </a>
	        <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//tearfund.org/meanbean" class="share-button share-button--facebook">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/facebook.svg" />
	                <div class="share-button__text"> Facebook</div>
	            </div>
	        </a>
	         <a href="http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3
	" class="share-button share-button--twitter">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/twitter.svg" />
	                <div class="share-button__text"> Twitter</div>
	            </div>
	        </a>
	        <a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="" class="share-button share-button--whatsapp mobile-only">
	            <div class="share-button__content">
	                <img src="/images/mainsite5/svg/social/whatsapp.svg" />
	                <div class="share-button__text"> Whatsapp</div>
	            </div>
	        </a>
	    </div>
        <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
    </div>
{}

Eat Beans Fight Hunger.

Mean Bean Challenge

Eat Beans Fight Hunger.

Uk Aid {% include 'components/mean-bean/uk-aid' %}
#
HTML
<div class="mean-bean mean-bean-uk-aid clearfix">
    <div class="inner">
        <div class="large-col-4">
            <picture class="desktop-only">
                <source media="(min-width: 650px)" srcset="AidMatch_DFID_Blue_Bean_Desktop.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Desktop_@2x.png 2x">
                    <source media="(min-width: 100px)" srcset="AidMatch_DFID_Blue_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile_@2x.png 2x">
                        <img src="/images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
                    </picture>
                </div>
                <div class="large-col-8">
                    <h2>
                        Double <span>your money raised</span>
                    </h2>
                    <p>Every pound you give to Tearfund’s matched giving appeal from Xst Xxxxxxxx 2019 to XXst Xxxxxxxx 2019, will be doubled by the UK government up to a total of £2,000,000.</p>
                    <picture class="mobile-only">
                        <source media="(min-width: 650px)" srcset="AidMatch_DFID_Blue_Bean_Desktop.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Desktop_@2x.png 2x">
                            <source media="(min-width: 100px)" srcset="AidMatch_DFID_Blue_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile_@2x.png 2x">
                                <img src="/images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
                            </picture>
                        </div>
                    </div>
                </div>
Twig
<div class="mean-bean mean-bean-uk-aid clearfix">
	<div class="inner">

		<div class="large-col-4">
			<picture class="desktop-only">
			  <source media="(min-width: 650px)" srcset="AidMatch_DFID_Blue_Bean_Desktop.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Desktop_@2x.png 2x">
			  <source media="(min-width: 100px)" srcset="AidMatch_DFID_Blue_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile_@2x.png 2x">
			  <img src="/images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
			</picture> 
		</div>

		<div class="large-col-8">
			<h2>Double <span>your money raised</span></h2>
			<p>Every pound you give to Tearfund’s matched giving appeal from Xst Xxxxxxxx 2019 to XXst Xxxxxxxx 2019, will be doubled by the UK government up to a total of £2,000,000.</p>

			<picture class="mobile-only">
			  <source media="(min-width: 650px)" srcset="AidMatch_DFID_Blue_Bean_Desktop.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Desktop_@2x.png 2x">
			  <source media="(min-width: 100px)" srcset="AidMatch_DFID_Blue_Bean_Mobile.png, /images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile_@2x.png 2x">
			  <img src="/images/mainsite5/mean-bean/2019/AidMatch_DFID_Blue_Bean_Mobile.png" class="mean-bean-ukaid-image" alt="Mean Bean Challenge">
			</picture> 
		</div>

	</div>
</div>
{}
Mean Bean Challenge

Double your money raised

Every pound you give to Tearfund’s matched giving appeal from Xst Xxxxxxxx 2019 to XXst Xxxxxxxx 2019, will be doubled by the UK government up to a total of £2,000,000.

Mean Bean Challenge
Share Lightbox {% include 'components/mean-bean/share-lightbox' %}
#
HTML
<a href="#" class="button show-lightbox" data-lightbox="1">Share lightbox</a> 
<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
    <picture class="desktop-only">
        <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
            <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
        </picture>
        <h1>
            Invite a friend
        </h1>
        <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
        <div class="share-container">
            <a href="#" class="share-button share-button--whatsapp">
                <div class="share-button__content">
                    <img src="/images/mainsite5/svg/social/twitter.svg" />
                    <div class="share-button__text"> Whatsapp</div>
                </div>
            </a>
            <a href="#" class="share-button share-button--email">
                <div class="share-button__content">
                    <img src="/images/mainsite5/svg/social/email.svg" />
                    <div class="share-button__text"> Email</div>
                </div>
            </a>
            <a href="#" class="share-button share-button--facebook">
                <div class="share-button__content">
                    <img src="/images/mainsite5/svg/social/facebook.svg" />
                    <div class="share-button__text"> Facebook</div>
                </div>
            </a>
        </div>
        <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
    </div>
Twig
<a href="#" class="button show-lightbox" data-lightbox="1">Share lightbox</a> 
<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
	<picture class="desktop-only">
    	<source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
        <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
    </picture>
    <h1>Invite a friend</h1>
    <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
    <div class="share-container">
	    <a href="#" class="share-button share-button--whatsapp">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/twitter.svg" /> <div class="share-button__text"> Whatsapp</div>
			</div>
		</a>
		<a href="#" class="share-button share-button--email">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/email.svg" /> <div class="share-button__text"> Email</div>
			</div>
		</a>
		<a href="#" class="share-button share-button--facebook">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/facebook.svg" /> <div class="share-button__text"> Facebook</div>
			</div>
		</a>
	</div>
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>
{}
Share lightbox
Header {% include 'components/mean-bean/header' %}
#
HTML
<div class="full-banner full-banner--mean-bean full-banner--mean-bean-landing full-banner--image full-banner--featured flexbox flexboxlegacy enhanced" data-image="/images/mainsite5/mean-bean/background.jpg">
    <div class="full-banner__image" style="background-image: url(&quot;/images/mainsite5/mean-bean/background.jpg&quot;); background-repeat: no-repeat;"></div>
    <div class="inner">
        <div class="full-banner--featured-panel">
            <div class="full-banner__content-wrapper">
                <!-- RESPONSIVE CONTAINER -->
                <!-- CONTENT START -->
                <div class="full-banner__content">
                    <div class="large-col-6">
                        <picture>
                            <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop@2x.gif 2x">
                                <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Mobilev2.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Mobilev2@2x.gif 2x">
                                    <img src="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif" alt="Mean Bean Challenge">
                                </picture>
                            </div>
                            <div class="large-col-6">
                                <picture class="desktop-show">
                                    <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBeanChallenge_Logo_Desktop.png, /images/mainsite5/mean-bean/2019/MeanBeanChallenge_Logo_Desktop_@2x.png 2x">
                                        <img class="banner-mean-bean-logo" src="/images/mainsite5/mean-bean/2019/Landing_Page_Header_Mobile.png, /images/mainsite5/mean-bean/2019/Landing_Page_Header_Mobile_@2x.png 2x" alt="Mean Bean Challenge">
                                    </picture>
                                    <p>Eat nothing but rice and beans 
for five days, get sponsored and 
help end hunger.</p>
                                    <div class="large-col-6">
                                        <div>
                                            <a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
                                                <div class="button-bottom"></div>
                                                <div class="button-top">Sign Up Today</div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="large-col-6">
                                        <div>
                                            <a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
                                                <div class="button-bottom"></div>
                                                <div class="button-top">Invite a friend</div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- CONTENT END -->
                        </div>
                    </div>
                </div>
            </div>
Twig
<div class="full-banner full-banner--mean-bean full-banner--mean-bean-landing full-banner--image full-banner--featured flexbox flexboxlegacy enhanced" data-image="/images/mainsite5/mean-bean/background.jpg"><div class="full-banner__image" style="background-image: url(&quot;/images/mainsite5/mean-bean/background.jpg&quot;); background-repeat: no-repeat;"></div>
	<div class="inner">
		<div class="full-banner--featured-panel">
			<div class="full-banner__content-wrapper">
			<!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
				<div class="full-banner__content">
					<div class="large-col-6">
						<picture>
						  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop@2x.gif 2x">
						  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Mobilev2.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Mobilev2@2x.gif 2x">
						  <img src="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif" alt="Mean Bean Challenge">
						</picture> 
					</div>
					<div class="large-col-6">
						<picture class="desktop-show">
							  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBeanChallenge_Logo_Desktop.png, /images/mainsite5/mean-bean/2019/MeanBeanChallenge_Logo_Desktop_@2x.png 2x">
							  <img class="banner-mean-bean-logo" src="/images/mainsite5/mean-bean/2019/Landing_Page_Header_Mobile.png, /images/mainsite5/mean-bean/2019/Landing_Page_Header_Mobile_@2x.png 2x" alt="Mean Bean Challenge">
						</picture> 
						<p>Eat nothing but rice and beans 
for five days, get sponsored and 
help end hunger.</p>
						<div class="large-col-6">
							<div>
								<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
									
									<div class="button-bottom"></div>
									<div class="button-top">Sign Up Today</div>
									
								</a>
							</div>
						</div>


						<div class="large-col-6">
							<div>
								<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
									
									<div class="button-bottom"></div>
									<div class="button-top">Invite a friend</div>
									
								</a>
							</div>
						</div>
					</div>
				</div>
				<!-- CONTENT END -->
			</div>
		</div>
	</div>
</div>
{}
Stats {% include 'components/mean-bean/stats' %}
#
HTML
<div class="mean-bean">
    <div class="mean-bean-cta mean-bean-cta--two clearfix">
        <div class="inner">
            <div class="clearfix">
                <div class="mean-bean-raised large-col-6">
                    <div class="mean-bean-signup__image">
                        <picture>
                            <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Stats_Total_Participants.png, /images/mainsite5/mean-bean/2019/Stats_Total_Participants_@2x.png 2x">
                                <img src="/images/mainsite5/mean-bean/2019/Stats_Total_Participants.png" alt="Mean Bean Challenge">
                            </picture>
                        </div>
                        <div class="mean-bean-signup__total">
Mean beaners so far: </div>
                    </div>
                    <div class="mean-bean-raised large-col-6">
                        <div class="mean-bean-raised__image">
                            <img src="/images/mainsite5/mean-bean/bean-jar.gif" />
                        </div>
                        <div class="mean-bean-raised__total">
Money raised so far: </div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="large-col-12">
                        <div class="mean-bean-leaderboard">
                            <h2>
                                Meanest Bean
                            </h2>
                            <!-- <div class="mean-bean-leaderboard__holder"></div>
                        --> 
                        <div class="mean-bean-leaderboard__holder">
                            <div class="mean-bean-leaderboard__entry">
                                <div class="mean_bean__ranking">1</div>
                                <div class="mean-bean__name">Mark</div>
                                <div class="mean-bean__raised">£1,997.25</div>
                            </div>
                            <div class="mean-bean-leaderboard__entry">
                                <div class="mean_bean__ranking">2</div>
                                <div class="mean-bean__name">Hollie</div>
                                <div class="mean-bean__raised">£1,366.62</div>
                            </div>
                            <div class="mean-bean-leaderboard__entry">
                                <div class="mean_bean__ranking">3</div>
                                <div class="mean-bean__name">Fiona</div>
                                <div class="mean-bean__raised">£1,320.00</div>
                            </div>
                            <div class="mean-bean-leaderboard__entry">
                                <div class="mean_bean__ranking">4</div>
                                <div class="mean-bean__name">Fiona</div>
                                <div class="mean-bean__raised">£1,320.00</div>
                            </div>
                            <div class="mean-bean-leaderboard__entry">
                                <div class="mean_bean__ranking">5</div>
                                <div class="mean-bean__name">Fiona</div>
                                <div class="mean-bean__raised">£1,320.00</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="mean-bean">	
	<div class="mean-bean-cta mean-bean-cta--two clearfix">
		<div class="inner">
			<div class="clearfix">
				<div class="mean-bean-raised large-col-6">
					<div class="mean-bean-signup__image">
						<picture>
						  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Stats_Total_Participants.png, /images/mainsite5/mean-bean/2019/Stats_Total_Participants_@2x.png 2x">
						  <img src="/images/mainsite5/mean-bean/2019/Stats_Total_Participants.png" alt="Mean Bean Challenge">
						</picture> 

					</div>
					<div class="mean-bean-signup__total">
						Mean beaners so far:

					</div>
				</div>
				<div class="mean-bean-raised large-col-6">
					<div class="mean-bean-raised__image">
						<img src="/images/mainsite5/mean-bean/bean-jar.gif" />
					</div>
					<div class="mean-bean-raised__total">
						Money raised so far:

					</div>
				</div>
			</div>
			<div class="clearfix">
				<div class="large-col-12">
					<div class="mean-bean-leaderboard">
						<h2>Meanest Bean</h2>
						<!-- <div class="mean-bean-leaderboard__holder"></div> -->

						<div class="mean-bean-leaderboard__holder">
							<div class="mean-bean-leaderboard__entry">
								<div class="mean_bean__ranking">1</div>
								<div class="mean-bean__name">Mark</div>
								<div class="mean-bean__raised">£1,997.25</div>
							</div>
							<div class="mean-bean-leaderboard__entry">
								<div class="mean_bean__ranking">2</div>
								<div class="mean-bean__name">Hollie</div>
								<div class="mean-bean__raised">£1,366.62</div>
							</div>
							<div class="mean-bean-leaderboard__entry">
								<div class="mean_bean__ranking">3</div>
								<div class="mean-bean__name">Fiona</div>
								<div class="mean-bean__raised">£1,320.00</div>
							</div>
							<div class="mean-bean-leaderboard__entry">
								<div class="mean_bean__ranking">4</div>
								<div class="mean-bean__name">Fiona</div>
								<div class="mean-bean__raised">£1,320.00</div>
							</div>
							<div class="mean-bean-leaderboard__entry">
								<div class="mean_bean__ranking">5</div>
								<div class="mean-bean__name">Fiona</div>
								<div class="mean-bean__raised">£1,320.00</div>
							</div>
						</div>	
							
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{}
Money raised so far:

Meanest Bean

1
Mark
£1,997.25
2
Hollie
£1,366.62
3
Fiona
£1,320.00
4
Fiona
£1,320.00
5
Fiona
£1,320.00
Header Weekend {% include 'components/mean-bean/header-weekend' %}
#
HTML
<div class="full-banner full-banner--mean-bean full-banner--mean-bean-landing full-banner--image full-banner--featured flexbox flexboxlegacy enhanced" data-image="/images/mainsite5/mean-bean/background.jpg">
    <div class="full-banner__image" style="background-image: url(&quot;/images/mainsite5/mean-bean/background.jpg&quot;); background-repeat: no-repeat;"></div>
    <div class="inner">
        <div class="full-banner--featured-panel">
            <div class="full-banner__content-wrapper">
                <!-- RESPONSIVE CONTAINER -->
                <!-- CONTENT START -->
                <div class="full-banner__content">
                    <div class="large-col-6">
                        <picture>
                            <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop_@2x.png 2x">
                                <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile@2x.png 2x">
                                    <img class="banner-mean-bean-logo" src="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Mobile.png" alt="Mean Bean Challenge Weekender">
                                </picture>
                                <p>22–24 March</p>
                                <p>Spend two days eating just rice and beans in the name of beating poverty.</p>
                                <div class="large-col-6">
                                    <div>
                                        <a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
                                            <div class="button-bottom"></div>
                                            <div class="button-top">Sign Up Today</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="large-col-6">
                                <picture class="desktop-only">
                                    <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/gifs/Weekender_Header_GroupShot_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Header_GroupShot_Desktop_@2x.png 2x">
                                        <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile_@2x.png 2x">
                                            <img src="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif" alt="Mean Bean Challenge">
                                        </picture>
                                    </div>
                                </div>
                                <!-- CONTENT END -->
                            </div>
                        </div>
                    </div>
                </div>
Twig
<div class="full-banner full-banner--mean-bean full-banner--mean-bean-landing full-banner--image full-banner--featured flexbox flexboxlegacy enhanced" data-image="/images/mainsite5/mean-bean/background.jpg"><div class="full-banner__image" style="background-image: url(&quot;/images/mainsite5/mean-bean/background.jpg&quot;); background-repeat: no-repeat;"></div>
	<div class="inner">
		<div class="full-banner--featured-panel">
			<div class="full-banner__content-wrapper">
			<!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
				<div class="full-banner__content">

					<div class="large-col-6">
						<picture>
							  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop_@2x.png 2x">
							   <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile@2x.png 2x">
							  <img class="banner-mean-bean-logo" src="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Mobile.png" alt="Mean Bean Challenge Weekender">
						</picture> 
						<p>22–24 March</p>
						<p>Spend two days eating just rice and beans in the name of beating poverty.</p>

						<div class="large-col-6">
							<div>
								<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
									
									<div class="button-bottom"></div>
									<div class="button-top">Sign Up Today</div>
									
								</a>
							</div>
						</div>
					</div>

					<div class="large-col-6">
						<picture class="desktop-only">
						  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/gifs/Weekender_Header_GroupShot_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Header_GroupShot_Desktop_@2x.png 2x">
						  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile_@2x.png 2x">
						  <img src="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif" alt="Mean Bean Challenge">
						</picture> 
					</div>

				</div>
				<!-- CONTENT END -->
			</div>
		</div>
	</div>
</div>
{}
Footer Weekend {% include 'components/mean-bean/footer-weekend' %}
#
HTML
<div class="mean-bean">
    <div class="mean-bean-sign-section">
        <div class="inner clearfix">
            <picture>
                <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
                    <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
                        <img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
                    </picture>
                    <h2>
                        Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span>
                    </h2>
                    <div class="large-col-12">
                        <div>
                            <a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
                                <div class="button-bottom"></div>
                                <div class="button-top">Sign Up Today</div>
                            </a>
                        </div>
                        <p>Looking for the five-day challenge? <a href="/mean-bean">Check this out.</a></p>
                    </div>
                </div>
            </div>
        </div>
Twig
<div class="mean-bean">	
	<div class="mean-bean-sign-section">
		<div class="inner clearfix">
			
			<picture>
			  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
			  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
			  <img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
			</picture> 

			<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>

				<div class="large-col-12">
					<div>
						<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
							
							<div class="button-bottom"></div>
							<div class="button-top">Sign Up Today</div>
							
						</a>
					</div>

					<p>Looking for the five-day challenge? <a href="/mean-bean">Check this out.</a></p>
				</div>
		</div>
	</div>
</div>
{}
Mean Bean Challenge

Eat Beans Fight Hunger.

Looking for the five-day challenge? Check this out.

Giving
#
Summary Box Yellow Primary {% include 'components/giving/summary-box~yellow-primary' %}
#
HTML
<article class="summary-box summary-box--yellow-primary ">
    <h1 class="summary-box__title">
        Institutional Donors
    </h1>
    <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
    <a href="#" class="summary-box__more">Find out more</a>

</article>
Twig
<article class="summary-box {% if summary_box_colour %} summary-box--{{ summary_box_colour }} {% endif %}">
    <h1 class="summary-box__title">{{ summary_box_title }}</h1>
    <p class="summary-box__copy">{{ summary_box_copy }}</p>
    <a href="{{ summary_box_cta_url }}" class="summary-box__more">{{ summary_box_cta }}</a>
</article>
{
    "summary_box_title": "Institutional Donors",
    "summary_box_copy": "Tearfund\u2019s partnership with institutional donors builds relationships that shape thinking, policy and response to development.",
    "summary_box_cta": "Find out more",
    "summary_box_cta_url": "#",
    "summary_box_colour": "yellow-primary"
}

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more
Summary Boxes {% include 'components/giving/summary-boxes' %}
#
HTML
<div class="summary-boxes">
    <div class="summary-boxes__item">
        <article class="summary-box ">
            <h1 class="summary-box__title">
                Institutional Donors
            </h1>
            <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
            <a href="#" class="summary-box__more">Find out more</a>

        </article>
    </div>
    <div class="summary-boxes__item">
        <article class="summary-box ">
            <h1 class="summary-box__title">
                Institutional Donors
            </h1>
            <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
            <a href="#" class="summary-box__more">Find out more</a>

        </article>
    </div>
    <div class="summary-boxes__item">
        <article class="summary-box ">
            <h1 class="summary-box__title">
                Institutional Donors
            </h1>
            <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
            <a href="#" class="summary-box__more">Find out more</a>

        </article>
    </div>
</div>
Twig
<div class="summary-boxes">
	{% set vars = {"summary_box_title": "Institutional Donors",
		"summary_box_copy": "Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.",
		"summary_box_cta": "Find out more",
		"summary_box_cta_url": "#"} %}
	<div class="summary-boxes__item">
		{% include 'components/giving/summary-box' with vars  %}
	</div>
	<div class="summary-boxes__item">
		{% include 'components/giving/summary-box' with vars  %}
	</div>
	<div class="summary-boxes__item">
		{% include 'components/giving/summary-box' with vars  %}
	</div>
</div>
{}

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more
Summary Box {% include 'components/giving/summary-box' %}
#
HTML
<article class="summary-box ">
    <h1 class="summary-box__title">
        Institutional Donors
    </h1>
    <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
    <a href="#" class="summary-box__more">Find out more</a>

</article>
Twig
<article class="summary-box {% if summary_box_colour %} summary-box--{{ summary_box_colour }} {% endif %}">
    <h1 class="summary-box__title">{{ summary_box_title }}</h1>
    <p class="summary-box__copy">{{ summary_box_copy }}</p>
    <a href="{{ summary_box_cta_url }}" class="summary-box__more">{{ summary_box_cta }}</a>
</article>
{
    "summary_box_title": "Institutional Donors",
    "summary_box_copy": "Tearfund\u2019s partnership with institutional donors builds relationships that shape thinking, policy and response to development.",
    "summary_box_cta": "Find out more",
    "summary_box_cta_url": "#"
}

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more
Donate Lightbox {% include 'components/giving/donate-lightbox' %}
#
HTML
<a href="javascript:void(0)" class="button show-lightbox" data-lightbox="giving">Give Now</a>

<div class="lightbox lightbox--grey" data-lightbox="giving">
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
    <img src="/images/mainsite5/cycle-hope/giving-image.png">
    <p>A monthly gift of £5 could help someone like Anastasia support her family. Please give now.</p>
    <div class="fund-selector-field giving-bar__giving lightbox-giving">
        <div class="option-selector option-selector--with-text">
            <div class="option-selector__item checked">
                <input class="option-selector__input option-selector__c16" data-value="5" id="radio3" name="radio2" type="radio" checked="checked" >
                <label class="option-selector__label" for="radio3">£5</label>
            </div>
            <div class="option-selector__item ">
                <input class="option-selector__input option-selector__c16" data-value="10" id="radio3" name="radio2" type="radio" >
                <label class="option-selector__label" for="radio3">£10</label>
            </div>
            <div class="option-selector__item ">
                <input class="option-selector__input option-selector__c16" data-value="20" id="radio3" name="radio2" type="radio" >
                <label class="option-selector__label" for="radio3">£20</label>
            </div>
            <div class="option-selector__item ">
                <input class="option-selector__input option-selector__c16" data-value="40" id="radio3" name="radio2" type="radio" >
                <label class="option-selector__label" for="radio3">£40</label>
            </div>
            <div class="option-selector__item ">
                <input class="option-selector__input option-selector__c16" data-value="80" id="radio3" name="radio2" type="radio" >
                <label class="option-selector__label" for="radio3">£80</label>
            </div>
            <div class="option-selector__item option-selector__item--with-input">
                <input class="option-selector__input option-selector__c16" data-value="6" id="radio8" name="radio2" type="radio">
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" value="5" type="text">
                </div>
            </div>
        </div>
        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-12">
                <input class="field-set__input field-set__input--radio radio-regularly" id="radio12" name="radio4" type="radio" data-frequency="regularly" checked="checked">
                <label class="field-set__label field-set__label--radio" for="radio12">Regularly</label>
            </div>
            <div class="form-small-col-12">
                <input class="field-set__input field-set__input--radio" id="radio11" name="radio4" type="radio" data-frequency="once">
                <label class="field-set__label field-set__label--radio" for="radio11">Once</label>
            </div>
        </div>
        <input type="hidden" name="frequency"></input>
        <input class="giving-bar__input giving-bar__input-selectors"></input>
        <a class="button giving-bar__donate" href="javascript:void(0)">Next</a> 
    </div>
</div>
Twig
<a href="javascript:void(0)" class="button show-lightbox" data-lightbox="giving">Give Now</a>
<div class="lightbox lightbox--grey" data-lightbox="giving">
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
    <img src="{{giving_lightbox_image}}">
    <p>{{giving_lightbox_para}}</p>
    <div class="fund-selector-field giving-bar__giving lightbox-giving">
        <div class="option-selector option-selector--with-text">
            {% for amount in giving_lightbox_amounts %}
                <div class="option-selector__item {% if loop.index == 1 %}checked{% endif %}">
                    <input class="option-selector__input option-selector__c16" data-value="{{amount}}" id="radio3" name="radio2" type="radio" {% if loop.index == 1 %} checked="checked" {% endif %}>
                    <label class="option-selector__label" for="radio3">£{{amount}}</label>
                </div>
            {% endfor %}
            <div class="option-selector__item option-selector__item--with-input">
                <input class="option-selector__input  option-selector__c16" data-value="6" id="radio8" name="radio2" type="radio">
                <div class="custom-input custom-input--currency">
                    <input class="custom-input__input" value="5" type="text">
                </div>
            </div>

        </div>

        <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
            <div class="form-small-col-12">
                <input class="field-set__input field-set__input--radio radio-regularly" id="radio12" name="radio4" type="radio" data-frequency="regularly" checked="checked">
                <label class="field-set__label field-set__label--radio" for="radio12">Regularly</label>
            </div>
            <div class="form-small-col-12">
                <input class="field-set__input field-set__input--radio" id="radio11" name="radio4" type="radio" data-frequency="once">
                <label class="field-set__label field-set__label--radio" for="radio11">Once</label>
            </div>
        </div>

        <input type="hidden" name="frequency"></input>

        <input class="giving-bar__input giving-bar__input-selectors"></input>
        <a class="button giving-bar__donate" href="javascript:void(0)">Next</a>
    </div>
</div>
{
    "giving_lightbox_image": "\/images\/mainsite5\/cycle-hope\/giving-image.png",
    "giving_lightbox_para": "A monthly gift of \u00a35 could help someone like Anastasia support her family. Please give now.",
    "giving_lightbox_amounts": {
        "0": "5",
        "1": "10",
        "2": "20",
        "3": "40",
        "4": "80"
    }
}
Give Now
Summary Box Yellow Secondary {% include 'components/giving/summary-box~yellow-secondary' %}
#
HTML
<article class="summary-box summary-box--yellow-secondary ">
    <h1 class="summary-box__title">
        Institutional Donors
    </h1>
    <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
    <a href="#" class="summary-box__more">Find out more</a>

</article>
Twig
<article class="summary-box {% if summary_box_colour %} summary-box--{{ summary_box_colour }} {% endif %}">
    <h1 class="summary-box__title">{{ summary_box_title }}</h1>
    <p class="summary-box__copy">{{ summary_box_copy }}</p>
    <a href="{{ summary_box_cta_url }}" class="summary-box__more">{{ summary_box_cta }}</a>
</article>
{
    "summary_box_title": "Institutional Donors",
    "summary_box_copy": "Tearfund\u2019s partnership with institutional donors builds relationships that shape thinking, policy and response to development.",
    "summary_box_cta": "Find out more",
    "summary_box_cta_url": "#",
    "summary_box_colour": "yellow-secondary"
}

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more
Summary Box Green Secondary {% include 'components/giving/summary-box~green-secondary' %}
#
HTML
<article class="summary-box summary-box--green-secondary ">
    <h1 class="summary-box__title">
        Institutional Donors
    </h1>
    <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
    <a href="#" class="summary-box__more">Find out more</a>

</article>
Twig
<article class="summary-box {% if summary_box_colour %} summary-box--{{ summary_box_colour }} {% endif %}">
    <h1 class="summary-box__title">{{ summary_box_title }}</h1>
    <p class="summary-box__copy">{{ summary_box_copy }}</p>
    <a href="{{ summary_box_cta_url }}" class="summary-box__more">{{ summary_box_cta }}</a>
</article>
{
    "summary_box_title": "Institutional Donors",
    "summary_box_copy": "Tearfund\u2019s partnership with institutional donors builds relationships that shape thinking, policy and response to development.",
    "summary_box_cta": "Find out more",
    "summary_box_cta_url": "#",
    "summary_box_colour": "green-secondary"
}

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more
Summary Box Green Primary {% include 'components/giving/summary-box~green-primary' %}
#
HTML
<article class="summary-box summary-box--green-primary ">
    <h1 class="summary-box__title">
        Institutional Donors
    </h1>
    <p class="summary-box__copy">Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.</p>
    <a href="#" class="summary-box__more">Find out more</a>

</article>
Twig
<article class="summary-box {% if summary_box_colour %} summary-box--{{ summary_box_colour }} {% endif %}">
    <h1 class="summary-box__title">{{ summary_box_title }}</h1>
    <p class="summary-box__copy">{{ summary_box_copy }}</p>
    <a href="{{ summary_box_cta_url }}" class="summary-box__more">{{ summary_box_cta }}</a>
</article>
{
    "summary_box_title": "Institutional Donors",
    "summary_box_copy": "Tearfund\u2019s partnership with institutional donors builds relationships that shape thinking, policy and response to development.",
    "summary_box_cta": "Find out more",
    "summary_box_cta_url": "#",
    "summary_box_colour": "green-primary"
}

Institutional Donors

Tearfund’s partnership with institutional donors builds relationships that shape thinking, policy and response to development.

Find out more
Giving Header
#
Giving Header Alit {% include 'components/giving-header/giving-header-alit' %}
#
HTML
Twig
{}
Giving Header {% include 'components/giving-header/giving-header' %}
#
HTML
<div class="giving-header fullwidth-giving-ask--emergency">
    <div class="inner">
        <div id="fullwidth-image" class="giving-header__image" data-image="/slider/photo5.jpg"></div>
        <div class="large-row">
            <div class="large-col-6">
                <h1 class="giving-header__title" id="fullwidth-text">
                    CENTRAL AFRICAN REPUBLIC APPEAL
                </h1>
                <div class="giving-header__link"><a href="#">VIEW PRAYER RESORUCES AND FIND OUT MORE</a></div>
            </div>
            <div class="large-col-6">
                <div class="giving-widget giving-widget--mini">
                    <div class="fund-selector">
                        <!-- Can be a span or a label. Depends on whether or not there's a select -->
                        <span for="destination-select" class="fund-selector__title">Donate Now</span> 
                        <div class="fund-selector-field">
                            <div class="custom-input custom-input--currency">
                                <input class="custom-input__input" type="text">
                            </div>
                        </div>
                        <div class="fund-selector-field payment-methods">
                            <div class="payment-methods__item payment-methods__item--once" style="display: block;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-card"><span>Pay by card</span></button>
                                </div>
                                <div class="payment-methods__button">
                                    <button class="button pay-by-paypal"><span>Pay by</span></button>
                                </div>
                            </div>
                            <div class="payment-methods__item payment-methods__item--regularly" style="display: none;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="giving-header fullwidth-giving-ask--emergency">
    <div class="inner">
        <div id="fullwidth-image" class="giving-header__image" data-image="/slider/photo5.jpg"></div>

        <div class="large-row">
            <div class="large-col-6">
                <h1 class="giving-header__title" id="fullwidth-text"> CENTRAL AFRICAN REPUBLIC APPEAL</h1>
                <div class="giving-header__link"><a href="#">VIEW PRAYER RESORUCES AND FIND OUT MORE</a></div>
            </div>
            <div class="large-col-6">
                <div class="giving-widget giving-widget--mini">
                    <div class="fund-selector">
                        <!-- Can be a span or a label. Depends on whether or not there's a select -->
                        <span for="destination-select" class="fund-selector__title">Donate Now</span>

                        <div class="fund-selector-field">
                            <div class="custom-input custom-input--currency">
                                <input class="custom-input__input" type="text">
                            </div>
                        </div>

                        <div class="fund-selector-field payment-methods">
                            <div class="payment-methods__item payment-methods__item--once" style="display: block;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-card"><span>Pay by card</span></button>
                                </div>
                                <div class="payment-methods__button">
                                    <button class="button pay-by-paypal"><span>Pay by</span></button>
                                </div>
                            </div>
                            <div class="payment-methods__item payment-methods__item--regularly" style="display: none;">
                                <div class="payment-methods__button">
                                    <button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{}

CENTRAL AFRICAN REPUBLIC APPEAL

Donate Now
Venn
#
Venn Circles {% include 'components/venn/venn-circles' %}
#
HTML
<div class="venn-circles venn-circles--how-we-work">
    <div class="venn-circle__container">
        <div class="venn-circle ">
            <div class="venn-circle__content">
                <h3 class="venn-circle__title">
                    Spiritual Passion
                </h3>
                <p>We’re Christians committed to following Jesus where the need is greatest. God has called us to serve those living in poverty, regardless of race, gender, nationality or religious belief.</p>
                <p>We know the gospel has the power to transform lives and heal communities, we see this truth in our work every day. God isn’t giving up on the poor, neither are we.</p>
            </div>
        </div>
    </div>
    <div class="venn-circle__container">
        <div class="venn-circle venn-circle--right">
            <div class="venn-circle__content">
                <h3 class="venn-circle__title">
                    Professional Excellence
                </h3>
                <p>We know that our work is too important not to do it well. We’re committed to professionalism and are recognised for our expertise in relief, development and advocacy.</p>
                <p>We’re signatories to the Red Cross Code of Conduct and are certified against the Humanitarian Accountability Partnership Standard. That way, we’re always accountable for the work we do.</p>
            </div>
        </div>
    </div>
</div>
Twig
<div class="venn-circles venn-circles--how-we-work">
		{% for venn in venn_circles %}
			<div class="venn-circle__container">
				<div class="venn-circle {% if loop.index == 2 %}venn-circle--right{% endif %}">
					<div class="venn-circle__content">
						<h3 class="venn-circle__title">{{ venn.title }}</h3>
						{% for content in venn.content %}
							<p>{{ content }}</p>
						{% endfor %}
					</div>
				</div>
			</div>
		{% endfor %}
</div>
{
    "venn_circles": {
        "0": {
            "title": "Spiritual Passion",
            "content": {
                "0": "We\u2019re Christians committed to following Jesus where the need is greatest. God has called us to serve those living in poverty, regardless of race, gender, nationality or religious belief.",
                "1": "We know the gospel has the power to transform lives and heal communities, we see this truth in our work every day. God isn\u2019t giving up on the poor, neither are we."
            }
        },
        "1": {
            "title": "Professional Excellence",
            "content": {
                "0": "We know that our work is too important not to do it well. We\u2019re committed to professionalism and are recognised for our expertise in relief, development and advocacy.",
                "1": "We\u2019re signatories to the Red Cross Code of Conduct and are certified against the Humanitarian Accountability Partnership Standard. That way, we\u2019re always accountable for the work we do."
            }
        }
    }
}

Spiritual Passion

We’re Christians committed to following Jesus where the need is greatest. God has called us to serve those living in poverty, regardless of race, gender, nationality or religious belief.

We know the gospel has the power to transform lives and heal communities, we see this truth in our work every day. God isn’t giving up on the poor, neither are we.

Professional Excellence

We know that our work is too important not to do it well. We’re committed to professionalism and are recognised for our expertise in relief, development and advocacy.

We’re signatories to the Red Cross Code of Conduct and are certified against the Humanitarian Accountability Partnership Standard. That way, we’re always accountable for the work we do.

Related
#
Related Articles {% include 'components/related/related-articles' %}
#
HTML
<div class="related-articles">
    <div class="inner">
        <h2 class="related-articles__title">
            More like this
        </h2>
        <div class="large-row">
            <div class="large-col-4">
                <article class="related-article">
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Short text</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
            <div class="large-col-4">
                <article class="related-article">
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Summary text here, which will be the first 20 - 30 words of this post ie you know something...</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
            <div class="large-col-4">
                <article class="related-article">
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Short text</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
        </div>
    </div>
</div>
Twig
<div class="related-articles">
	<div class="inner">
		<h2 class="related-articles__title">{{ related_title }}</h2>
		<div class="large-row">

			{% for related_article in related_articles %}

				<div class="large-col-4">
					<article class="related-article">
						{% if related_article.image %}
							<a href="{{ related_article.url }}">
								<img class="related-article__image" src="{{ related_article.image }}">
							</a>
						{% endif %}
						<h1 class="related-article__title">{{ related_article.title }}</h1>
						<div class="related-article__byline byline">by <span class="author">{{ related_article.author }}</span></div>
						<p class="related-article__description">{{ related_article.summary }}</p>
						<a href="{{ related_article.url }}">{{ related_article.link_text }}</a>
					</article>
				</div>

			{% endfor %}
		</div>
	</div>
</div>
{
    "related_title": "More like this",
    "related_articles": {
        "0": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Short text",
            "url": "#",
            "link_text": "Continue Reading"
        },
        "1": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Summary text here, which will be the first 20 - 30 words of this post ie you know something...",
            "url": "#",
            "link_text": "Continue Reading"
        },
        "2": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Short text",
            "url": "#",
            "link_text": "Continue Reading"
        }
    }
}
Related Stories {% include 'components/related/related-stories' %}
#
HTML
<div class="grey-section border-both">
    <div class="article-inner">
        <h4 class="related-stories-title">
            Related Stories
        </h4>
        <div class="related-stories">
            <div class="related-story">
                <div class="related-story__image-container">
                    <div class="related-story__image circular-image">
                        <a href="#">
                            <img src="http://placehold.it/160x160">
                            <div class="circular-image-hover">
                                <div class="circular-image-hover__read">Read</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="related-story__content">
                    <h1 class="related-story__header">
                        <a href="#">Title of article</a>

                    </h1>
                    <div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
                    <div class="related-story__meta">
                        <div class="related-story__post-meta">Posted on Jan 15th 2015 by Author Name</div>
                        <div class="related-story__author-image circular-image">
                            <img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="related-stories">
            <div class="related-story">
                <div class="related-story__image-container">
                    <div class="related-story__image circular-image">
                        <a href="#">
                            <img src="http://placehold.it/160x160">
                            <div class="circular-image-hover">
                                <div class="circular-image-hover__read">Read</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="related-story__content">
                    <h1 class="related-story__header">
                        <a href="#">Title of article</a>

                    </h1>
                    <div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
                    <div class="related-story__meta">
                        <div class="related-story__post-meta">Posted on Jan 15th 2015 by Author Name</div>
                        <div class="related-story__author-image circular-image">
                            <img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="related-stories">
            <div class="related-story">
                <div class="related-story__image-container">
                    <div class="related-story__image circular-image">
                        <a href="#">
                            <img src="http://placehold.it/160x160">
                            <div class="circular-image-hover">
                                <div class="circular-image-hover__read">Read</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="related-story__content">
                    <h1 class="related-story__header">
                        <a href="#">Title of article</a>

                    </h1>
                    <div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
                    <div class="related-story__meta">
                        <div class="related-story__post-meta">Posted on Jan 15th 2015 by Author Name</div>
                        <div class="related-story__author-image circular-image">
                            <img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="grey-section border-both">
	<div class="article-inner">
		<h4 class="related-stories-title">Related Stories</h4>

		{% for related_story in related_stories %}

			<div class="related-stories">
				<div class="related-story">
					<div class="related-story__image-container">
						<div class="related-story__image circular-image">
							<a href="{{ related_story.url }}">
								<img src="{{ related_story.image }}">
								<div class="circular-image-hover">
									<div class="circular-image-hover__read">Read</div>
								</div>
							</a>
						</div>
					</div>
					<div class="related-story__content">
						<h1 class="related-story__header">
							<a href="{{ related_story.url }}">{{ related_story.title }}</a>
						</h1>
						<div class="related-story__summary">{{ related_story.summary }}</div>
						<div class="related-story__meta">
							<div class="related-story__post-meta">Posted on {{ related_story.date }} by {{ related_story.author }}</div>
							<div class="related-story__author-image circular-image">
								<img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
							</div>
						</div>
					</div>
				</div>
			</div>

		{% endfor %}

	</div>
</div>
{
    "related_story_title": "Related Stories",
    "related_stories": {
        "0": {
            "title": "Title of article",
            "date": " Jan 15th 2015",
            "author": "Author Name",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "url": "#",
            "image": "http:\/\/placehold.it\/160x160"
        },
        "1": {
            "title": "Title of article",
            "date": " Jan 15th 2015",
            "author": "Author Name",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "url": "#",
            "image": "http:\/\/placehold.it\/160x160"
        },
        "2": {
            "title": "Title of article",
            "date": " Jan 15th 2015",
            "author": "Author Name",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "url": "#",
            "image": "http:\/\/placehold.it\/160x160"
        }
    }
}
Related Articles Image {% include 'components/related/related-articles~image' %}
#
HTML
<div class="related-articles">
    <div class="inner">
        <h2 class="related-articles__title">
            More like this
        </h2>
        <div class="large-row">
            <div class="large-col-4">
                <article class="related-article">
                    <a href="#">
                        <img class="related-article__image" src="http://placehold.it/400x225">
                    </a>
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Short text</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
            <div class="large-col-4">
                <article class="related-article">
                    <a href="#">
                        <img class="related-article__image" src="http://placehold.it/400x225">
                    </a>
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Summary text here, which will be the first 20 - 30 words of this post ie you know something...</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
            <div class="large-col-4">
                <article class="related-article">
                    <a href="#">
                        <img class="related-article__image" src="http://placehold.it/400x225">
                    </a>
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Short text</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
        </div>
    </div>
</div>
Twig
<div class="related-articles">
	<div class="inner">
		<h2 class="related-articles__title">{{ related_title }}</h2>
		<div class="large-row">

			{% for related_article in related_articles %}

				<div class="large-col-4">
					<article class="related-article">
						{% if related_article.image %}
							<a href="{{ related_article.url }}">
								<img class="related-article__image" src="{{ related_article.image }}">
							</a>
						{% endif %}
						<h1 class="related-article__title">{{ related_article.title }}</h1>
						<div class="related-article__byline byline">by <span class="author">{{ related_article.author }}</span></div>
						<p class="related-article__description">{{ related_article.summary }}</p>
						<a href="{{ related_article.url }}">{{ related_article.link_text }}</a>
					</article>
				</div>

			{% endfor %}
		</div>
	</div>
</div>
{
    "related_title": "More like this",
    "related_articles": {
        "0": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Short text",
            "url": "#",
            "link_text": "Continue Reading",
            "image": "http:\/\/placehold.it\/400x225"
        },
        "1": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Summary text here, which will be the first 20 - 30 words of this post ie you know something...",
            "url": "#",
            "link_text": "Continue Reading",
            "image": "http:\/\/placehold.it\/400x225"
        },
        "2": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Short text",
            "url": "#",
            "link_text": "Continue Reading",
            "image": "http:\/\/placehold.it\/400x225"
        }
    }
}
Articles
#
Article Action Complete {% include 'components/articles/article-action~complete' %}
#
HTML
<div class="article-action ">
    <div class="article-action__content">
        <h3 class="article-action__heading">
            <span>Act</span>
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
        <h3 class="article-action__heading">
            THANK YOU FOR ACTING WITH US
        </h3>
    </div>
</div>
Twig
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "complete",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

THANK YOU FOR ACTING WITH US

Article Action {% include 'components/articles/article-action' %}
#
HTML
<div class="article-action ">
    <div class="article-action__content">
        <h3 class="article-action__heading">
            <span>Act</span>
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
        <a href="#" class="secondary-button">Act</a>

    </div>
</div>
Twig
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "button",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

Act
Article Action Form {% include 'components/articles/article-action~form' %}
#
HTML
<div class="article-action ">
    <div class="article-action__content">
        <h3 class="article-action__heading">
            <span>Act</span>
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
        <div class="article-action__reveal">
            <div>FORM HERE</div>
            <button class="button" type="input">Submit</button>
        </div>
        <a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>

    </div>
</div>
Twig
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "form",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

FORM HERE
Act
Author Share No Author {% include 'components/articles/author-share~no-author' %}
#
HTML
<div class="article-end-content">
    <div class="article-inner">
        <div class="author-share">
            <div class="inline-share-buttons "> <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a> <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
</div>
            <div style="clear: both;"></div>
        </div>
    </div>
</div>
Twig
<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
			{% if article_end_has_author %}
				<div class="author-bio">
					<div class="author-bio__author-avatar circular-image">
						<img class="avatar-image" src="{{ article_end_avatar }}">
					</div>
					<div class="author-bio__info">
						<div class="author-bio__info-name">{{ article_end_author }}</div>
						<div class="author-bio__info-about">
							{{ article_end_summary }}
							<div class="author-bio__link"><a href="{{ article_end_url }}">Read more from Mark</a></div>
						</div>
					</div>
				</div>
			{% endif %}
			<div class="inline-share-buttons {% if article_end_has_author %}inline-share-buttons__author{% endif %}">
			    <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
			    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</div>
{
    "article_end_author": "Mark Lang",
    "article_end_summary": "Part of the Tearfund digital team - making a supporters day awesome",
    "article_end_url": "#",
    "article_end_avatar": "http:\/\/placehold.it\/200x200",
    "article_end_has_author": false
}
Article Action Background {% include 'components/articles/article-action~background' %}
#
HTML
<div class="fullwidth-banner fullwidth-banner--article-action" data-image="/slider/photo4.jpg">
    <div class="article-action article-action--image">
        <div class="article-action__content">
            <h3 class="article-action__heading">
                <span>Act</span>
            </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
            <a href="#" class="secondary-button">Act</a>

        </div>
    </div>
</div>
Twig
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "button",
    "article_action_url": "#",
    "article_action_button": "Act",
    "article_action_background_image": "\/slider\/photo4.jpg"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

Act
Author Share {% include 'components/articles/author-share' %}
#
HTML
<div class="article-end-content">
    <div class="article-inner">
        <div class="author-share">
            <div class="author-bio">
                <div class="author-bio__author-avatar circular-image">
                    <img class="avatar-image" src="http://placehold.it/200x200">
                </div>
                <div class="author-bio__info">
                    <div class="author-bio__info-name">Mark Lang</div>
                    <div class="author-bio__info-about">
                        Part of the Tearfund digital team - making a supporters day awesome

                        <div class="author-bio__link"><a href="#">Read more from Mark</a></div>
                    </div>
                </div>
            </div>
            <div class="inline-share-buttons inline-share-buttons__author"> <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a> <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
</div>
            <div style="clear: both;"></div>
        </div>
    </div>
</div>
Twig
<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
			{% if article_end_has_author %}
				<div class="author-bio">
					<div class="author-bio__author-avatar circular-image">
						<img class="avatar-image" src="{{ article_end_avatar }}">
					</div>
					<div class="author-bio__info">
						<div class="author-bio__info-name">{{ article_end_author }}</div>
						<div class="author-bio__info-about">
							{{ article_end_summary }}
							<div class="author-bio__link"><a href="{{ article_end_url }}">Read more from Mark</a></div>
						</div>
					</div>
				</div>
			{% endif %}
			<div class="inline-share-buttons {% if article_end_has_author %}inline-share-buttons__author{% endif %}">
			    <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
			    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</div>
{
    "article_end_author": "Mark Lang",
    "article_end_summary": "Part of the Tearfund digital team - making a supporters day awesome",
    "article_end_url": "#",
    "article_end_avatar": "http:\/\/placehold.it\/200x200",
    "article_end_has_author": true
}
Mark Lang
Part of the Tearfund digital team - making a supporters day awesome
Article Related {% include 'components/articles/article-related' %}
#
HTML
<div class="grey-section border-both">
    <div class="article-inner">
        <h4 class="related-stories-title">
            Related Stories
        </h4>
        <div class="related-stories">
            <div class="related-story">
                <div class="related-story__image-container">
                    <div class="related-story__image circular-image">
                        <a href="#">
                            <img src="http://placehold.it/160x160">
                            <div class="circular-image-hover">
                                <div class="circular-image-hover__read">Read</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="related-story__content">
                    <h1 class="related-story__header animate">
                        <a href="#">Without Tearfund’s help we wouldn’t have survived</a>
                    </h1>
                    <div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
                    <div class="related-story__meta">
                        <div class="related-story__post-meta">Posted on Jan 15th 2015 by Mark Lang</div>
                        <div class="related-story__author-image circular-image">
                            <img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="related-stories">
            <div class="related-story">
                <div class="related-story__image-container">
                    <div class="related-story__image circular-image">
                        <a href="#">
                            <img src="http://placehold.it/160x160">
                            <div class="circular-image-hover">
                                <div class="circular-image-hover__read">Read</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="related-story__content">
                    <h1 class="related-story__header animate">
                        <a href="#">Without Tearfund’s help we wouldn’t have survived</a>
                    </h1>
                    <div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
                    <div class="related-story__meta">
                        <div class="related-story__post-meta">Posted on Jan 15th 2015 by Mark Lang</div>
                        <div class="related-story__author-image circular-image">
                            <img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="related-stories">
            <div class="related-story">
                <div class="related-story__image-container">
                    <div class="related-story__image circular-image">
                        <a href="#">
                            <img src="http://placehold.it/160x160">
                            <div class="circular-image-hover">
                                <div class="circular-image-hover__read">Read</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="related-story__content">
                    <h1 class="related-story__header animate">
                        <a href="#">Without Tearfund’s help we wouldn’t have survived</a>
                    </h1>
                    <div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
                    <div class="related-story__meta">
                        <div class="related-story__post-meta">Posted on Jan 15th 2015 by Mark Lang</div>
                        <div class="related-story__author-image circular-image">
                            <img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="grey-section border-both">
	<div class="article-inner">
		<h4 class="related-stories-title">{{ related_stories_title }}</h4>

		{% for story in related_stories %}

			<div class="related-stories">
				<div class="related-story">
					<div class="related-story__image-container">
						<div class="related-story__image circular-image">
							<a href="{{ story.url }}"><img src="{{ story.thumbnail }}"><div class="circular-image-hover"><div class="circular-image-hover__read">Read</div></div></a>
						</div>
					</div>
					<div class="related-story__content">
						<h1 class="related-story__header animate"><a href="{{ story.url }}">{{ story.title }}</a></h1>
						<div class="related-story__summary">{{ story.summary }}</div>
						<div class="related-story__meta">
							<div class="related-story__post-meta">Posted on {{ story.date }} by {{ story.author }}</div>
							<div class="related-story__author-image circular-image"><img class="social-share-sticky__avatar-image" src="{{ story.author_image }}"></div>
						</div>
					</div>
				</div>
			</div>

		{% endfor %}
		
	</div>
</div>
{
    "related_stories_title": "Related Stories",
    "related_stories": {
        "0": {
            "title": "Without Tearfund\u2019s help we wouldn\u2019t have survived",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "date": "Jan 15th 2015",
            "author": "Mark Lang",
            "author_image": "http:\/\/placehold.it\/200x200",
            "thumbnail": "http:\/\/placehold.it\/160x160",
            "url": "#"
        },
        "1": {
            "title": "Without Tearfund\u2019s help we wouldn\u2019t have survived",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "date": "Jan 15th 2015",
            "author": "Mark Lang",
            "author_image": "http:\/\/placehold.it\/200x200",
            "thumbnail": "http:\/\/placehold.it\/160x160",
            "url": "#"
        },
        "2": {
            "title": "Without Tearfund\u2019s help we wouldn\u2019t have survived",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "date": "Jan 15th 2015",
            "author": "Mark Lang",
            "author_image": "http:\/\/placehold.it\/200x200",
            "thumbnail": "http:\/\/placehold.it\/160x160",
            "url": "#"
        }
    }
}
Article Action Share {% include 'components/articles/article-action~share' %}
#
HTML
<div class="article-action ">
    <div class="article-action__content">
        <h3 class="article-action__heading">
            <span>Act</span>
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
        <div class="inline-share-buttons">
<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a> <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
</div>
    </div>
</div>
Twig
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "social",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

Charts
#
Churches Chart {% include 'components/charts/churches-chart' %}
#
HTML
<div class="churches-chart">
    <div class="churches-chart__image" data-svg="/images/mainsite5/churches-chart/donut.svg">
        <img src="/images/mainsite5/churches-chart/churches-chart-placehold.png" alt="Connected chart">
    </div>
    <ul class="churches-chart__legend">
        <li class="churches-chart__legend-item churches-chart__legend-item--give" data-id="give"><a href="#give-section">Partner your church</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--respond" data-id="respond"><a href="#respond-section">Pray</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--connect-church" data-id="connect-church"><a href="#connect-church-section">Act</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--prayer" data-id="prayer"><a href="#prayer-section">Resources</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--youth" data-id="youth"><a href="#youth-section">Request a speaker</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--church-life" data-id="church-life"><a href="#church-life-section">Youth</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--go-with-tearfund" data-id="go-with-tearfund"><a href="#go-with-tearfund-section">Go Overseas</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--lend-a-hand" data-id="lend-a-hand"><a href="#lend-a-hand">Emergency Response</a></li>
    </ul>
    <div class="churches-chart__details">
        <article id="give-section" class="churches-chart-detail churches-chart-detail--give">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">
                Partner your church
            </h1>
            <div class="churches-chart-detail__copy">
                <p>You can build a lasting relationship between your church and one of our church based partners overseas through Connected Church.</p>
            </div>
            <a class="button" href="https://connected.tearfund.org/">Find out more</a> 
        </article>
        <article id="respond-section" class="churches-chart-detail churches-chart-detail--respond">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">
                Pray
            </h1>
            <div class="churches-chart-detail__copy">
                <p>Tearfund’s work is rooted in prayer. Get your church praying about where it’s needed the most. Click through to sign up for One Voice prayer emails and to find resources for your church.</p>
            </div>
            <a class="button" href="http://www.tearfund.org/pray">View Resources and Sign Up</a> 
        </article>
    </article>
    <article id="connect-church-section" class="churches-chart-detail churches-chart-detail--connect-church">
        <div class="churches-chart-detail__icon"></div>
        <h1 class="churches-chart-detail__title">
            Act
        </h1>
        <div class="churches-chart-detail__copy">
            <p>We need to take action to beat poverty and injustice. This includes calling on leaders in the UK and globally to change laws and policies, and making changes in our own lives too. Click through to sign up for Tearfund Action emails and to find resources for your church.</p>
        </div>
        <a class="button" href="http://www.tearfund.org/action">View Resources and Sign Up</a> 
    </article>
    <article id="prayer-section" class="churches-chart-detail churches-chart-detail--prayer">
        <div class="churches-chart-detail__icon"></div>
        <h1 class="churches-chart-detail__title">
            Resources
        </h1>
        <div class="churches-chart-detail__copy">
            <p>All of our resources in one handy space! Check out our Bible studies, information to help you organise a fundraiser, service outlines and other ready-to-use resources.</p>
        </div>
        <a class="button" href="https://www.tearfund.org/en/about_you/resources/for_churches/">View Resources
</a> 
    </article>
    <article id="youth-section" class="churches-chart-detail churches-chart-detail--youth">
        <div class="churches-chart-detail__icon"></div>
        <h1 class="churches-chart-detail__title">
            Request a speaker
        </h1>
        <div class="churches-chart-detail__copy">
            <p>Inspire your church with an accredited Tearfund speaker who can share amazing stories of lives changed through our church-based partners overseas.</p>
        </div>
        <a class="button" href="https://www.tearfund.org/en/about_you/book_a_speaker/">Book a speaker</a> 
    </article>
    <article id="church-life-section" class="churches-chart-detail churches-chart-detail--church-life">
        <div class="churches-chart-detail__icon"></div>
        <h1 class="churches-chart-detail__title">
            Youth
        </h1>
        <div class="churches-chart-detail__copy">
            <p>Bible studies, activities and lesson plans to keep young people informed, inspired and involved.</p>
        </div>
        <a class="button" href="https://www.tearfund.org/en/about_you/youth/">See resources</a> 
    </article>
    <article id="go-with-tearfund-section" class="churches-chart-detail churches-chart-detail--go-with-tearfund">
        <div class="churches-chart-detail__icon"></div>
        <h1 class="churches-chart-detail__title">
            Go Overseas
        </h1>
        <div class="churches-chart-detail__copy">
            <p>Come on a Tearfund Go overseas trip with a group from your church and get inspired together.</p>
        </div>
        <a class="button" href="https://www.tearfund.org/en/about_you/go_overseas/">View trips</a> 
    </article>
    <article id="lend-a-hand-section" class="churches-chart-detail churches-chart-detail--lend-a-hand">
        <div class="churches-chart-detail__icon"></div>
        <h1 class="churches-chart-detail__title">
            Emergency Response
        </h1>
        <div class="churches-chart-detail__copy">
            <p>When disasters strike overseas, there is often desperate need and the Church feels moved to help. Click through to support the latest emergency and sign up to the Church Leader Newsletter below to receive information and updates when they happen. </p>
        </div>
        <a class="button" href="https://www.tearfund.org/en/latest/burundi_crisis_appeal/">Respond to emergencies</a> 
    </article>
</div>
</div>
Twig
<div class="churches-chart">
    <div class="churches-chart__image" data-svg="/images/mainsite5/churches-chart/donut.svg">
        <img src="/images/mainsite5/churches-chart/churches-chart-placehold.png" alt="Connected chart">
    </div>
    <ul class="churches-chart__legend">
        <li class="churches-chart__legend-item churches-chart__legend-item--give" data-id="give"><a href="#give-section">Partner your church</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--respond" data-id="respond"><a href="#respond-section">Pray</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--connect-church" data-id="connect-church"><a href="#connect-church-section">Act</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--prayer" data-id="prayer"><a href="#prayer-section">Resources</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--youth" data-id="youth"><a href="#youth-section">Request a speaker</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--church-life" data-id="church-life"><a href="#church-life-section">Youth</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--go-with-tearfund" data-id="go-with-tearfund"><a href="#go-with-tearfund-section">Go Overseas</a></li>
        <li class="churches-chart__legend-item churches-chart__legend-item--lend-a-hand" data-id="lend-a-hand"><a href="#lend-a-hand">Emergency Response</a></li>
    </ul>
    <div class="churches-chart__details">
        <article id="give-section" class="churches-chart-detail churches-chart-detail--give">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Partner your church</h1>
            <div class="churches-chart-detail__copy">
                <p>You can build a lasting relationship between your church and one of our church based partners overseas through Connected Church.</p>
            </div>
            <a class="button" href="https://connected.tearfund.org/">Find out more</a>
        </article>
        <article id="respond-section" class="churches-chart-detail churches-chart-detail--respond">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Pray</h1>
            <div class="churches-chart-detail__copy">
                <p>Tearfund’s work is rooted in prayer. Get your church praying about where it’s needed the most. Click through to sign up for One Voice prayer emails and to find resources for your church.</p>
            </div>
            <a class="button" href="http://www.tearfund.org/pray">View Resources and Sign Up</a>
        </article>
        </article>
        <article id="connect-church-section" class="churches-chart-detail churches-chart-detail--connect-church">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Act</h1>
             <div class="churches-chart-detail__copy">
                <p>We need to take action to beat poverty and injustice. This includes calling on leaders in the UK and globally to change laws and policies, and making changes in our own lives too. Click through to sign up for Tearfund Action emails and to find resources for your church.</p>
            </div>
            <a class="button" href="http://www.tearfund.org/action">View Resources and Sign Up</a>

        </article>
        <article id="prayer-section" class="churches-chart-detail churches-chart-detail--prayer">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Resources</h1>
            <div class="churches-chart-detail__copy">
                <p>All of our resources in one handy space! Check out our Bible studies, information to help you organise a fundraiser, service outlines and other ready-to-use resources.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/resources/for_churches/">View Resources
</a>
        </article>
        <article id="youth-section" class="churches-chart-detail churches-chart-detail--youth">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Request a speaker</h1>
            <div class="churches-chart-detail__copy">
                <p>Inspire your church with an accredited Tearfund speaker who can share amazing stories of lives changed through our church-based partners overseas.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/book_a_speaker/">Book a speaker</a>
        </article>
        <article id="church-life-section" class="churches-chart-detail churches-chart-detail--church-life">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Youth</h1>
            <div class="churches-chart-detail__copy">
                <p>Bible studies, activities and lesson plans to keep young people informed, inspired and involved.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/youth/">See resources</a>
        </article>
        <article id="go-with-tearfund-section" class="churches-chart-detail churches-chart-detail--go-with-tearfund">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Go Overseas</h1>
            <div class="churches-chart-detail__copy">
                <p>Come on a Tearfund Go overseas trip with a group from your church and get inspired together.</p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/about_you/go_overseas/">View trips</a>
        </article>
         <article id="lend-a-hand-section" class="churches-chart-detail churches-chart-detail--lend-a-hand">
            <div class="churches-chart-detail__icon"></div>
            <h1 class="churches-chart-detail__title">Emergency Response</h1>
            <div class="churches-chart-detail__copy">
                <p>When disasters strike overseas, there is often desperate need and the Church feels moved to help. Click through to support the latest emergency and sign up to the Church Leader Newsletter below to receive information and updates when they happen. </p>
            </div>
            <a class="button" href="https://www.tearfund.org/en/latest/burundi_crisis_appeal/">Respond to emergencies</a>
        </article>
    </div>
</div>
{}
Connected chart

Partner your church

You can build a lasting relationship between your church and one of our church based partners overseas through Connected Church.

Find out more

Pray

Tearfund’s work is rooted in prayer. Get your church praying about where it’s needed the most. Click through to sign up for One Voice prayer emails and to find resources for your church.

View Resources and Sign Up

Act

We need to take action to beat poverty and injustice. This includes calling on leaders in the UK and globally to change laws and policies, and making changes in our own lives too. Click through to sign up for Tearfund Action emails and to find resources for your church.

View Resources and Sign Up

Resources

All of our resources in one handy space! Check out our Bible studies, information to help you organise a fundraiser, service outlines and other ready-to-use resources.

View Resources

Request a speaker

Inspire your church with an accredited Tearfund speaker who can share amazing stories of lives changed through our church-based partners overseas.

Book a speaker

Youth

Bible studies, activities and lesson plans to keep young people informed, inspired and involved.

See resources

Go Overseas

Come on a Tearfund Go overseas trip with a group from your church and get inspired together.

View trips

Emergency Response

When disasters strike overseas, there is often desperate need and the Church feels moved to help. Click through to support the latest emergency and sign up to the Church Leader Newsletter below to receive information and updates when they happen.

Respond to emergencies
Transparency Chart {% include 'components/charts/transparency-chart' %}
#
HTML
<div class="transparency-chart">
    <div class="transparency-chart__image" data-svg="/images/mainsite5/transparency-chart/donut.svg">
        <img src="/images/mainsite5/transparency-chart/donut.png" alt="Transparency chart">
    </div>
    <ul class="transparency-chart__legend">
        <li class="transparency-chart__legend-item transparency-chart__legend-item--disaster-response" data-id="disaster-response"><a href="#disaster-response-section">Disaster Response</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--developing-communities" data-id="developing-communities"><a href="#developing-communities-section">Developing Communities</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--global-church" data-id="global-church"><a href="#global-church-section">Enabling the global church to act</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--changing-policies" data-id="changing-policies"><a href="#changing-policies-section">Changing unjust policies</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--fundraising" data-id="fundraising"><a href="#fundraising-section">Fundraising</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--running-costs" data-id="running-costs"><a href="#running-costs-section">Support &amp; Running costs</a></li>
    </ul>
    <div class="transparency-chart__details">
        <article id="disaster-response-section" class="transparency-chart-detail transparency-chart-detail--disaster-response">
            <span class="transparency-chart-detail__spend">38p</span> 
            <h1 class="transparency-chart-detail__title">
                Responding to Disaster
            </h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="developing-communities-section" class="transparency-chart-detail transparency-chart-detail--developing-communities">
            <span class="transparency-chart-detail__spend">31p</span> 
            <h1 class="transparency-chart-detail__title">
                Developing Communities
            </h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="global-church-section" class="transparency-chart-detail transparency-chart-detail--global-church">
            <span class="transparency-chart-detail__spend">10p</span> 
            <h1 class="transparency-chart-detail__title">
                Enabling the Global Church to Act
            </h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="changing-policies-section" class="transparency-chart-detail transparency-chart-detail--changing-policies">
            <span class="transparency-chart-detail__spend">6p</span> 
            <h1 class="transparency-chart-detail__title">
                Changing unjust policies
            </h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="fundraising-section" class="transparency-chart-detail transparency-chart-detail--fundraising">
            <span class="transparency-chart-detail__spend">9p</span> 
            <h1 class="transparency-chart-detail__title">
                Fundraising
            </h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="running-costs-section" class="transparency-chart-detail transparency-chart-detail--running-costs">
            <span class="transparency-chart-detail__spend">6p</span> 
            <h1 class="transparency-chart-detail__title">
                Support &amp; Running costs
            </h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
    </div>
</div>
Twig
<div class="transparency-chart">
    <div class="transparency-chart__image" data-svg="/images/mainsite5/transparency-chart/donut.svg">
        <img src="/images/mainsite5/transparency-chart/donut.png" alt="Transparency chart">
    </div>
    <ul class="transparency-chart__legend">
        <li class="transparency-chart__legend-item transparency-chart__legend-item--disaster-response" data-id="disaster-response"><a href="#disaster-response-section">Disaster Response</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--developing-communities" data-id="developing-communities"><a href="#developing-communities-section">Developing Communities</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--global-church" data-id="global-church"><a href="#global-church-section">Enabling the global church to act</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--changing-policies" data-id="changing-policies"><a href="#changing-policies-section">Changing unjust policies</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--fundraising" data-id="fundraising"><a href="#fundraising-section">Fundraising</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--running-costs" data-id="running-costs"><a href="#running-costs-section">Support &amp; Running costs</a></li>
    </ul>
    <div class="transparency-chart__details">
        <article id="disaster-response-section" class="transparency-chart-detail transparency-chart-detail--disaster-response">
            <span class="transparency-chart-detail__spend">38p</span>
            <h1 class="transparency-chart-detail__title">Responding to Disaster</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="developing-communities-section" class="transparency-chart-detail transparency-chart-detail--developing-communities">
            <span class="transparency-chart-detail__spend">31p</span>
            <h1 class="transparency-chart-detail__title">Developing Communities</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="global-church-section" class="transparency-chart-detail transparency-chart-detail--global-church">
            <span class="transparency-chart-detail__spend">10p</span>
            <h1 class="transparency-chart-detail__title">Enabling the Global Church to Act</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="changing-policies-section" class="transparency-chart-detail transparency-chart-detail--changing-policies">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Changing unjust policies</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="fundraising-section" class="transparency-chart-detail transparency-chart-detail--fundraising">
            <span class="transparency-chart-detail__spend">9p</span>
            <h1 class="transparency-chart-detail__title">Fundraising</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="running-costs-section" class="transparency-chart-detail transparency-chart-detail--running-costs">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Support &amp; Running costs</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
    </div>
</div>
{}
Transparency chart
38p

Responding to Disaster

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

31p

Developing Communities

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

10p

Enabling the Global Church to Act

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

6p

Changing unjust policies

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

9p

Fundraising

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

6p

Support & Running costs

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

Poster Maker
#
Poster Maker {% include 'components/poster-maker/poster-maker' %}
#
HTML
<a href="#" class="button show-lightbox" data-lightbox="poster">Poster maker</a> 
<div class="lightbox lightbox--full" data-lightbox="poster" data-class="full">
    <a href="#" class="lightbox__close lightbox__close--icon"></a>

    <div class="inner">
        <h1>
            Poster maker
        </h1>
        <div class="cakes-poster inner"></div>
    </div>
</div>
Twig
<a href="#" class="button show-lightbox" data-lightbox="poster">{{ poster_button }}</a>

<div class="lightbox lightbox--full"  data-lightbox="poster" data-class="full">
	<a href="#" class="lightbox__close lightbox__close--icon"></a>
	<div class="inner">
		<h1>Poster maker</h1>
		<div class="cakes-poster inner"></div>
	</div>		
</div>
{
    "poster_button": "Poster maker"
}
Poster maker
Carousel
#
Carousel {% include 'components/carousel/carousel' %}
#
HTML
<div class="inner">
    <div class="carousel ">
        <div class="carousel__tiles">
            <div class="carousel__tile">
                <!-- START CAROUSEL TILE CONTENT -->
                <a href="#" class="hero-summary">
                    <picture >
                        <source media="(min-width: 647px)" srcset="">
                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                <img src="http://placehold.it/400x300" alt="">
                            </picture>
                            <div class="hero-summary__card">
                                <h2 class="hero-summary-title">
                                    Title
                                </h2>
                                <p>A short summary text block goes in here to give more information about this section.</p>
                                <div class="hero-summary-link" href="#">See more</div>
                            </div>
                        </a>
                        <!-- END CAROUSEL TILE CONTENT -->
                    </div>
                    <div class="carousel__tile">
                        <!-- START CAROUSEL TILE CONTENT -->
                        <a href="#" class="hero-summary">
                            <picture >
                                <source media="(min-width: 647px)" srcset="">
                                    <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                        <img src="http://placehold.it/400x300" alt="">
                                    </picture>
                                    <div class="hero-summary__card">
                                        <h2 class="hero-summary-title">
                                            Title
                                        </h2>
                                        <p>A short summary text block goes in here to give more information about this section.</p>
                                        <div class="hero-summary-link" href="#">See more</div>
                                    </div>
                                </a>
                                <!-- END CAROUSEL TILE CONTENT -->
                            </div>
                            <div class="carousel__tile">
                                <!-- START CAROUSEL TILE CONTENT -->
                                <a href="#" class="hero-summary">
                                    <picture >
                                        <source media="(min-width: 647px)" srcset="">
                                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                <img src="http://placehold.it/400x300" alt="">
                                            </picture>
                                            <div class="hero-summary__card">
                                                <h2 class="hero-summary-title">
                                                    Title
                                                </h2>
                                                <p>A short summary text block goes in here to give more information about this section.</p>
                                                <div class="hero-summary-link" href="#">See more</div>
                                            </div>
                                        </a>
                                        <!-- END CAROUSEL TILE CONTENT -->
                                    </div>
                                    <div class="carousel__tile">
                                        <!-- START CAROUSEL TILE CONTENT -->
                                        <a href="#" class="hero-summary">
                                            <picture >
                                                <source media="(min-width: 647px)" srcset="">
                                                    <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                        <img src="http://placehold.it/400x300" alt="">
                                                    </picture>
                                                    <div class="hero-summary__card">
                                                        <h2 class="hero-summary-title">
                                                            Title
                                                        </h2>
                                                        <p>A short summary text block goes in here to give more information about this section.</p>
                                                        <div class="hero-summary-link" href="#">See more</div>
                                                    </div>
                                                </a>
                                                <!-- END CAROUSEL TILE CONTENT -->
                                            </div>
                                            <div class="carousel__tile">
                                                <!-- START CAROUSEL TILE CONTENT -->
                                                <a href="#" class="hero-summary">
                                                    <picture >
                                                        <source media="(min-width: 647px)" srcset="">
                                                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                                <img src="http://placehold.it/400x300" alt="">
                                                            </picture>
                                                            <div class="hero-summary__card">
                                                                <h2 class="hero-summary-title">
                                                                    Title
                                                                </h2>
                                                                <p>A short summary text block goes in here to give more information about this section.</p>
                                                                <div class="hero-summary-link" href="#">See more</div>
                                                            </div>
                                                        </a>
                                                        <!-- END CAROUSEL TILE CONTENT -->
                                                    </div>
                                                    <div class="carousel__tile">
                                                        <!-- START CAROUSEL TILE CONTENT -->
                                                        <a href="#" class="hero-summary">
                                                            <picture >
                                                                <source media="(min-width: 647px)" srcset="">
                                                                    <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                                        <img src="http://placehold.it/400x300" alt="">
                                                                    </picture>
                                                                    <div class="hero-summary__card">
                                                                        <h2 class="hero-summary-title">
                                                                            Title
                                                                        </h2>
                                                                        <p>A short summary text block goes in here to give more information about this section.</p>
                                                                        <div class="hero-summary-link" href="#">See more</div>
                                                                    </div>
                                                                </a>
                                                                <!-- END CAROUSEL TILE CONTENT -->
                                                            </div>
                                                            <div class="carousel__tile">
                                                                <!-- START CAROUSEL TILE CONTENT -->
                                                                <a href="#" class="hero-summary">
                                                                    <picture >
                                                                        <source media="(min-width: 647px)" srcset="">
                                                                            <source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
                                                                                <img src="http://placehold.it/400x300" alt="">
                                                                            </picture>
                                                                            <div class="hero-summary__card">
                                                                                <h2 class="hero-summary-title">
                                                                                    Title
                                                                                </h2>
                                                                                <p>A short summary text block goes in here to give more information about this section.</p>
                                                                                <div class="hero-summary-link" href="#">See more</div>
                                                                            </div>
                                                                        </a>
                                                                        <!-- END CAROUSEL TILE CONTENT -->
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
Twig
<div class="inner">
	<div class="carousel {% if carousel_colour %} {{ carousel_colour }} {% endif %} {% if carousel_single %} carousel--single{% endif %}">
		<div class="carousel__tiles">
			{% for item in carousel_items %}
				<div class="carousel__tile">
					{% if carousel_single %}

						<div class="carousel__tile--content">
							<h2>{{ item.title }} <span>{{ item.sub_title }}</span></h2>
							<a href="#" class="secondary-button desktop-only">Read more</a>
						</div>
						<div class="carousel__tile--image">
							
							{% if item.video %}

								<video autoplay="autoplay" muted loop>
								  <source src="{{ item.video }}" type="video/mp4">
								  <source src="{{ item.video }}" type="video/ogg">
								  <source src="{{ item.video }}" type="video/webm">
								  Your browser does not support HTML5 video.
								</video>

							{% else %}

								<picture class="parralax-up image-quote__image-{{ image.position }}">
									
								  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
								 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
								 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
								</picture>

							{% endif %}

							<a href="#" class="secondary-button mobile-only">Read more</a>
						</div>

					{% else %}
						<!-- START CAROUSEL TILE CONTENT -->
						<a href="{{ item.url }}" class="hero-summary">

							<picture >
								
							  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
							 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
							 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
							</picture>

							<div class="hero-summary__card">
								<h2 class="hero-summary-title">{{ item.title }}</h2>
								<p>{{ item.summary }}</p>
								<div class="hero-summary-link" href="{{ item.url }}">{{ item.read_more_text }}</div>
							</div>
						</a>
						<!-- END CAROUSEL TILE CONTENT -->
					{% endif %}
				</div>
			{% endfor %}
		</div>
	</div>
</div>
{
    "carousel_items": {
        "0": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "1": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "2": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "3": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "4": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "5": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        },
        "6": {
            "title": "Title",
            "summary": "A short summary text block goes in here to give more information about this section.",
            "read_more_text": "See more",
            "url": "#",
            "mobile_image": "http:\/\/placehold.it\/400x300",
            "dekstop_image": "http:\/\/placehold.it\/400x300"
        }
    }
}
Carousel Grey {% include 'components/carousel/carousel~grey' %}
#
HTML
<div class="inner">
    <div class="carousel carousel--grey ">
        <div class="carousel__tiles">
            <div class="carousel__tile">
                <!-- START CAROUSEL TILE CONTENT -->
                <a href="#" class="hero-summary">
                    <picture >
                        <source media="(min-width: 647px)" srcset="">
                            <source media="(min-width: 375px)" srcset="" alt="">
                                <img src="" alt="">
                            </picture>
                            <div class="hero-summary__card">
                                <h2 class="hero-summary-title">
                                    Title
                                </h2>
                                <p></p>
                                <div class="hero-summary-link" href="#">Read more</div>
                            </div>
                        </a>
                        <!-- END CAROUSEL TILE CONTENT -->
                    </div>
                    <div class="carousel__tile">
                        <!-- START CAROUSEL TILE CONTENT -->
                        <a href="#" class="hero-summary">
                            <picture >
                                <source media="(min-width: 647px)" srcset="">
                                    <source media="(min-width: 375px)" srcset="" alt="">
                                        <img src="" alt="">
                                    </picture>
                                    <div class="hero-summary__card">
                                        <h2 class="hero-summary-title">
                                            Title
                                        </h2>
                                        <p></p>
                                        <div class="hero-summary-link" href="#">Read more</div>
                                    </div>
                                </a>
                                <!-- END CAROUSEL TILE CONTENT -->
                            </div>
                            <div class="carousel__tile">
                                <!-- START CAROUSEL TILE CONTENT -->
                                <a href="#" class="hero-summary">
                                    <picture >
                                        <source media="(min-width: 647px)" srcset="">
                                            <source media="(min-width: 375px)" srcset="" alt="">
                                                <img src="" alt="">
                                            </picture>
                                            <div class="hero-summary__card">
                                                <h2 class="hero-summary-title">
                                                    Title
                                                </h2>
                                                <p></p>
                                                <div class="hero-summary-link" href="#">Read more</div>
                                            </div>
                                        </a>
                                        <!-- END CAROUSEL TILE CONTENT -->
                                    </div>
                                </div>
                            </div>
                        </div>
Twig
<div class="inner">
	<div class="carousel {% if carousel_colour %} {{ carousel_colour }} {% endif %} {% if carousel_single %} carousel--single{% endif %}">
		<div class="carousel__tiles">
			{% for item in carousel_items %}
				<div class="carousel__tile">
					{% if carousel_single %}

						<div class="carousel__tile--content">
							<h2>{{ item.title }} <span>{{ item.sub_title }}</span></h2>
							<a href="#" class="secondary-button desktop-only">Read more</a>
						</div>
						<div class="carousel__tile--image">
							
							{% if item.video %}

								<video autoplay="autoplay" muted loop>
								  <source src="{{ item.video }}" type="video/mp4">
								  <source src="{{ item.video }}" type="video/ogg">
								  <source src="{{ item.video }}" type="video/webm">
								  Your browser does not support HTML5 video.
								</video>

							{% else %}

								<picture class="parralax-up image-quote__image-{{ image.position }}">
									
								  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
								 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
								 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
								</picture>

							{% endif %}

							<a href="#" class="secondary-button mobile-only">Read more</a>
						</div>

					{% else %}
						<!-- START CAROUSEL TILE CONTENT -->
						<a href="{{ item.url }}" class="hero-summary">

							<picture >
								
							  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
							 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
							 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
							</picture>

							<div class="hero-summary__card">
								<h2 class="hero-summary-title">{{ item.title }}</h2>
								<p>{{ item.summary }}</p>
								<div class="hero-summary-link" href="{{ item.url }}">{{ item.read_more_text }}</div>
							</div>
						</a>
						<!-- END CAROUSEL TILE CONTENT -->
					{% endif %}
				</div>
			{% endfor %}
		</div>
	</div>
</div>
{
    "carousel_items": {
        "0": {
            "title": "Title",
            "read_more_text": "Read more",
            "url": "#",
            "image": "\/images\/mainsite5\/c19\/TheBIggerPicture_Thumbnail_Mobile.jpg"
        },
        "1": {
            "title": "Title",
            "read_more_text": "Read more",
            "url": "#",
            "image": "\/images\/mainsite5\/c19\/MumtazAndBeenish_Thumbnail.jpg"
        },
        "2": {
            "title": "Title",
            "read_more_text": "Read more",
            "url": "#",
            "image": "\/images\/mainsite5\/c19\/MumtazAndBeenish_Thumbnail Copy.jpg"
        }
    },
    "carousel_colour": "carousel--grey"
}
Carousel Single {% include 'components/carousel/carousel~single' %}
#
HTML
<div class="inner">
    <div class="carousel carousel--single">
        <div class="carousel__tiles">
            <div class="carousel__tile">
                <div class="carousel__tile--content">
                    <h2>
                        It starts with a sewing machine <span>Dorcas&#039; story</span>
                    </h2>
                    <a href="#" class="secondary-button desktop-only">Read more</a>

                </div>
                <div class="carousel__tile--image">
                    <picture class="parralax-up image-quote__image-">
                        <source media="(min-width: 647px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg">
                            <source media="(min-width: 375px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg" alt="">
                                <img src="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg" alt="">
                            </picture>
                            <a href="#" class="secondary-button mobile-only">Read more</a>

                        </div>
                    </div>
                    <div class="carousel__tile">
                        <div class="carousel__tile--content">
                            <h2>
                                It starts with a tree <span>Dorcas&#039; story</span>
                            </h2>
                            <a href="#" class="secondary-button desktop-only">Read more</a>

                        </div>
                        <div class="carousel__tile--image">
                            <picture class="parralax-up image-quote__image-">
                                <source media="(min-width: 647px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg">
                                    <source media="(min-width: 375px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg" alt="">
                                        <img src="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg" alt="">
                                    </picture>
                                    <a href="#" class="secondary-button mobile-only">Read more</a>

                                </div>
                            </div>
                            <div class="carousel__tile">
                                <div class="carousel__tile--content">
                                    <h2>
                                        It starts with a chicken <span>Joys story</span>
                                    </h2>
                                    <a href="#" class="secondary-button desktop-only">Read more</a>

                                </div>
                                <div class="carousel__tile--image">
                                    <video autoplay="autoplay" muted loop>
                                        <source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/mp4">
                                            <source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/ogg">
                                                <source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/webm">
                                                    Your browser does not support HTML5 video.

                                                </video>
                                                <a href="#" class="secondary-button mobile-only">Read more</a>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
Twig
<div class="inner">
	<div class="carousel {% if carousel_colour %} {{ carousel_colour }} {% endif %} {% if carousel_single %} carousel--single{% endif %}">
		<div class="carousel__tiles">
			{% for item in carousel_items %}
				<div class="carousel__tile">
					{% if carousel_single %}

						<div class="carousel__tile--content">
							<h2>{{ item.title }} <span>{{ item.sub_title }}</span></h2>
							<a href="#" class="secondary-button desktop-only">Read more</a>
						</div>
						<div class="carousel__tile--image">
							
							{% if item.video %}

								<video autoplay="autoplay" muted loop>
								  <source src="{{ item.video }}" type="video/mp4">
								  <source src="{{ item.video }}" type="video/ogg">
								  <source src="{{ item.video }}" type="video/webm">
								  Your browser does not support HTML5 video.
								</video>

							{% else %}

								<picture class="parralax-up image-quote__image-{{ image.position }}">
									
								  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
								 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
								 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
								</picture>

							{% endif %}

							<a href="#" class="secondary-button mobile-only">Read more</a>
						</div>

					{% else %}
						<!-- START CAROUSEL TILE CONTENT -->
						<a href="{{ item.url }}" class="hero-summary">

							<picture >
								
							  	<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
							 	<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
							 	<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
							</picture>

							<div class="hero-summary__card">
								<h2 class="hero-summary-title">{{ item.title }}</h2>
								<p>{{ item.summary }}</p>
								<div class="hero-summary-link" href="{{ item.url }}">{{ item.read_more_text }}</div>
							</div>
						</a>
						<!-- END CAROUSEL TILE CONTENT -->
					{% endif %}
				</div>
			{% endfor %}
		</div>
	</div>
</div>
{
    "carousel_items": {
        "0": {
            "title": "It starts with a sewing machine",
            "read_more_text": "Read more",
            "sub_title": "Dorcas' story",
            "url": "#",
            "desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg",
            "mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg"
        },
        "1": {
            "title": "It starts with a tree",
            "read_more_text": "Read more",
            "sub_title": "Dorcas' story",
            "url": "#",
            "desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg",
            "mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg"
        },
        "2": {
            "title": "It starts with a chicken",
            "read_more_text": "Read more",
            "sub_title": "Joys story",
            "url": "#",
            "desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Joy_Chicken_Desktop.jpg",
            "mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Joy_Chicken_Desktop.jpg",
            "video": "\/images\/mainsite5\/videos\/mainsite5\/ChickenVideo_Desktop_1080px-compress.mp4"
        }
    },
    "carousel_single": true
}
Banners
#
Banner Featured Half Open Sans Jubilee {% include 'components/banners/banner~featured-half-open-sans-jubilee' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured full-banner--jubilee-sub"
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner--featured-panel">
            <div class="full-banner__content-wrapper full-banner--content-top full-banner--content-top-mobile">
                <!-- RESPONSIVE CONTAINER -->
                <div class="full-banner--content-left">
                    <!-- CONTENT START -->
                    <div class="full-banner__content ">
                        <!-- If author header -->
                        <h1 class="full-banner__title full-banner__title--open-sans">
                            PLAY YOUR PART
                        </h1>
                        <p>To beat poverty and injustice, we need to tackle climate change.</p>
                        <!-- Buttons -->
                        <div class="full-banner__buttons">
<a href="#" class="button">Act today</a>
</div>
                        <!-- If article has author -->
                        <!-- If sharing is on -->
                        <!-- If is filter banner -->
                    </div>
                    <!-- CONTENT END -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- <div class="reveal reveal--green">
<div class="inner">
    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a> 
    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
</p>
    </div>
</div>
</div>
-->
Twig
<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->
{
    "banner_title": "PLAY YOUR PART",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_content_side": "left",
    "banner_content_position": "top",
    "banner_content_position_mobile": "bottom",
    "banner_subtitle": "To beat poverty and injustice, we need to tackle climate change.",
    "banner_button_one": "Act today",
    "banner_button_url_one": "#",
    "banner_font": "open-sans",
    "banner_jubilee": true
}
Banner Filter {% include 'components/banners/banner~filter' %}
#
HTML
<div class="full-banner full-banner--filter "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title full-banner__title--small">
                    FILTERED BY: GENDER
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>

                <!-- CONTENT END -->
            </div>
        </div>
    </div>
</div>
<!-- <div class="reveal reveal--green">
<div class="inner">
    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a> 
    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
</p>
    </div>
</div>
</div>
-->
Twig
<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->
{
    "banner_title": "FILTERED BY: GENDER",
    "banner_title_small": true,
    "banner_filter": true
}

FILTERED BY: GENDER

< Back to previous page
Banner Article Background Image With Byline Image Sharing Tags {% include 'components/banners/banner~article-background-image-with-byline-image-sharing-tags' %}
#
HTML
<div class="full-banner full-banner--image "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title full-banner__title--small">
                    ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES
                </h1>
                <!-- Buttons -->
                <div class="article-summary-details__tags">
                    <div class="article-summary-details__tag">
One
</div>
                    <div class="article-summary-details__tag">
Two
</div>
                    <div class="article-summary-details__tag">
Three
</div>
                </div>
                <!-- If article has author -->
                <div class="article-byline ">
                    <div class="article-byline__avatar circular-image">
                        <img class="article-byline__avatar-image" src="http://placehold.it/200x200">
                    </div>
                    <div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
                    <time datetime="2013-04-06">6 April 2013</time>
                </div>
                <!-- If sharing is on -->
                <div class="inline-share-buttons inline-share-buttons--article-header">
<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a> <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
</div>
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </div>
        </div>
    </div>
</div>
<!-- <div class="reveal reveal--green">
<div class="inner">
    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a> 
    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
</p>
    </div>
</div>
</div>
-->
Twig
<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
		 	<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
		</picture>

	{% endif %}

	{% if banner_video %}
		<div class="full-video">
			<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
				<source src="{{banner_video_mp4}}" type="video/mp4">
				<source src="{{banner_video_ogg}}" type="video/ogg">
				<source src="{{banner_video_webm}}" type="video/webm">
			</video>
		</div>
	{% endif %}

	{% if scalable_banner %}
	<div class="scalable_banner__content-container">
	{% endif %}

		<div class="inner">
			{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
				<div class="full-banner__content-wrapper
				{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
				{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
					{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
						<!-- CONTENT START -->
						<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">

							<!-- If author header -->
							{% if banner_author_avatar %}
								<div class="article-byline__avatar circular-image">
									<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
								</div>
							{% endif %}

							{% if banner_logo %}
								<div class="community-fundraising-banner__logo"></div>
							{% endif %}

							<h1 class="full-banner__title 
								{% if banner_title_small %}full-banner__title--small{% endif %}
								{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
							{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}

							<!-- Buttons -->
							{% if banner_button_one %}
								<div class="full-banner__buttons">
									{% if banner_button_one %}
										<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
									{% endif %}
									{% if banner_button_two %}
										<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
									{% endif %}
								</div>
							{% endif %}

							{% if banner_tags %}

								<div class="article-summary-details__tags">
									{% for tag in banner_tags %}
										<div class="article-summary-details__tag">
											{{ tag }}
										</div>
									{% endfor %}
								</div>

							{% endif %}

							<!-- If article has author -->
							{% if banner_author %}
								<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">

									{% if banner_author_image %}
										<div class="article-byline__avatar circular-image">
											<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
										</div>
									{% endif %}

									<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
						   			<time datetime="2013-04-06">6 April 2013</time>
								</div>
							{% endif %}

							<!-- If sharing is on -->
							{% if banner_sharing %}
								<div class="inline-share-buttons inline-share-buttons--article-header">
									<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
								    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
								</div>
							{% endif %}

							<!-- If is filter banner -->
							{% if banner_filter %}
								<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>
							{% endif %}
						{% if banner_content_side %}</div>{% endif %}
						<!-- CONTENT END -->
					</div>
				</div>
				{% if banner_gvt %}
					{% include 'components/gvt/trip-picker' %}
				{% endif %}
			{% if banner_featured %}</div>{% endif %}
		</div>

	{% if scalable_banner %}
	</div>
	{% endif %}
</div>

<!-- <div class="reveal reveal--green">
	<div class="inner">
	    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>

	    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
	        <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
			</p>
	    </div>
	</div>
</div> -->
{
    "banner_title": "ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES",
    "banner_title_small": true,
    "banner_author": "Author Name",
    "banner_read_time": "4",
    "banner_date": "6 April 2013",
    "banner_author_image": "http:\/\/placehold.it\/200x200",
    "banner_tags": {
        "1": "One",
        "2": "Two",
        "3": "Three"
    },
    "banner_sharing": true,
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg"
}

ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES

One
Two
Three
Banner Featured Half Open Sans {% include 'components/banners/banner~featured-half-open-sans' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner--featured-panel">
            <div class="full-banner__content-wrapper full-banner--content-bottom full-banner--content-bottom-mobile">
                <!-- RESPONSIVE CONTAINER -->
                <!-- CONTENT START -->
                <div class="full-banner__content ">
                    <!-- If author header -->
                    <h1 class="full-banner__title full-banner__title--open-sans">
                        The world’s focus on Central Africa
                    </h1>
                    <p>Where the need is greatest</p>
                    <!-- Buttons -->
                    <div class="full-banner__buttons">
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
                    <!-- If article has author -->
                    <!-- If sharing is on -->
                    <!-- If is filter banner -->
                    <!-- CONTENT END -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- <div class="reveal reveal--green">
<div class="inner">
    <a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a> 
    <div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
</p>
    </div>
</div>
</div>
-->
Twig
<div class="full-banner 
	{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
	{% if banner_filter %}full-banner--filter {% endif %}
	{% if banner_background_image %}full-banner--image {% endif %}
	{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
	{% if banner_featured %} full-banner--featured{% endif %}
	{% if banner_size %} full-banner--{{banner_size}}{% endif %}
	{% if banner_video %} full-banner--video{% endif %} 
	{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
	{% if giving_page %} full-banner--giving{% endif %}
	{% if c19_page %} full-banner--c19{% endif %}
	{% if scalable_banner %} scalable-banner {% endif %}"
	{% if banner_background_image %}
		data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
	{% endif %}
>

	{% if scalable_banner %}

		<picture class="scalable-banner__image">
			<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
			<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
		  	<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
		  	<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile