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