<div class="c-donate-header c-donate-header--full c-donate-header--right">
<div class="o-donate-header-inner">
<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 ">Make a monthly donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="enter amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate monthly</a>
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title ">Make a one-off donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-donate-header__image-placement">
<div class="c-donate-header__image c-donate-header__image--small" style="background-image: url(/images/mainsite5/donate-header/bg-full-right-small-1.jpg)"></div>
<div class="c-donate-header__image c-donate-header__image--large" style="background-image: url(/images/mainsite5/donate-header/bg-full-right-1.jpg)"></div>
</div>
</div>
</div>
<div class="c-donate-header c-donate-header--full c-donate-header--right">
<div class="o-donate-header-inner">
<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__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>
{
"backgroundImage": "\/images\/mainsite5\/donate-header\/bg-full-right-1.jpg",
"backgroundImageSmall": "\/images\/mainsite5\/donate-header\/bg-full-right-small-1.jpg",
"donationWidget": {
"id": "right_monthly_strong_priority_no_handles_full",
"allHandles": false,
"donate_widget_title": "Make a monthly donation",
"donate_widget_intro": "Become a regular giver today and make a world of difference",
"donate_widget_placeholder": "enter amount",
"donate_widget_button": "Donate monthly",
"flip_link": true,
"alt_form": true,
"alt_id": "right_alt_monthly_strong_priority_no_handles_full",
"alt_freq_handles": false,
"alt_donate_widget_title": "Make a one-off donation",
"alt_donate_widget_intro": "Become a regular giver today and make a world of difference",
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": true
}
}