Giving
#
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 {% 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

A monthly gift of £5 could help someone like Anastasia support her family. Please give now.

Next
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
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 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 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