Emergency Header
#
Emergency Header Text Right {% include 'components/emergency-header/emergency-header-text-right' %}
#
HTML
<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>
Twig
<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
    }
}

Donate now

Your donation will help over half a million people who have been left homeless

Donate now

Rohingya refugee emergency appeal

Emergency Header Text Left {% include 'components/emergency-header/emergency-header-text-left' %}
#
HTML
<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>
Twig
<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
    }
}

Donate now

Your donation will help over half a million people who have been left homeless

Donate now

Rohingya refugee emergency appeal

Emergency Header Image Right {% include 'components/emergency-header/emergency-header-image-right' %}
#
HTML
<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>
Twig
<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
    }
}

Rohingya refugee emergency appeal donate now

Your donation will help over half a million people who have been left homeless

Donate now
Emergency Header Image Left {% include 'components/emergency-header/emergency-header-image-left' %}
#
HTML
<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>
Twig
<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
    }
}

Rohingya refugee emergency appeal donate now

Your donation will help over half a million people who have been left homeless

Donate now