Giving Widgets
Widget With Image {% include 'components/giving-widgets/widget-with-image' %}
HTML
<div class="giving-widget-stacked">
<div class="giving-widget-stacked__header">
<h2 class="mobile-only">Double your donation</h2>
<img src="/images/mainsite5/ukaidmatchlogo.jpg" />
<h2 class="desktop-only">Double your donation</h2>
<p class="clearfix">Donate now and have your gift doubled by the UK government (up to £2 million).</p>
</div>
<div class="fund-selector-field">
<div class="option-selector">
<div class="option-selector__item checked">
<input class="option-selector__input" id="radio17" name="radio6" type="radio" checked="checked">
<label class="option-selector__label" data-amount="42" for="radio17">£42</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio18" name="radio6" type="radio">
<label class="option-selector__label" data-amount="70" for="radio18">£70</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio19" name="radio6" type="radio">
<label class="option-selector__label" data-amount="97" for="radio19">£97</label>
</div>
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio20" name="radio6" type="radio">
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" placeholder="other">
</div>
</div>
</div>
</div>
<p class="dfid-giving-handles"><strong>£42 doubled could provide waste collection for two families.</p>
<div class="dfid-table">
<div class="dfid-table__amount">
<div class="dfid-table__number">£<span class="number">35</span></div>
<div class="dfid-table__description">Your gift</div>
</div>
<div class="dfid-table__amount">
<div class="dfid-table__number"><span class="yellow">+</span> £<span class="number">35</span></div>
<div class="dfid-table__description">matched by the UK Government</div>
</div>
<div class="dfid-table__total">
<div class="dfid-table__number"><span class="yellow">= </span>£<span class="number">70</span></div>
</div>
</div>
<a class="button" href="#">Donate now</a>
</div>
Twig
<div class="giving-widget-stacked">
<div class="giving-widget-stacked__header">
<h2 class="mobile-only">Double your donation</h2>
<img src="/images/mainsite5/ukaidmatchlogo.jpg" />
<h2 class="desktop-only">Double your donation</h2>
<p class="clearfix">Donate now and have your gift doubled by the UK government (up to £2 million).</p>
</div>
<div class="fund-selector-field">
<div class="option-selector">
<div class="option-selector__item checked">
<input class="option-selector__input" id="radio17" name="radio6" type="radio" checked="checked">
<label class="option-selector__label" data-amount="42" for="radio17">£42</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio18" name="radio6" type="radio">
<label class="option-selector__label" data-amount="70" for="radio18">£70</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio19" name="radio6" type="radio">
<label class="option-selector__label" data-amount="97" for="radio19">£97</label>
</div>
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio20" name="radio6" type="radio">
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" placeholder="other">
</div>
</div>
</div>
</div>
<p class="dfid-giving-handles"><strong>£42 doubled could provide waste collection for two families.</p>
<div class="dfid-table">
<div class="dfid-table__amount">
<div class="dfid-table__number">£<span class="number">35</span></div>
<div class="dfid-table__description">Your gift</div>
</div>
<div class="dfid-table__amount">
<div class="dfid-table__number"><span class="yellow">+</span> £<span class="number">35</span></div>
<div class="dfid-table__description">matched by the UK Government</div>
</div>
<div class="dfid-table__total">
<div class="dfid-table__number"><span class="yellow">= </span>£<span class="number">70</span></div>
</div>
</div>
<a class="button" href="#">Donate now</a>
</div>{}Double your donation
Double your donation
Donate now and have your gift doubled by the UK government (up to £2 million).
£42 doubled could provide waste collection for two families.
£35
Your gift
+ £35
matched by the UK Government
= £70
Widget Radio With Text {% include 'components/giving-widgets/widget~radio-with-text' %}
HTML
<div class="giving-widget ">
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">I want to give to</label>
<span class="fund-selector__destination">the Central African Republic</span>
<div class="fund-selector-field">
<div class="option-selector option-selector--with-text">
<div class="option-selector__item option-selector__item--">
<input class="option-selector__input" id="radio1" name="" type="radio" value="" />
<label class="option-selector__label" for="radio1">£10</label>
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
</div>
<div class="option-selector__item option-selector__item--">
<input class="option-selector__input" id="radio2" name="" type="radio" value="" />
<label class="option-selector__label" for="radio2">£20</label>
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
</div>
<div class="option-selector__item option-selector__item--">
<input class="option-selector__input" id="radio3" name="" type="radio" value="" />
<label class="option-selector__label" for="radio3">£50</label>
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
</div>
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
</div>
</div>
</div>
<!-- -->
<div class="giving-handles">
<div class="giving-handles__handle giving-handles__handle-" data-amount="">
</div>
<div class="giving-handles__handle giving-handles__handle-" data-amount="">
</div>
<div class="giving-handles__handle giving-handles__handle-" data-amount="">
</div>
</div>
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
</div>
</div>
Twig
<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">
{% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %}
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
{% if fund_selected %}
<span class="fund-selector__destination">{{ fund_selected }}</span>
{% endif %}
{% if funds %}
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
{% for fund in funds %}
<option value="{{ fund.id }}">{{ fund.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<div class="fund-selector-field">
{% if fund_input_type == 'text' %}
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% elseif fund_input_type == 'radio' %}
<div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">
{% for radio in fund_radios %}
<div class="option-selector__item option-selector__item--{{ radio.regularity }}">
<input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
<label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
{% if radio.text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
{% endfor %}
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% if fund_radios_custom_input_text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
</div>
{% endif %}
</div>
<!-- {% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %} -->
{% if fund_input_type == 'radio' %}
<div class="giving-handles">
{% for radio in fund_radios %}
<div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
{{ radio.handle }}
</div>
{% endfor %}
</div>
{% endif %}
{% if giving_options %}
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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>
{% if fund_frequency %}
<div class="payment-methods__item payment-methods__item--regularly">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
{% endif %}
</div>
{% else %}
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
{% endif %}
</div>
</div>{
"fund_selector_title": "I want to give to",
"funds": false,
"give_button_text": "Give by",
"fund_input_type": "radio",
"fund_selected": "the Central African Republic",
"fund_radios": {
"0": {
"label": "\u00a310",
"id": "radio1",
"text": "Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei."
},
"1": {
"label": "\u00a320",
"id": "radio2",
"text": "Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei."
},
"2": {
"label": "\u00a350",
"id": "radio3",
"text": "Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei."
}
},
"fund_radios_custom_input_text": "Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei."
}Widget Payment Options {% include 'components/giving-widgets/widget~payment-options' %}
HTML
<div class="giving-widget ">
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">I want to give to</label>
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
<option value="1">The greatest need</option>
<option value="2">the Central African Republic</option>
<option value="3">the South Sudan Crisis</option>
</select>
</div>
</div>
<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 field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
-->
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
</div>
</div>
</div>
Twig
<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">
{% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %}
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
{% if fund_selected %}
<span class="fund-selector__destination">{{ fund_selected }}</span>
{% endif %}
{% if funds %}
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
{% for fund in funds %}
<option value="{{ fund.id }}">{{ fund.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<div class="fund-selector-field">
{% if fund_input_type == 'text' %}
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% elseif fund_input_type == 'radio' %}
<div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">
{% for radio in fund_radios %}
<div class="option-selector__item option-selector__item--{{ radio.regularity }}">
<input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
<label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
{% if radio.text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
{% endfor %}
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% if fund_radios_custom_input_text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
</div>
{% endif %}
</div>
<!-- {% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %} -->
{% if fund_input_type == 'radio' %}
<div class="giving-handles">
{% for radio in fund_radios %}
<div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
{{ radio.handle }}
</div>
{% endfor %}
</div>
{% endif %}
{% if giving_options %}
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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>
{% if fund_frequency %}
<div class="payment-methods__item payment-methods__item--regularly">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
{% endif %}
</div>
{% else %}
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
{% endif %}
</div>
</div>{
"fund_selector_title": "I want to give to",
"funds": {
"0": {
"name": "The greatest need",
"id": 1
},
"1": {
"name": "the Central African Republic",
"id": 2
},
"2": {
"name": "the South Sudan Crisis",
"id": 3
}
},
"give_button_text": "Give by",
"fund_input_type": "text",
"giving_options": true,
"fund_frequency": true
}Widget {% include 'components/giving-widgets/widget' %}
HTML
<div class="giving-widget ">
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">I want to give to</label>
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
<option value="1">The greatest need</option>
<option value="2">the Central African Republic</option>
<option value="3">the South Sudan Crisis</option>
</select>
</div>
</div>
<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">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
</div>
</div>
Twig
<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">
{% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %}
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
{% if fund_selected %}
<span class="fund-selector__destination">{{ fund_selected }}</span>
{% endif %}
{% if funds %}
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
{% for fund in funds %}
<option value="{{ fund.id }}">{{ fund.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<div class="fund-selector-field">
{% if fund_input_type == 'text' %}
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% elseif fund_input_type == 'radio' %}
<div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">
{% for radio in fund_radios %}
<div class="option-selector__item option-selector__item--{{ radio.regularity }}">
<input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
<label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
{% if radio.text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
{% endfor %}
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% if fund_radios_custom_input_text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
</div>
{% endif %}
</div>
<!-- {% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %} -->
{% if fund_input_type == 'radio' %}
<div class="giving-handles">
{% for radio in fund_radios %}
<div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
{{ radio.handle }}
</div>
{% endfor %}
</div>
{% endif %}
{% if giving_options %}
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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>
{% if fund_frequency %}
<div class="payment-methods__item payment-methods__item--regularly">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
{% endif %}
</div>
{% else %}
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
{% endif %}
</div>
</div>{
"fund_selector_title": "I want to give to",
"funds": {
"0": {
"name": "The greatest need",
"id": 1
},
"1": {
"name": "the Central African Republic",
"id": 2
},
"2": {
"name": "the South Sudan Crisis",
"id": 3
}
},
"give_button_text": "Give by",
"fund_input_type": "text"
}Widget Radio {% include 'components/giving-widgets/widget~radio' %}
HTML
<div class="giving-widget ">
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">I want to give to</label>
<span class="fund-selector__destination">the Central African Republic</span>
<div class="fund-selector-field">
<div class="option-selector ">
<div class="option-selector__item option-selector__item--">
<input class="option-selector__input" id="radio1" name="" type="radio" value="" />
<label class="option-selector__label" for="radio1">£10</label>
</div>
<div class="option-selector__item option-selector__item--">
<input class="option-selector__input" id="radio2" name="" type="radio" value="" />
<label class="option-selector__label" for="radio2">£20</label>
</div>
<div class="option-selector__item option-selector__item--">
<input class="option-selector__input" id="radio3" name="" type="radio" value="" />
<label class="option-selector__label" for="radio3">£50</label>
</div>
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
</div>
</div>
</div>
<!-- -->
<div class="giving-handles">
<div class="giving-handles__handle giving-handles__handle-" data-amount="">
</div>
<div class="giving-handles__handle giving-handles__handle-" data-amount="">
</div>
<div class="giving-handles__handle giving-handles__handle-" data-amount="">
</div>
</div>
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
</div>
</div>
Twig
<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">
{% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %}
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
{% if fund_selected %}
<span class="fund-selector__destination">{{ fund_selected }}</span>
{% endif %}
{% if funds %}
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
{% for fund in funds %}
<option value="{{ fund.id }}">{{ fund.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<div class="fund-selector-field">
{% if fund_input_type == 'text' %}
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% elseif fund_input_type == 'radio' %}
<div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">
{% for radio in fund_radios %}
<div class="option-selector__item option-selector__item--{{ radio.regularity }}">
<input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
<label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
{% if radio.text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
{% endfor %}
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% if fund_radios_custom_input_text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
</div>
{% endif %}
</div>
<!-- {% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %} -->
{% if fund_input_type == 'radio' %}
<div class="giving-handles">
{% for radio in fund_radios %}
<div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
{{ radio.handle }}
</div>
{% endfor %}
</div>
{% endif %}
{% if giving_options %}
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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>
{% if fund_frequency %}
<div class="payment-methods__item payment-methods__item--regularly">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
{% endif %}
</div>
{% else %}
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
{% endif %}
</div>
</div>{
"fund_selector_title": "I want to give to",
"funds": false,
"give_button_text": "Give by",
"fund_input_type": "radio",
"fund_selected": "the Central African Republic",
"fund_radios": {
"0": {
"label": "\u00a310",
"id": "radio1"
},
"1": {
"label": "\u00a320",
"id": "radio2"
},
"2": {
"label": "\u00a350",
"id": "radio3"
}
}
}Widget Inline {% include 'components/giving-widgets/widget-inline' %}
HTML
<div class="giving-widget giving-widget--inline">
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<span class="fund-selector__title">DONATE NOW</span>
<div class="fund-selector-field">
<div class="option-selector">
<div class="option-selector__item">
<input class="option-selector__input" id="radio17" name="radio6" type="radio" checked="checked" />
<label class="option-selector__label" for="radio17">£10</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio18" name="radio6" type="radio" />
<label class="option-selector__label" for="radio18">£20</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio19" name="radio6" type="radio" />
<label class="option-selector__label" for="radio19">£50</label>
</div>
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio20" name="radio6" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" placeholder="other" />
</div>
</div>
</div>
</div>
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
</div>
</div>
</div>
Twig
<div class="giving-widget giving-widget--inline">
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<span class="fund-selector__title">DONATE NOW</span>
<div class="fund-selector-field">
<div class="option-selector">
<div class="option-selector__item">
<input class="option-selector__input" id="radio17" name="radio6" type="radio" checked="checked" />
<label class="option-selector__label" for="radio17">£10</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio18" name="radio6" type="radio" />
<label class="option-selector__label" for="radio18">£20</label>
</div>
<div class="option-selector__item">
<input class="option-selector__input" id="radio19" name="radio6" type="radio" />
<label class="option-selector__label" for="radio19">£50</label>
</div>
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio20" name="radio6" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" placeholder="other" />
</div>
</div>
</div>
</div>
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
</div>
</div>
</div>{}Widget Fund Selected {% include 'components/giving-widgets/widget~fund-selected' %}
HTML
<div class="giving-widget ">
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">I want to give to</label>
<span class="fund-selector__destination">the Central African Republic</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">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
</div>
</div>
Twig
<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">
{% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %}
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
{% if fund_selected %}
<span class="fund-selector__destination">{{ fund_selected }}</span>
{% endif %}
{% if funds %}
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
{% for fund in funds %}
<option value="{{ fund.id }}">{{ fund.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<div class="fund-selector-field">
{% if fund_input_type == 'text' %}
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% elseif fund_input_type == 'radio' %}
<div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">
{% for radio in fund_radios %}
<div class="option-selector__item option-selector__item--{{ radio.regularity }}">
<input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
<label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
{% if radio.text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
{% endfor %}
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% if fund_radios_custom_input_text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
</div>
{% endif %}
</div>
<!-- {% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %} -->
{% if fund_input_type == 'radio' %}
<div class="giving-handles">
{% for radio in fund_radios %}
<div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
{{ radio.handle }}
</div>
{% endfor %}
</div>
{% endif %}
{% if giving_options %}
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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>
{% if fund_frequency %}
<div class="payment-methods__item payment-methods__item--regularly">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
{% endif %}
</div>
{% else %}
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
{% endif %}
</div>
</div>{
"fund_selector_title": "I want to give to",
"funds": false,
"give_button_text": "Give by",
"fund_input_type": "text",
"fund_selected": "the Central African Republic"
}Widget Payment Options Handles {% include 'components/giving-widgets/widget~payment-options-handles' %}
HTML
<div class="giving-widget ">
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title"> </label>
<span class="fund-selector__destination">Your gift is powerful in God's hand.</span>
<div class="fund-selector-field">
<div class="option-selector ">
<div class="option-selector__item option-selector__item--once">
<input class="option-selector__input" id="radio41" name="once" type="radio" value="10" checked="checked"/>
<label class="option-selector__label" for="radio41">£10</label>
</div>
<div class="option-selector__item option-selector__item--once">
<input class="option-selector__input" id="radio42" name="once" type="radio" value="20" />
<label class="option-selector__label" for="radio42">£20</label>
</div>
<div class="option-selector__item option-selector__item--once">
<input class="option-selector__input" id="radio43" name="once" type="radio" value="50" />
<label class="option-selector__label" for="radio43">£50</label>
</div>
<div class="option-selector__item option-selector__item--regular">
<input class="option-selector__input" id="radio44" name="regular" type="radio" value="11" checked="checked"/>
<label class="option-selector__label" for="radio44">£11</label>
</div>
<div class="option-selector__item option-selector__item--regular">
<input class="option-selector__input" id="radio45" name="regular" type="radio" value="21" />
<label class="option-selector__label" for="radio45">£21</label>
</div>
<div class="option-selector__item option-selector__item--regular">
<input class="option-selector__input" id="radio46" name="regular" type="radio" value="51" />
<label class="option-selector__label" for="radio46">£51</label>
</div>
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
</div>
</div>
</div>
<!-- <div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
-->
<div class="giving-handles">
<div class="giving-handles__handle giving-handles__handle-once" data-amount="10">
£10 could do this that and that
</div>
<div class="giving-handles__handle giving-handles__handle-once" data-amount="20">
£20 could do this that and that
</div>
<div class="giving-handles__handle giving-handles__handle-once" data-amount="50">
£50 could do this that and that
</div>
<div class="giving-handles__handle giving-handles__handle-regular" data-amount="11">
£10 regularly could do this that and that
</div>
<div class="giving-handles__handle giving-handles__handle-regular" data-amount="21">
£20 regularly could do this that and that
</div>
<div class="giving-handles__handle giving-handles__handle-regular" data-amount="51">
£50 regularly could do this that and that
</div>
</div>
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
</div>
</div>
</div>
Twig
<div class="giving-widget {% if giving_page %} giving-widget--giving-page{% endif %}">
{% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %}
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">{{ fund_selector_title }}</label>
{% if fund_selected %}
<span class="fund-selector__destination">{{ fund_selected }}</span>
{% endif %}
{% if funds %}
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
{% for fund in funds %}
<option value="{{ fund.id }}">{{ fund.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<div class="fund-selector-field">
{% if fund_input_type == 'text' %}
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% elseif fund_input_type == 'radio' %}
<div class="option-selector {% if fund_radios[0].text %}option-selector--with-text{% endif %}">
{% for radio in fund_radios %}
<div class="option-selector__item option-selector__item--{{ radio.regularity }}">
<input class="option-selector__input" id="{{ radio.id }}" name="{{ radio.regularity }}" type="radio" value="{{ radio.amount }}" {% if radio.checked %} checked="checked"{% endif %}/>
<label class="option-selector__label" for="{{ radio.id }}">{{ radio.label }}</label>
{% if radio.text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
{% endfor %}
<div class="option-selector__item option-selector__item--with-input">
<input class="option-selector__input" id="radio10" name="radio3" type="radio" />
<div class="custom-input custom-input--currency">
<input class="custom-input__input" type="text" />
</div>
{% if fund_radios_custom_input_text %}
<span class="option-selector__text">Vivamus egestas mi sagittis lacus tempus blandit. Duis et euismod niba blas mei.</span>
{% endif %}
</div>
</div>
{% endif %}
</div>
<!-- {% if fund_frequency %}
<div class="fund-selector-field field-set--tabbed-radio payment-frequency">
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio1" name="radio" type="radio" checked="checked" data-frequency="once" />
<label class="field-set__label field-set__label--radio" for="radio1">Once</label>
</div>
<div class="form-small-col-6">
<input class="field-set__input field-set__input--radio" id="radio2" name="radio" type="radio" data-frequency="regularly" />
<label class="field-set__label field-set__label--radio" for="radio2">Regularly</label>
</div>
</div>
{% endif %} -->
{% if fund_input_type == 'radio' %}
<div class="giving-handles">
{% for radio in fund_radios %}
<div class="giving-handles__handle giving-handles__handle-{{ radio.regularity }}" data-amount="{{ radio.amount }}">
{{ radio.handle }}
</div>
{% endfor %}
</div>
{% endif %}
{% if giving_options %}
<div class="fund-selector-field payment-methods">
<div class="payment-methods__item payment-methods__item--once">
<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>
{% if fund_frequency %}
<div class="payment-methods__item payment-methods__item--regularly">
<div class="payment-methods__button">
<button class="button pay-by-direct-debit"><span>Pay by Direct Debit</span></button>
</div>
</div>
{% endif %}
</div>
{% else %}
<div class="fund-selector-field">
<button class="button pay-by-card"><span>Give by</span></button>
<a class="secondary-giving-widget-ask" href="#">or make one off gift</a>
</div>
{% endif %}
</div>
</div>{
"fund_selector_title": " ",
"funds": false,
"give_button_text": "Give by",
"fund_input_type": "radio",
"fund_selected": "Your gift is powerful in God's hand.",
"fund_radios": {
"0": {
"label": "\u00a310",
"amount": "10",
"id": "radio41",
"regularity": "once",
"handle": "\u00a310 could do this that and that",
"checked": true
},
"1": {
"label": "\u00a320",
"amount": "20",
"id": "radio42",
"regularity": "once",
"handle": "\u00a320 could do this that and that"
},
"2": {
"label": "\u00a350",
"amount": "50",
"id": "radio43",
"regularity": "once",
"handle": "\u00a350 could do this that and that"
},
"3": {
"label": "\u00a311",
"amount": "11",
"id": "radio44",
"regularity": "regular",
"handle": "\u00a310 regularly could do this that and that",
"checked": true
},
"4": {
"label": "\u00a321",
"amount": "21",
"id": "radio45",
"regularity": "regular",
"handle": "\u00a320 regularly could do this that and that"
},
"5": {
"label": "\u00a351",
"amount": "51",
"id": "radio46",
"regularity": "regular",
"handle": "\u00a350 regularly could do this that and that"
}
},
"giving_options": true,
"fund_frequency": true
}Widget2 {% include 'components/giving-widgets/widget2' %}
HTML
<div class="giving-widget" data-image-id="example-image-2" data-text-id="example-text-2">
<div class="destination-info">
<div id="example-image-2" class="destination-info__image" data-image="http://lorempixel.com/380/155"></div>
<div id="example-text-2" class="destination-info__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar.</div>
</div>
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">I want to give to</label>
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
<option data-image="http://lorempixel.com/100/100" data-text="Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar." value="1">The Greatest Need</option>
<option data-image="http://lorempixel.com/200/200" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." value="2">the Central African Republic</option>
<option data-image="http://lorempixel.com/300/300" data-text="three" value="3">the South Sudan Crisis</option>
</select>
</div>
</div>
<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">
<button class="button pay-by-card"><span>Pay by card</span></button>
</div>
</div>
</div>
Twig
<div class="giving-widget" data-image-id="example-image-2" data-text-id="example-text-2">
<div class="destination-info">
<div id="example-image-2" class="destination-info__image" data-image="http://lorempixel.com/380/155"></div>
<div id="example-text-2" class="destination-info__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar.</div>
</div>
<div class="fund-selector">
<!-- Can be a span or a label. Depends on whether or not there's a select -->
<label for="destination-select" class="fund-selector__title">I want to give to</label>
<div class="fund-selector__destinations fund-selector-field">
<div class="custom-select">
<span class="custom-select__selected-value"></span>
<select class="custom-select__input" id="destination-select">
<option data-image="http://lorempixel.com/100/100" data-text="Quisque quis tincidunt odio, ac convallis orci. Nulla elementum convallis lorem ar." value="1">The Greatest Need</option>
<option data-image="http://lorempixel.com/200/200" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." value="2">the Central African Republic</option>
<option data-image="http://lorempixel.com/300/300" data-text="three" value="3">the South Sudan Crisis</option>
</select>
</div>
</div>
<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">
<button class="button pay-by-card"><span>Pay by card</span></button>
</div>
</div>
</div>{}