Banners
#
Banner Featured Half Open Sans Jubilee {% include 'components/banners/banner~featured-half-open-sans-jubilee' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured full-banner--jubilee-sub"
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner--featured-panel">
            <div class="full-banner__content-wrapper full-banner--content-top full-banner--content-top-mobile">
                <!-- RESPONSIVE CONTAINER -->
                <div class="full-banner--content-left">
                    <!-- CONTENT START -->
                    <div class="full-banner__content ">
                        <!-- If author header -->
                        <h1 class="full-banner__title full-banner__title--open-sans">
                            PLAY YOUR PART
                        </h1>
                        <p>To beat poverty and injustice, we need to tackle climate change.</p>
                        <!-- Buttons -->
                        <div class="full-banner__buttons">
<a href="#" class="button">Act today</a>
</div>
                        <!-- If article has author -->
                        <!-- If sharing is on -->
                        <!-- If is filter banner -->
                    </div>
                    <!-- CONTENT END -->
                </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>
-->
Twig
<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">&lt; 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": "PLAY YOUR PART",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_content_side": "left",
    "banner_content_position": "top",
    "banner_content_position_mobile": "bottom",
    "banner_subtitle": "To beat poverty and injustice, we need to tackle climate change.",
    "banner_button_one": "Act today",
    "banner_button_url_one": "#",
    "banner_font": "open-sans",
    "banner_jubilee": true
}
Banner Filter {% include 'components/banners/banner~filter' %}
#
HTML
<div class="full-banner full-banner--filter "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title full-banner__title--small">
                    FILTERED BY: GENDER
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <a href="javascript:void(0)" onclick="history.go(-1);" class="back-page">&lt; Back to previous page</a>

                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "FILTERED BY: GENDER",
    "banner_title_small": true,
    "banner_filter": true
}

FILTERED BY: GENDER

< Back to previous page
Banner Article Background Image With Byline Image Sharing Tags {% include 'components/banners/banner~article-background-image-with-byline-image-sharing-tags' %}
#
HTML
<div class="full-banner full-banner--image "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title full-banner__title--small">
                    ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES
                </h1>
                <!-- Buttons -->
                <div class="article-summary-details__tags">
                    <div class="article-summary-details__tag">
One
</div>
                    <div class="article-summary-details__tag">
Two
</div>
                    <div class="article-summary-details__tag">
Three
</div>
                </div>
                <!-- If article has author -->
                <div class="article-byline ">
                    <div class="article-byline__avatar circular-image">
                        <img class="article-byline__avatar-image" src="http://placehold.it/200x200">
                    </div>
                    <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>
                <!-- If sharing is on -->
                <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>
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES",
    "banner_title_small": true,
    "banner_author": "Author Name",
    "banner_read_time": "4",
    "banner_date": "6 April 2013",
    "banner_author_image": "http:\/\/placehold.it\/200x200",
    "banner_tags": {
        "1": "One",
        "2": "Two",
        "3": "Three"
    },
    "banner_sharing": true,
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg"
}

ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES

One
Two
Three
Banner Featured Half Open Sans {% include 'components/banners/banner~featured-half-open-sans' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.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 -->
                <!-- CONTENT START -->
                <div class="full-banner__content ">
                    <!-- If author header -->
                    <h1 class="full-banner__title full-banner__title--open-sans">
                        The world’s focus on Central Africa
                    </h1>
                    <p>Where the need is greatest</p>
                    <!-- Buttons -->
                    <div class="full-banner__buttons">
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
                    <!-- If article has author -->
                    <!-- If sharing is on -->
                    <!-- If is filter banner -->
                    <!-- CONTENT END -->
                </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>
-->
Twig
<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">&lt; 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": "The world\u2019s focus on Central Africa",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_content_position": "bottom",
    "banner_content_position_mobile": "bottom",
    "banner_subtitle": "Where the need is greatest",
    "banner_button_one": "Button",
    "banner_button_url_one": "#",
    "banner_button_two": "Button",
    "banner_button_url_two": "#",
    "banner_font": "open-sans"
}
Banner Gvt {% include 'components/banners/banner~gvt' %}
#
HTML
<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>
-->
Twig
<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">&lt; 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
}
Banner Featured Full Video {% include 'components/banners/banner~featured-full-video' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured full-banner--fullscreen full-banner--video "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="full-video">
        <video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
            <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.mp4" type="video/mp4">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                    <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                    </video>
                </div>
                <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 -->
                            <!-- CONTENT START -->
                            <div class="full-banner__content ">
                                <!-- If author header -->
                                <h1 class="full-banner__title ">
                                    The world’s focus on Central Africa
                                </h1>
                                <p>Where the need is greatest</p>
                                <!-- Buttons -->
                                <div class="full-banner__buttons">
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
                                <!-- If article has author -->
                                <!-- If sharing is on -->
                                <!-- If is filter banner -->
                                <!-- CONTENT END -->
                            </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>
        -->
Twig
<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">&lt; 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": "The world\u2019s focus on Central Africa",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_size": "fullscreen",
    "banner_content_position": "bottom",
    "banner_content_position_mobile": "bottom",
    "banner_subtitle": "Where the need is greatest",
    "banner_button_one": "Button",
    "banner_button_url_one": "#",
    "banner_button_two": "Button",
    "banner_button_url_two": "#",
    "banner_video": true,
    "banner_video_mp4": "http:\/\/staging.tftech.org.uk\/images\/videos\/mainsite5\/c16\/yasmin_loop.mp4",
    "banner_video_ogg": "http:\/\/staging.tftech.org.uk\/images\/videos\/mainsite5\/c16\/yasmin_loop.ogg",
    "banner_video_webm": "http:\/\/staging.tftech.org.uk\/images\/videos\/mainsite5\/c16\/yasmin_loop.webm",
    "banner_video_poster": "http:\/\/www.tearfund.org\/images\/mainsite5\/c16\/c16-poster.jpg"
}
Banner Featured Full Left Gradient Open Sans {% include 'components/banners/banner~featured-full-left-gradient-open-sans' %}
#
HTML
<div class="full-banner full-banner--image full-banner--gradient full-banner--gradient-left full-banner--featured full-banner--fullscreen "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.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 full-banner__title--open-sans">
                            The world’s focus on Central Africa
                        </h1>
                        <p>Where the need is greatest</p>
                        <!-- Buttons -->
                        <div class="full-banner__buttons">
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
                        <!-- If article has author -->
                        <!-- If sharing is on -->
                        <!-- If is filter banner -->
                    </div>
                    <!-- CONTENT END -->
                </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>
-->
Twig
<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">&lt; 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": "The world\u2019s focus on Central Africa",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_content_position": "bottom",
    "banner_content_position_mobile": "bottom",
    "banner_subtitle": "Where the need is greatest",
    "banner_button_one": "Button",
    "banner_button_url_one": "#",
    "banner_button_two": "Button",
    "banner_button_url_two": "#",
    "banner_font": "open-sans",
    "banner_size": "fullscreen",
    "banner_gradient": true,
    "banner_gradient_setting": "left",
    "banner_content_side": "left"
}
Banner Background Image Jubilee {% include 'components/banners/banner~background-image-jubilee' %}
#
HTML
<div class="full-banner full-banner--image full-banner--jubilee-sub"
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title ">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_jubilee": true
}

About us

Banner Author Header {% include 'components/banners/banner~author-header' %}
#
HTML
<div class="full-banner "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content full-banner__content--author-no-bg">
                <!-- If author header -->
                <div class="article-byline__avatar circular-image">
                    <img class="article-byline__avatar-image" src="http://placehold.it/200x200">
                </div>
                <h1 class="full-banner__title full-banner__title--small">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us",
    "banner_author_avatar": "http:\/\/placehold.it\/200x200",
    "banner_title_small": true
}
Banner Background Image {% include 'components/banners/banner~background-image' %}
#
HTML
<div class="full-banner full-banner--image "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title ">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg"
}

About us

Banner Story {% include 'components/banners/banner-story' %}
#
HTML
<div class="story-hero">
    <picture class="story-hero__image">
        <source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
            <source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
                <source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
                    <source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
                        <source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
                            <source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
                                <source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
                                    <img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
                                </picture>
                            </div>
Twig
<div class="story-hero">
	<picture class="story-hero__image">
		<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
		<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
		<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
		<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
	  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
	 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
	 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
	 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
	</picture>
</div>
{}
Bolivia
Banner Article With Byline Image Sharing {% include 'components/banners/banner~article-with-byline-image-sharing' %}
#
HTML
<div class="full-banner "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title ">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <div class="article-byline ">
                    <div class="article-byline__avatar circular-image">
                        <img class="article-byline__avatar-image" src="http://placehold.it/200x200">
                    </div>
                    <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>
                <!-- If sharing is on -->
                <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>
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us",
    "banner_author": "Author Name",
    "banner_read_time": "4",
    "banner_date": "6 April 2013",
    "banner_author_image": "http:\/\/placehold.it\/200x200",
    "banner_sharing": true
}

About us

Banner Background Image With Gradient {% include 'components/banners/banner~background-image-with-gradient' %}
#
HTML
<div class="full-banner full-banner--image full-banner--gradient full-banner--gradient-full "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title ">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_gradient": true,
    "banner_gradient_setting": "full"
}

About us

Banner Featured Full Center Logo {% include 'components/banners/banner~featured-full-center-logo' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured full-banner--fullscreen "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="inner">
        <div class="full-banner--featured-panel">
            <div class="full-banner__content-wrapper full-banner--content-center full-banner--content-center-mobile">
                <!-- RESPONSIVE CONTAINER -->
                <!-- CONTENT START -->
                <div class="full-banner__content ">
                    <!-- If author header -->
                    <div class="community-fundraising-banner__logo"></div>
                    <h1 class="full-banner__title full-banner__title--open-sans">
                        The word’s focus on Central Africa
                    </h1>
                    <p>Where the need is greatest</p>
                    <!-- Buttons -->
                    <div class="full-banner__buttons">
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
                    <!-- If article has author -->
                    <!-- If sharing is on -->
                    <!-- If is filter banner -->
                    <!-- CONTENT END -->
                </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>
-->
Twig
<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">&lt; 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": "The word\u2019s focus on Central Africa",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_size": "fullscreen",
    "banner_content_position": "center",
    "banner_content_position_mobile": "center",
    "banner_subtitle": "Where the need is greatest",
    "banner_button_one": "Button",
    "banner_button_url_one": "#",
    "banner_button_two": "Button",
    "banner_button_url_two": "#",
    "banner_logo": true,
    "banner_font": "open-sans"
}
Banner Small Title {% include 'components/banners/banner~small-title' %}
#
HTML
<div class="full-banner "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title full-banner__title--small">
                    ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES",
    "banner_title_small": true
}

ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES

Banner Article With Byline Image Sharing Tags {% include 'components/banners/banner~article-with-byline-image-sharing-tags' %}
#
HTML
<div class="full-banner "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title full-banner__title--small">
                    ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES
                </h1>
                <!-- Buttons -->
                <div class="article-summary-details__tags">
                    <div class="article-summary-details__tag">
One
</div>
                    <div class="article-summary-details__tag">
Two
</div>
                    <div class="article-summary-details__tag">
Three
</div>
                </div>
                <!-- If article has author -->
                <div class="article-byline ">
                    <div class="article-byline__avatar circular-image">
                        <img class="article-byline__avatar-image" src="http://placehold.it/200x200">
                    </div>
                    <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>
                <!-- If sharing is on -->
                <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>
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES",
    "banner_title_small": true,
    "banner_author": "Author Name",
    "banner_read_time": "4",
    "banner_date": "6 April 2013",
    "banner_author_image": "http:\/\/placehold.it\/200x200",
    "banner_tags": {
        "1": "One",
        "2": "Two",
        "3": "Three"
    },
    "banner_sharing": true
}

ARTICLE HEADER HERE. WHICH CAN BE MORE WORDS LIKE REALLY LONG TITLES

One
Two
Three
Banner Article With Byline Image {% include 'components/banners/banner~article-with-byline-image' %}
#
HTML
<div class="full-banner "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title ">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <div class="article-byline ">
                    <div class="article-byline__avatar circular-image">
                        <img class="article-byline__avatar-image" src="http://placehold.it/200x200">
                    </div>
                    <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>
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us",
    "banner_author": "Author Name",
    "banner_read_time": "4",
    "banner_date": "6 April 2013",
    "banner_author_image": "http:\/\/placehold.it\/200x200"
}

About us

Banner Article With Byline {% include 'components/banners/banner~article-with-byline' %}
#
HTML
<div class="full-banner "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title ">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <div class="article-byline article-byline--no-image ">
                    <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>
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us",
    "banner_author": "Author Name",
    "banner_read_time": "4",
    "banner_date": "6 April 2013"
}

About us

Banner {% include 'components/banners/banner' %}
#
HTML
<div class="full-banner "
>
    <div class="inner">
        <div class="full-banner__content-wrapper
">
            <!-- RESPONSIVE CONTAINER -->
            <!-- CONTENT START -->
            <div class="full-banner__content ">
                <!-- If author header -->
                <h1 class="full-banner__title ">
                    About us
                </h1>
                <!-- Buttons -->
                <!-- If article has author -->
                <!-- If sharing is on -->
                <!-- If is filter banner -->
                <!-- CONTENT END -->
            </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>
-->
Twig
<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">&lt; 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": "About us"
}

About us

Banner Featured Full Right Gradient Open Sans {% include 'components/banners/banner~featured-full-right-gradient-open-sans' %}
#
HTML
<div class="full-banner full-banner--image full-banner--gradient full-banner--gradient-right full-banner--featured full-banner--fullscreen "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.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-right">
                    <!-- CONTENT START -->
                    <div class="full-banner__content ">
                        <!-- If author header -->
                        <h1 class="full-banner__title full-banner__title--open-sans">
                            The world’s focus on Central Africa
                        </h1>
                        <p>Where the need is greatest</p>
                        <!-- Buttons -->
                        <div class="full-banner__buttons">
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
                        <!-- If article has author -->
                        <!-- If sharing is on -->
                        <!-- If is filter banner -->
                    </div>
                    <!-- CONTENT END -->
                </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>
-->
Twig
<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">&lt; 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": "The world\u2019s focus on Central Africa",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_content_position": "bottom",
    "banner_content_position_mobile": "bottom",
    "banner_subtitle": "Where the need is greatest",
    "banner_button_one": "Button",
    "banner_button_url_one": "#",
    "banner_button_two": "Button",
    "banner_button_url_two": "#",
    "banner_font": "open-sans",
    "banner_size": "fullscreen",
    "banner_gradient": true,
    "banner_gradient_setting": "right",
    "banner_content_side": "right"
}
Banner Run {% include 'components/banners/banner-run' %}
#
HTML
<header class="run-to-the-beat-header">
    <div class="responsive-image-header">
        <picture class="">
            <source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1400, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2800 2x">
                <source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1200, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2400 2x">
                    <source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1000, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2000 2x">
                        <source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=800, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1600 2x">
                            <source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1294 2x">
                                <source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=930 2x">
                                    <source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=750 2x">
                                        <img src="https://www.tearfund.org/~/media/images/testing/story-header-desktop.jpg" alt="Bolivia">
                                    </picture>
                                    <div class="responsive-image-header__text-container">
                                        <div class="responsive-image-header__text">
                                            <p>
                                                Poverty destroys lives.
                                                <br />
                                                Join the fightback.
                                            </p>
                                            <a class="button" href="#">Sign up now</a>

                                        </div>
                                    </div>
                                    <picture class="mobile-only">
                                        <source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=1294 2x">
                                            <source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=930 2x">
                                                <source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=750 2x">
                                                    <img src="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg" alt="Bolivia">
                                                </picture>
                                            </div>
                                        </header>
Twig
<header class="run-to-the-beat-header">
	<div class="responsive-image-header">
		<picture class="">
			<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1400, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2800 2x">
			<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1200, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2400 2x">
			<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1000, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2000 2x">
			<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=800, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1600 2x">
		  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=750 2x">
		 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-desktop.jpg" alt="Bolivia">
		</picture>

		<div class="responsive-image-header__text-container">
			<div class="responsive-image-header__text">
				<p>Poverty destroys lives.<br />Join the fightback.</p>
				<a class="button" href="#">Sign up now</a>
			</div>
		</div>

		<picture class="mobile-only">
		  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=1294 2x">
		 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=930 2x">
		 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=750 2x">
		 	<img src="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg" alt="Bolivia">
		</picture>
	</div>
</header>
{}
Bolivia

Poverty destroys lives.
Join the fightback.

Sign up now
Bolivia
Banner Video {% include 'components/banners/banner-video' %}
#
HTML
<header>
    <img class="mobile-only" src="/images/mainsite5/jubilee/2-cities/videos/2Cities_Bristol_MOBILE.jpg" />
    <div class="full-banner full-banner--video full-banner--image full-banner--two-cities" data-image="/images/mainsite5/jubilee/2-cities/videos/bristol.jpg">
        <!-- <div class="inner">
        <div class="full-banner__implicit-height-outer">
            <div class="full-banner__implicit-height-inner">
                <div class="full-banner__content full-banner__content--overlaid">
                    <h1 class="full-banner__title full-banner--video__title">
                        About us
                    </h1>
                </div>
            </div>
        </div>
    </div>
    --> 
    <div class="full-banner__video-aspect-ratio">
        <div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
    </div>
    <!-- <div class="full-banner__video-aspect-ratio">
    <div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.webm","mimeType": "video/webm"}]'></div>
</div>
--> 
</div>
</header>
Twig
<header>

		<img class="mobile-only" src="/images/mainsite5/jubilee/2-cities/videos/2Cities_Bristol_MOBILE.jpg" />

		<div class="full-banner full-banner--video full-banner--image full-banner--two-cities" data-image="/images/mainsite5/jubilee/2-cities/videos/bristol.jpg">

			<!-- <div class="inner">
				<div class="full-banner__implicit-height-outer">
					<div class="full-banner__implicit-height-inner">

						<div class="full-banner__content full-banner__content--overlaid">
							<h1 class="full-banner__title full-banner--video__title">{{ banner_title }}</h1>
						</div>

					</div>
				</div>
			</div> -->

			<div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
			</div>

			<!-- <div class="full-banner__video-aspect-ratio">
				<div class="full-banner__video-wrap" data-video='[{"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/merseyside.webm","mimeType": "video/webm"}]'></div>
			</div> -->

		</div>
	</header>
{
    "banner_title": "About us"
}
Giving Banner {% include 'components/banners/giving-banner' %}
#
HTML
<div id="pagelayout_0_articleheader_0_GivingHeader" class="fullwidth-giving-ask fullwidth-giving-ask--video banner-emergency__chevron banner-emergency__strip" data-image="https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);">
    <div class="full-banner--gradient full-banner--gradient-bottom"></div>
    <!-- <div class="full-video">
    <video width="100%" loop="" height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
        <source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
            <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                </video>
            </div>
            --> 
            <div class="full-banner__video-aspect-ratio">
                <div class="full-banner__video-wrap" data-video='[{"url": "/images/videos/mainsite5/summer-campaign/header-loop.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
            </div>
            <div id="pagelayout_0_articleheader_0_GivingHeaderInner" class="inner">
                <h1 id="pagelayout_0_articleheader_0_TitleText" class="fullwidth-giving-ask__title">
                    Something Great Emergency Appeal
                </h1>
                <div id="pagelayout_0_articleheader_0_SecondLine" class="fullwidth-giving-ask__secondary">the Myanmar Refugees Emergency Appeal</div>
                <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetInner">
                    <div id="pagelayout_0_articleheader_0_GivingWidget_GivingLargeRow">
                        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetWidth">
                            <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetOuter" class="giving-widget giving-widget--inline" data-image-id="pagelayout_0_articleheader_0_GivingHeader" data-text-id="pagelayout_0_articleheader_0_TitleText">
                                <div class="fund-selector">
                                    <!-- Can be a span or a label. Depends on whether or not there's a select -->
                                    <label id="pagelayout_0_articleheader_0_GivingWidget_label_destination" for="destination-select" class="fund-selector__title">DONATE NOW</label>
                                    <span id="pagelayout_0_articleheader_0_GivingWidget_SingleFund" class="fund-selector__destination" giving-page="/en/give/myanmar_refugees_emergency_appeal/"></span> 
                                    <div id="pagelayout_0_articleheader_0_GivingWidget_StandardAmount" class="fund-selector-field">
                                        <div class="custom-input custom-input--currency">
                                            <input name="pagelayout_0$articleheader_0$GivingWidget$tbAmount" type="text" id="pagelayout_0_articleheader_0_GivingWidget_tbAmount" class="custom-input__input">
                                        </div>
                                    </div>
                                    <div id="pagelayout_0_articleheader_0_GivingWidget_SinglePaymentMethod" class="fund-selector-field">
                                        <div style="display: block;" class="payment-methods__item payment-methods__item--once">
                                            <div class="payment-methods__button">
                                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByCard','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByCard" class="button pay-by-card"><span>Pay by card</span></button>
                                            </div>
                                            <div class="payment-methods__button">
                                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByPaypal','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByPaypal" class="button pay-by-paypal"><span>Pay by</span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="js-background-image" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);"></div>
        </div>
Twig
<div id="pagelayout_0_articleheader_0_GivingHeader" class="fullwidth-giving-ask fullwidth-giving-ask--video banner-emergency__chevron banner-emergency__strip" data-image="https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);">
    <div class="full-banner--gradient full-banner--gradient-bottom"></div>
    <!-- <div class="full-video">
        <video width="100%" loop="" height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
            <source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                    <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                    </video>
                </div> -->

    <div class="full-banner__video-aspect-ratio">
        <div class="full-banner__video-wrap" data-video='[{"url": "/images/videos/mainsite5/summer-campaign/header-loop.mp4","mimeType": "video/mp4"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.ogv","mimeType": "video/ogg"}, {"url": "/images/mainsite5/jubilee/2-cities/videos/bristol.webm","mimeType": "video/webm"}]'></div>
    </div>

    <div id="pagelayout_0_articleheader_0_GivingHeaderInner" class="inner">
        
        <h1 id="pagelayout_0_articleheader_0_TitleText" class="fullwidth-giving-ask__title">Something Great Emergency Appeal</h1>
        <div id="pagelayout_0_articleheader_0_SecondLine" class="fullwidth-giving-ask__secondary">the Myanmar Refugees Emergency Appeal</div>
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetInner">
    <div id="pagelayout_0_articleheader_0_GivingWidget_GivingLargeRow">
		
        <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetWidth">
            <div id="pagelayout_0_articleheader_0_GivingWidget_GivingWidgetOuter" class="giving-widget giving-widget--inline" data-image-id="pagelayout_0_articleheader_0_GivingHeader" data-text-id="pagelayout_0_articleheader_0_TitleText">

                <div class="fund-selector">

                    <!-- Can be a span or a label. Depends on whether or not there's a select -->
                    <label id="pagelayout_0_articleheader_0_GivingWidget_label_destination" for="destination-select" class="fund-selector__title">DONATE NOW</label>

                    <span id="pagelayout_0_articleheader_0_GivingWidget_SingleFund" class="fund-selector__destination" giving-page="/en/give/myanmar_refugees_emergency_appeal/"></span>

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_StandardAmount" class="fund-selector-field">
                        <div class="custom-input custom-input--currency">
                            <input name="pagelayout_0$articleheader_0$GivingWidget$tbAmount" type="text" id="pagelayout_0_articleheader_0_GivingWidget_tbAmount" class="custom-input__input">
                        </div>
                    </div>

                    

                    

                    

                    <div id="pagelayout_0_articleheader_0_GivingWidget_SinglePaymentMethod" class="fund-selector-field">
                         <div style="display: block;" class="payment-methods__item payment-methods__item--once">
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByCard','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByCard" class="button pay-by-card"><span>Pay by card</span></button>
                            </div>
                            <div class="payment-methods__button">
                                <button onclick="__doPostBack('pagelayout_0$articleheader_0$GivingWidget$btnSinglePayByPaypal','')" id="pagelayout_0_articleheader_0_GivingWidget_btnSinglePayByPaypal" class="button pay-by-paypal"><span>Pay by</span></button>
                            </div>
                        </div>
                        
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
    </div>
<div class="js-background-image" style="background-image: url(&quot;https://www.tearfund.org/~/media/images/appeals/myanmar/landingpage_banner.jpg?h=450&amp;w=1280&quot;);"></div></div>
{}
Banner Featured Full Video Summer {% include 'components/banners/banner~featured-full-video-summer' %}
#
HTML
<div class="full-banner full-banner--image full-banner--gradient full-banner--gradient- full-banner--featured full-banner--fullscreen full-banner--video "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <div class="full-video">
        <video width="100%" loop height="auto" id="video" autoplay="autoplay" preload="auto" poster="http://www.tearfund.org/images/mainsite5/c16/c16-poster.jpg">
            <source src="/images/videos/mainsite5/summer-campaign/video.mp4" type="video/mp4">
                <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.ogg" type="video/ogg">
                    <source src="http://staging.tftech.org.uk/images/videos/mainsite5/c16/yasmin_loop.webm" type="video/webm">
                    </video>
                </div>
                <div class="inner">
                    <div class="full-banner--featured-panel">
                        <div class="full-banner__content-wrapper full-banner--content-center full-banner--content-center-mobile">
                            <!-- RESPONSIVE CONTAINER -->
                            <!-- CONTENT START -->
                            <div class="full-banner__content ">
                                <!-- If author header -->
                                <h1 class="full-banner__title ">
                                    Summer appeal
                                </h1>
                                <!-- Buttons -->
                                <!-- If article has author -->
                                <!-- If sharing is on -->
                                <!-- If is filter banner -->
                                <!-- CONTENT END -->
                            </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>
        -->
Twig
<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">&lt; 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": "Summer appeal",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_size": "fullscreen",
    "banner_content_position": "center",
    "banner_content_position_mobile": "bottom",
    "banner_gradient": true,
    "banner_video": true,
    "banner_video_mp4": "\/images\/videos\/mainsite5\/summer-campaign\/video.mp4",
    "banner_video_ogg": "http:\/\/staging.tftech.org.uk\/images\/videos\/mainsite5\/c16\/yasmin_loop.ogg",
    "banner_video_webm": "http:\/\/staging.tftech.org.uk\/images\/videos\/mainsite5\/c16\/yasmin_loop.webm",
    "banner_video_poster": "http:\/\/www.tearfund.org\/images\/mainsite5\/c16\/c16-poster.jpg"
}
Banner Scalable {% include 'components/banners/banner~scalable' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured scalable-banner "
data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg"
>
    <picture class="scalable-banner__image">
        <source media="(min-width: 1400px)" srcset="/slider/feature-banner.jpg?w=1400, /slider/feature-banner.jpg?w=2800 2x">
            <source media="(min-width: 1200px)" srcset="/slider/feature-banner.jpg?w=1200, /slider/feature-banner.jpg?w=2400 2x">
                <source media="(min-width: 1000px)" srcset="/slider/feature-banner.jpg?w=1000, /slider/feature-banner.jpg?w=2000 2x">
                    <source media="(min-width: 800px)" srcset="/slider/feature-banner.jpg?w=800, /slider/feature-banner.jpg?w=1600 2x">
                        <source media="(min-width: 767px)" srcset="/slider/feature-banner.jpg?w=647, /slider/feature-banner.jpg?w=1294 2x">
                            <source media="(min-width: 647px)" srcset="/slider/mobile-feature.jpg?w=647, /slider/mobile-feature.jpg?w=1294 2x">
                                <source media="(min-width: 465px)" srcset="/slider/mobile-feature.jpg?w=465, /slider/mobile-feature.jpg?w=930 2x">
                                    <source media="(min-width: 375px)" srcset="/slider/mobile-feature.jpg?w=375, /slider/mobile-feature.jpg?w=750 2x" alt="Bolivia">
                                        <img src="/slider/mobile-feature.jpg" alt="Bolivia">
                                    </picture>
                                    <div class="scalable_banner__content-container">
                                        <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 -->
                                                    <!-- CONTENT START -->
                                                    <div class="full-banner__content ">
                                                        <!-- If author header -->
                                                        <h1 class="full-banner__title full-banner__title--open-sans">
                                                            The world’s focus on Central Africa
                                                        </h1>
                                                        <p>Where the need is greatest</p>
                                                        <!-- Buttons -->
                                                        <div class="full-banner__buttons">
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
                                                        <!-- If article has author -->
                                                        <!-- If sharing is on -->
                                                        <!-- If is filter banner -->
                                                        <!-- CONTENT END -->
                                                    </div>
                                                </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>
                            -->
Twig
<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">&lt; 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": "The world\u2019s focus on Central Africa",
    "banner_background_image": "\/slider\/feature-banner.jpg",
    "banner_background_image_mobile": "\/slider\/mobile-feature.jpg",
    "banner_featured": true,
    "banner_content_position": "bottom",
    "banner_content_position_mobile": "bottom",
    "banner_subtitle": "Where the need is greatest",
    "banner_button_one": "Button",
    "banner_button_url_one": "#",
    "banner_button_two": "Button",
    "banner_button_url_two": "#",
    "banner_font": "open-sans",
    "scalable_banner": true
}
Banner Scalable Test {% include 'components/banners/banner-scalable-test' %}
#
HTML
<div class="full-banner full-banner--image full-banner--featured scalable-banner">
    <picture class="scalable-banner__image">
        <source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
            <source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
                <source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
                    <source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
                        <source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
                            <source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
                                <source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
                                    <img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
                                </picture>
                            </div>
Twig
<div class="full-banner full-banner--image full-banner--featured scalable-banner">

	<picture class="scalable-banner__image">
		<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
		<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
		<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
		<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
	  	<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
	 	<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
	 	<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
	 	<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
	</picture>
</div>
{}