Donate Header Left {% include 'components/donate-header/donate-header-left' %}
HTML
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--left">
<div class="c-donate-header__row">
<div class="c-donate-header__header">
<div class="c-donate-header__logo">
<img src="/images/mainsite5/donate-header/tf-logo.png" alt="Tearfund logo" />
</div>
<div class="c-donate-header__secure">
<img src="/images/mainsite5/donate-header/secure-mark.png" alt="Your donation is 100% secure" />
</div>
</div>
</div>
<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__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
<div class="c-donate-widget__radio">
<input type="radio" id="left_monthly_strong_priority-header_freq_monthly" class="js-donate-widget__freq-radio" name="left_monthly_strong_priority-header_freq" checked="checked" autocomplete="off" data-frequency="monthly">
<label for="left_monthly_strong_priority-header_freq_monthly">monthly</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="left_monthly_strong_priority-header_freq_once" class="js-donate-widget__freq-radio" name="left_monthly_strong_priority-header_freq" autocomplete="off" data-frequency="once">
<label for="left_monthly_strong_priority-header_freq_once">once</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
<div class="c-donate-widget__radio">
<input type="radio" id="left_monthly_strong_priority-header_amount_monthly_25" class="js-donate-widget__amount-radio" name="left_monthly_strong_priority-header_amount_monthly" checked="checked" autocomplete="off" data-amount="25">
<label for="left_monthly_strong_priority-header_amount_monthly_25">£25</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="left_monthly_strong_priority-header_amount_monthly_15" class="js-donate-widget__amount-radio" name="left_monthly_strong_priority-header_amount_monthly" autocomplete="off" data-amount="15">
<label for="left_monthly_strong_priority-header_amount_monthly_15">£15</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="left_monthly_strong_priority-header_amount_monthly_8" class="js-donate-widget__amount-radio" name="left_monthly_strong_priority-header_amount_monthly" autocomplete="off" data-amount="8">
<label for="left_monthly_strong_priority-header_amount_monthly_8">£8</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="25">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="15">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="8">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 3</p>
</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 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__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
<div class="c-donate-widget__radio">
<input type="radio" id="left_alt_monthly_strong_priority-header_freq_once" class="js-donate-widget__freq-radio" name="left_alt_monthly_strong_priority-header_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="left_alt_monthly_strong_priority-header_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="left_alt_monthly_strong_priority-header_freq_monthly" class="js-donate-widget__freq-radio" name="left_alt_monthly_strong_priority-header_freq" autocomplete="off" data-frequency="monthly">
<label for="left_alt_monthly_strong_priority-header_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
<div class="c-donate-widget__radio">
<input type="radio" id="left_alt_monthly_strong_priority-header_amount_once_200" class="js-donate-widget__amount-radio" name="left_alt_monthly_strong_priority-header_amount_once" checked="checked" autocomplete="off" data-amount="200">
<label for="left_alt_monthly_strong_priority-header_amount_once_200">£200</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="left_alt_monthly_strong_priority-header_amount_once_125" class="js-donate-widget__amount-radio" name="left_alt_monthly_strong_priority-header_amount_once" autocomplete="off" data-amount="125">
<label for="left_alt_monthly_strong_priority-header_amount_once_125">£125</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="left_alt_monthly_strong_priority-header_amount_once_80" class="js-donate-widget__amount-radio" name="left_alt_monthly_strong_priority-header_amount_once" autocomplete="off" data-amount="80">
<label for="left_alt_monthly_strong_priority-header_amount_once_80">£80</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="200">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="125">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="80">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 3</p>
</div>
</div>
<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__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/donate-header/bg-standard-left-small-1.jpg)"></div>
<div class="c-donate-header__image c-donate-header__image--large" style="background-image: url(/images/mainsite5/donate-header/bg-standard-left-1.jpg)"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Twig
<div class="o-donate-header-inner">
<div class="c-donate-header c-donate-header--left">
<div class="c-donate-header__row">
<div class="c-donate-header__header">
{% if header %}
<div class="c-donate-header__logo">
<img src="/images/mainsite5/donate-header/tf-logo.png" alt="Tearfund logo" />
</div>
<div class="c-donate-header__secure">
<img src="/images/mainsite5/donate-header/secure-mark.png" alt="Your donation is 100% secure" />
</div>
{% endif %}
</div>
</div>
<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\/donate-header\/bg-standard-left-1.jpg",
"backgroundImageSmall": "\/images\/mainsite5\/donate-header\/bg-standard-left-small-1.jpg",
"header": true,
"donationWidget": {
"id": "left_monthly_strong_priority-header",
"allHandles": true,
"freq_handles": false,
"donate_widget_title": "Make a monthly donation",
"donate_widget_intro": "Become a regular giver today and make a world of difference",
"frequencies": [
{
"title": "monthly",
"checked": true
},
{
"title": "once"
}
],
"amounts_monthly": [
{
"title": "25",
"content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "15",
"content": "Monthly content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "8",
"content": "Monthly content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate monthly",
"flip_link": true,
"alt_form": true,
"alt_id": "left_alt_monthly_strong_priority-header",
"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_frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"alt_amounts_once": [
{
"title": "200",
"content": "Once content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "125",
"content": "Once content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "80",
"content": "Once content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": true
}
}
