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
}