<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-short c-donate-header--right">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Your donation will help over half a million people who have been left homeless</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_left_right_freq_once" class="js-donate-widget__freq-radio" name="emergency_left_right_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="emergency_left_right_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_left_right_freq_monthly" class="js-donate-widget__freq-radio" name="emergency_left_right_freq" autocomplete="off" data-frequency="monthly">
<label for="emergency_left_right_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__emergency-title-bg"></div>
</div>
<div class="c-donate-header__emergency-title-container">
<div class="c-donate-header__emergency-title-position">
<h2 class="c-donate-header__emergency-title">Rohingya refugee emergency appeal</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-short c-donate-header--right">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
{% include 'components/donate-widget/donate-widget' with donationWidget %}
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__emergency-title-bg"></div>
</div>
<div class="c-donate-header__emergency-title-container">
<div class="c-donate-header__emergency-title-position">
<h2 class="c-donate-header__emergency-title">Rohingya refugee emergency appeal</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"backgroundImage": "\/images\/mainsite5\/emergency-header\/bg-left.jpg",
"backgroundImageSmall": "\/images\/mainsite5\/emergency-header\/bg-small.jpg",
"donationWidget": {
"id": "emergency_left_right",
"allHandles": true,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Your donation will help over half a million people who have been left homeless",
"frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"amounts_monthly": [],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false
}
}
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-short c-donate-header--left">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Your donation will help over half a million people who have been left homeless</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_left_text_freq_once" class="js-donate-widget__freq-radio" name="emergency_left_text_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="emergency_left_text_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_left_text_freq_monthly" class="js-donate-widget__freq-radio" name="emergency_left_text_freq" autocomplete="off" data-frequency="monthly">
<label for="emergency_left_text_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__emergency-title-bg"></div>
</div>
<div class="c-donate-header__emergency-title-container">
<div class="c-donate-header__emergency-title-position">
<h2 class="c-donate-header__emergency-title">Rohingya refugee emergency appeal</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-short c-donate-header--left">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
{% include 'components/donate-widget/donate-widget' with donationWidget %}
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__emergency-title-bg"></div>
</div>
<div class="c-donate-header__emergency-title-container">
<div class="c-donate-header__emergency-title-position">
<h2 class="c-donate-header__emergency-title">Rohingya refugee emergency appeal</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"backgroundImage": "\/images\/mainsite5\/emergency-header\/bg-left.jpg",
"backgroundImageSmall": "\/images\/mainsite5\/emergency-header\/bg-small.jpg",
"donationWidget": {
"id": "emergency_left_text",
"allHandles": true,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Your donation will help over half a million people who have been left homeless",
"frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"amounts_monthly": [],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false
}
}
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-tall c-donate-header--right">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title c-donate-widget__title--alt">Rohingya refugee emergency appeal <span>donate now</span></h3>
<p class="c-donate-widget__intro">Your donation will help over half a million people who have been left homeless</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_right_image_freq_once" class="js-donate-widget__freq-radio" name="emergency_right_image_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="emergency_right_image_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_right_image_freq_monthly" class="js-donate-widget__freq-radio" name="emergency_right_image_freq" autocomplete="off" data-frequency="monthly">
<label for="emergency_right_image_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__image c-donate-header__image--small" style="background-image: url(/images/mainsite5/emergency-header/bg-small.jpg)"></div>
<div class="c-donate-header__image c-donate-header__image--large" style="background-image: url(/images/mainsite5/emergency-header/bg-right.jpg)"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-tall c-donate-header--right">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
{% include 'components/donate-widget/donate-widget' with donationWidget %}
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__image c-donate-header__image--small" style="background-image: url({{ backgroundImageSmall }})"></div>
<div class="c-donate-header__image c-donate-header__image--large" style="background-image: url({{ backgroundImage }})"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"backgroundImage": "\/images\/mainsite5\/emergency-header\/bg-right.jpg",
"backgroundImageSmall": "\/images\/mainsite5\/emergency-header\/bg-small.jpg",
"donationWidget": {
"id": "emergency_right_image",
"allHandles": true,
"freq_handles": true,
"otherTitle": true,
"donate_widget_title": "Rohingya refugee emergency appeal <span>donate now<\/span>",
"donate_widget_intro": "Your donation will help over half a million people who have been left homeless",
"frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"amounts_monthly": [],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false
}
}
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-tall c-donate-header--left">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title c-donate-widget__title--alt">Rohingya refugee emergency appeal <span>donate now</span></h3>
<p class="c-donate-widget__intro">Your donation will help over half a million people who have been left homeless</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_left_image_freq_once" class="js-donate-widget__freq-radio" name="emergency_left_image_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="emergency_left_image_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="emergency_left_image_freq_monthly" class="js-donate-widget__freq-radio" name="emergency_left_image_freq" autocomplete="off" data-frequency="monthly">
<label for="emergency_left_image_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__image c-donate-header__image--small" style="background-image: url(/images/mainsite5/emergency-header/bg-small.jpg)"></div>
<div class="c-donate-header__image c-donate-header__image--large" style="background-image: url(/images/mainsite5/emergency-header/bg-left.jpg)"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--emergency-tall c-donate-header--left">
<div class="c-donate-header__row">
<div class="c-donate-header__widget-container">
<div class="c-donate-header__widget">
{% include 'components/donate-widget/donate-widget' with donationWidget %}
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__row">
<div class="c-donate-header__image-row">
<div class="c-donate-header__image-container">
<div class="c-donate-header__image c-donate-header__image--small" style="background-image: url({{ backgroundImageSmall }})"></div>
<div class="c-donate-header__image c-donate-header__image--large" style="background-image: url({{ backgroundImage }})"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"backgroundImage": "\/images\/mainsite5\/emergency-header\/bg-left.jpg",
"backgroundImageSmall": "\/images\/mainsite5\/emergency-header\/bg-small.jpg",
"donationWidget": {
"id": "emergency_left_image",
"allHandles": true,
"freq_handles": true,
"otherTitle": true,
"donate_widget_title": "Rohingya refugee emergency appeal <span>donate now<\/span>",
"donate_widget_intro": "Your donation will help over half a million people who have been left homeless",
"frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"amounts_monthly": [],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false
}
}