<div class="full-banner
full-banner--bottom-content full-banner--image full-banner--gradient full-banner--gradient-left full-banner--featured full-banner--fullscreen
"
data-image="/images/mainsite5/gvt-header.jpg" data-mobile-image="/images/mainsite5/gvt-header.jpg"
>
<div class="inner">
<div class="full-banner--featured-panel"> <div class="full-banner__content-wrapper
full-banner--content-bottom full-banner--content-bottom-mobile"><!-- RESPONSIVE CONTAINER -->
<div class="full-banner--content-left"> <!-- CONTENT START -->
<div class="full-banner__content ">
<!-- If author header -->
<h1 class="full-banner__title
">WHERE DOES GOD WANT YOU TO SERVE?</h1>
<!-- Buttons -->
<!-- If article has author -->
<!-- If sharing is on -->
<!-- If is filter banner -->
</div> <!-- CONTENT END -->
</div>
</div>
<div class="gvt-trip-picker">
<div class="gvt-trip-picker__controls">
<div id="pagelayout_0_articleheader_0_titlebottom_0_PnlFilters" class="gvt-trip-picker__filters">
<div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--who"><span class="custom-select__selected-value">Who</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl02" class="custom-select__input">
<option value="Who" data-null="true">Who</option>
<option value="me">Just me</option>
<option value="couple">We're a couple</option>
<option value="family">We're a family</option>
<option value="group">We're a group</option>
</select></div><div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--when"><span class="custom-select__selected-value">When</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl05" class="custom-select__input">
<option value="When" data-null="true">When</option>
<option value="2017 Winter">2017 Winter</option>
<option value="2018 Spring">2018 Spring</option>
<option value="2018 Summer">2018 Summer</option>
<option value="2018 Autumn">2018 Autumn</option>
<option value="2018 Winter">2018 Winter</option>
<option value="2019 Spring">2019 Spring</option>
</select></div><div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--where"><span class="custom-select__selected-value">Where</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl08" class="custom-select__input">
<option value="Where" data-null="true">Where</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Bolivia">Bolivia</option>
<option value="Cambodia">Cambodia</option>
<option value="Colombia">Colombia</option>
<option value="India">India</option>
<option value="Malawi">Malawi</option>
<option value="Peru">Peru</option>
<option value="South Africa">South Africa</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Uganda">Uganda</option>
<option value="Zambia">Zambia</option>
</select></div><div class="custom-select gvt-trip-picker__select gvt-trip-picker__select--what"><span class="custom-select__selected-value">How Long</span><select name="pagelayout_0$articleheader_0$titlebottom_0$ctl11" class="custom-select__input">
<option value="How Long" data-null="true">How Long</option>
<option value="2weeks">2 Weeks</option>
<option value="1month">1 Month</option>
<option value="3months">3 Months</option>
<option value="6months">6 Months</option>
<option value="other">Other</option>
</select></div>
</div>
<a href="#" class="gvt-trip-picker__reset">Show All</a>
</div>
<div class="gvt-trip-picker__options">
<a class="ls-button-red" title="Find out more" href="/en/about_you/go_overseas/my_trip/faqs_new/">All you need to know</a>
<a class="ls-button-turquoise" title="Apply Now" href="/en/about_you/go_overseas/my_trip/apply_now/">Apply Now</a>
</div>
</div> </div> </div>
</div>
<!-- <div class="reveal reveal--green">
<div class="inner">
<a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>
<div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
</p>
</div>
</div>
</div> -->
<div class="full-banner
{% if banner_content_bottom %}full-banner--bottom-content {% endif %}
{% if banner_filter %}full-banner--filter {% endif %}
{% if banner_background_image %}full-banner--image {% endif %}
{% if banner_gradient %}full-banner--gradient full-banner--gradient-{{banner_gradient_setting }}{% endif %}
{% if banner_featured %} full-banner--featured{% endif %}
{% if banner_size %} full-banner--{{banner_size}}{% endif %}
{% if banner_video %} full-banner--video{% endif %}
{% if banner_jubilee %} full-banner--jubilee-sub{% endif %}
{% if giving_page %} full-banner--giving{% endif %}
{% if c19_page %} full-banner--c19{% endif %}
{% if scalable_banner %} scalable-banner {% endif %}"
{% if banner_background_image %}
data-image="{{ banner_background_image }}" data-mobile-image="{{ banner_background_image_mobile }}"
{% endif %}
>
{% if scalable_banner %}
<picture class="scalable-banner__image">
<source media="(min-width: 1400px)" srcset="{{ banner_background_image }}?w=1400, {{ banner_background_image }}?w=2800 2x">
<source media="(min-width: 1200px)" srcset="{{ banner_background_image }}?w=1200, {{ banner_background_image }}?w=2400 2x">
<source media="(min-width: 1000px)" srcset="{{ banner_background_image }}?w=1000, {{ banner_background_image }}?w=2000 2x">
<source media="(min-width: 800px)" srcset="{{ banner_background_image }}?w=800, {{ banner_background_image }}?w=1600 2x">
<source media="(min-width: 767px)" srcset="{{ banner_background_image }}?w=647, {{ banner_background_image }}?w=1294 2x">
<source media="(min-width: 647px)" srcset="{{ banner_background_image_mobile }}?w=647, {{ banner_background_image_mobile }}?w=1294 2x">
<source media="(min-width: 465px)" srcset="{{ banner_background_image_mobile }}?w=465, {{ banner_background_image_mobile }}?w=930 2x">
<source media="(min-width: 375px)" srcset="{{ banner_background_image_mobile }}?w=375, {{ banner_background_image_mobile }}?w=750 2x" alt="Bolivia">
<img src="{{ banner_background_image_mobile }}" alt="Bolivia">
</picture>
{% endif %}
{% if banner_video %}
<div class="full-video">
<video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="{{banner_video_poster}}">
<source src="{{banner_video_mp4}}" type="video/mp4">
<source src="{{banner_video_ogg}}" type="video/ogg">
<source src="{{banner_video_webm}}" type="video/webm">
</video>
</div>
{% endif %}
{% if scalable_banner %}
<div class="scalable_banner__content-container">
{% endif %}
<div class="inner">
{% if banner_featured %}<div class="full-banner--featured-panel">{% endif %}
<div class="full-banner__content-wrapper
{% if banner_content_position %} full-banner--content-{{banner_content_position}}{% endif %}
{% if banner_content_position_mobile %} full-banner--content-{{banner_content_position}}-mobile{% endif %}"><!-- RESPONSIVE CONTAINER -->
{% if banner_content_side %}<div class="full-banner--content-{{banner_content_side}}">{% endif %}
<!-- CONTENT START -->
<div class="full-banner__content {% if banner_author_avatar %}full-banner__content--author-no-bg{% endif %}">
<!-- If author header -->
{% if banner_author_avatar %}
<div class="article-byline__avatar circular-image">
<img class="article-byline__avatar-image" src="http://placehold.it/200x200">
</div>
{% endif %}
{% if banner_logo %}
<div class="community-fundraising-banner__logo"></div>
{% endif %}
<h1 class="full-banner__title
{% if banner_title_small %}full-banner__title--small{% endif %}
{% if banner_font %} full-banner__title--{{banner_font}}{% endif %}">{{ banner_title }}</h1>
{% if banner_subtitle %}<p>{{banner_subtitle}}</p>{% endif %}
<!-- Buttons -->
{% if banner_button_one %}
<div class="full-banner__buttons">
{% if banner_button_one %}
<a href="{{banner_button_url_one }}" class="button">{{banner_button_one }}</a>
{% endif %}
{% if banner_button_two %}
<a href="{{banner_button_url_two }}" class="button">{{banner_button_two }}</a>
{% endif %}
</div>
{% endif %}
{% if banner_tags %}
<div class="article-summary-details__tags">
{% for tag in banner_tags %}
<div class="article-summary-details__tag">
{{ tag }}
</div>
{% endfor %}
</div>
{% endif %}
<!-- If article has author -->
{% if banner_author %}
<div class="article-byline {% if not banner_author_image %} article-byline--no-image {% endif %}">
{% if banner_author_image %}
<div class="article-byline__avatar circular-image">
<img class="article-byline__avatar-image" src="{{ banner_author_image }}">
</div>
{% endif %}
<div class="byline">Posted by <span class="author">Author Name</span> - <span class="minutes">4</span> minute read</div>
<time datetime="2013-04-06">6 April 2013</time>
</div>
{% endif %}
<!-- If sharing is on -->
{% if banner_sharing %}
<div class="inline-share-buttons inline-share-buttons--article-header">
<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
<a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
</div>
{% endif %}
<!-- If is filter banner -->
{% if banner_filter %}
<a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">< Back to previous page</a>
{% endif %}
{% if banner_content_side %}</div>{% endif %}
<!-- CONTENT END -->
</div>
</div>
{% if banner_gvt %}
{% include 'components/gvt/trip-picker' %}
{% endif %}
{% if banner_featured %}</div>{% endif %}
</div>
{% if scalable_banner %}
</div>
{% endif %}
</div>
<!-- <div class="reveal reveal--green">
<div class="inner">
<a class="reveal__button" href="javascript:void()" data-reveal="reveal1" data-open="Click to show" data-close="Click to hide">Click to show</a>
<div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
</p>
</div>
</div>
</div> -->
{
"banner_title": "WHERE DOES GOD WANT YOU TO SERVE?",
"banner_background_image": "\/images\/mainsite5\/gvt-header.jpg",
"banner_background_image_mobile": "\/images\/mainsite5\/gvt-header.jpg",
"banner_featured": true,
"banner_content_position": "bottom",
"banner_content_position_mobile": "bottom",
"banner_size": "fullscreen",
"banner_gradient": true,
"banner_gradient_setting": "left",
"banner_content_side": "left",
"banner_content_bottom": true,
"banner_gvt": true
}