Big Quiz 2019 Resources
#
Text With Image {% include 'components/big-quiz-2019-resources/text-with-image' %}
#
HTML 
    <section class="bq19-text-w-image bq19-section  bq19-section--white  ">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h2">
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        
                                                    <a class="button bq19-button" href="#">Call to action</a>
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img srcset="http://placehold.it/468x453 1x, http://placehold.it/936x906 2x"
                        src="http://placehold.it/468x453"
                        alt="" />
                            </div>
        </div>
    </section>
Twig 
{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

{
    "text_with_images": {
        "0": {
            "img_src": "http:\/\/placehold.it\/468x453",
            "img_src_retina": "http:\/\/placehold.it\/936x906",
            "background_color": "",
            "reverse": false,
            "content_sections": {
                "0": {
                    "button_text": "Call to action"
                }
            }
        }
    }
}

Heading Text

Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with 500 churches and 23,000 people taking part.

On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.

Call to action
Centered Text {% include 'components/big-quiz-2019-resources/centered-text' %}
#
HTML 
<section class="bq19-section">
    <h2 class="bq19-h2">Centered Text heading</h2>
</section>
Twig 
<section class="bq19-section">
    <h2 class="bq19-h2">Centered Text heading</h2>
</section>
{}

Centered Text heading

Split Call To Actions {% include 'components/big-quiz-2019-resources/split-call-to-actions' %}
#
HTML 
<section class="bq19-split-ctas">
    
        <div class="bq19-split-ctas__col bq19-split-ctas__col--img-offset">
            <h2 class="bq19-split-ctas__heading bq19-h3">FAQ'S</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">The answer to all your questions</p>
            </div>
            <a class="secondary-button bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/faq.gif 1x, /images/mainsite5/big-quiz-2019/faq@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/faq.gif" 
                    alt=""/>
            </div>
        </div>

        <div class="bq19-split-ctas__col bq19-split-ctas__col--dark bq19-split-ctas__col--stars">
            <h2 class="bq19-split-ctas__heading bq19-h3">The big quiz night guide</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">Full details about how to host your quiz</p>
            </div>
            <a class="button button--transparent bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/shakespeare.gif 1x, /images/mainsite5/big-quiz-2019/shakespeare@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/shakespeare.gif" 
                    alt=""/>
            </div>
        </div>
    
</section>
Twig 
<section class="bq19-split-ctas">
    {% if split_ctas is defined %}

        {% for cta in split_ctas %}
            <div class="bq19-split-ctas__col
                    {% if cta.background_dark %}bq19-split-ctas__col--dark{% endif %}
                    {% if cta.background_stars %}bq19-split-ctas__col--stars{% endif %}
                    {% if cta.image_offset %}bq19-split-ctas__col--img-offset{% endif %}
                    ">
                {% if cta.heading %}
                    <h2 class="bq19-split-ctas__heading bq19-h3">{{cta.heading}}</h2>
                {% endif %}
                <div class="bq19-rich-text">
                    {% if cta.summary %}
                        <p class="bq19-split-ctas__summary">{{cta.summary}}</p>
                    {% endif %}
                </div>
                {% if cta.button_text %}
                    <a class="secondary-button bq19-button" href="#">{{cta.button_text}}</a>
                {% endif %}

                {% if cta.img_src %}
                    <div class="bq19-split-ctas__image">
                        <img alt="" src="{{cta.img_src}}">
                    </div>
                {% endif %}
            </div>
        {% endfor %}

    {% else %}

        <div class="bq19-split-ctas__col bq19-split-ctas__col--img-offset">
            <h2 class="bq19-split-ctas__heading bq19-h3">FAQ'S</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">The answer to all your questions</p>
            </div>
            <a class="secondary-button bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/faq.gif 1x, /images/mainsite5/big-quiz-2019/faq@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/faq.gif" 
                    alt=""/>
            </div>
        </div>

        <div class="bq19-split-ctas__col bq19-split-ctas__col--dark bq19-split-ctas__col--stars">
            <h2 class="bq19-split-ctas__heading bq19-h3">The big quiz night guide</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">Full details about how to host your quiz</p>
            </div>
            <a class="button button--transparent bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/shakespeare.gif 1x, /images/mainsite5/big-quiz-2019/shakespeare@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/shakespeare.gif" 
                    alt=""/>
            </div>
        </div>
    {% endif %}

</section>

{}

FAQ'S

The answer to all your questions

Find out more

The big quiz night guide

Full details about how to host your quiz

Find out more
Hero {% include 'components/big-quiz-2019-resources/hero' %}
#
HTML 
<div class="bq19-hero bq19-resources__hero">
	<div class="bq19-inner">
		<div class="bq19-hero__text center-text">
			<h1 class="bq19-hero__heading">RESOURCES</h1>
			<p class="bq19-hero__strapline">Order or download resources to make your night fabulous</p>
			<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
		</div>
		<div class="bq19-hero-image">
			<img class="bq19-hero-image__sprite"
				srcset="/images/mainsite5/big-quiz-2019-resources/hero.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019-resources/hero.png"
				alt="" />
		</div>
	</div>
</div>
Twig 
<div class="bq19-hero bq19-resources__hero">
	<div class="bq19-inner">
		<div class="bq19-hero__text center-text">
			<h1 class="bq19-hero__heading">RESOURCES</h1>
			<p class="bq19-hero__strapline">Order or download resources to make your night fabulous</p>
			<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
		</div>
		<div class="bq19-hero-image">
			<img class="bq19-hero-image__sprite"
				srcset="/images/mainsite5/big-quiz-2019-resources/hero.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019-resources/hero.png"
				alt="" />
		</div>
	</div>
</div>
{}

RESOURCES

Order or download resources to make your night fabulous

Sign up to host
Split Call To Actions Single {% include 'components/big-quiz-2019-resources/split-call-to-actions~single' %}
#
HTML 
<section class="bq19-split-ctas">
    
                    <div class="bq19-split-ctas__col
                                                                                ">
                                    <h2 class="bq19-split-ctas__heading bq19-h3">This is heading text</h2>
                                <div class="bq19-rich-text">
                                            <p class="bq19-split-ctas__summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    </div>
                                    <a class="secondary-button bq19-button" href="#">Call to Action</a>
                
                                    <div class="bq19-split-ctas__image">
                        <img alt="" src="http://placehold.it/360x210">
                    </div>
                            </div>
        
    
</section>
Twig 
<section class="bq19-split-ctas">
    {% if split_ctas is defined %}

        {% for cta in split_ctas %}
            <div class="bq19-split-ctas__col
                    {% if cta.background_dark %}bq19-split-ctas__col--dark{% endif %}
                    {% if cta.background_stars %}bq19-split-ctas__col--stars{% endif %}
                    {% if cta.image_offset %}bq19-split-ctas__col--img-offset{% endif %}
                    ">
                {% if cta.heading %}
                    <h2 class="bq19-split-ctas__heading bq19-h3">{{cta.heading}}</h2>
                {% endif %}
                <div class="bq19-rich-text">
                    {% if cta.summary %}
                        <p class="bq19-split-ctas__summary">{{cta.summary}}</p>
                    {% endif %}
                </div>
                {% if cta.button_text %}
                    <a class="secondary-button bq19-button" href="#">{{cta.button_text}}</a>
                {% endif %}

                {% if cta.img_src %}
                    <div class="bq19-split-ctas__image">
                        <img alt="" src="{{cta.img_src}}">
                    </div>
                {% endif %}
            </div>
        {% endfor %}

    {% else %}

        <div class="bq19-split-ctas__col bq19-split-ctas__col--img-offset">
            <h2 class="bq19-split-ctas__heading bq19-h3">FAQ'S</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">The answer to all your questions</p>
            </div>
            <a class="secondary-button bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/faq.gif 1x, /images/mainsite5/big-quiz-2019/faq@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/faq.gif" 
                    alt=""/>
            </div>
        </div>

        <div class="bq19-split-ctas__col bq19-split-ctas__col--dark bq19-split-ctas__col--stars">
            <h2 class="bq19-split-ctas__heading bq19-h3">The big quiz night guide</h2>
            <div class="bq19-rich-text">
                <p class="bq19-split-ctas__summary">Full details about how to host your quiz</p>
            </div>
            <a class="button button--transparent bq19-button" href="#">Find out more</a>

            <div class="bq19-split-ctas__image">
                <img 
                    srcset="/images/mainsite5/big-quiz-2019/shakespeare.gif 1x, /images/mainsite5/big-quiz-2019/shakespeare@2x.gif 2x" 
                    src="/images/mainsite5/big-quiz-2019/shakespeare.gif" 
                    alt=""/>
            </div>
        </div>
    {% endif %}

</section>

{
    "split_ctas": {
        "0": {
            "heading": "This is heading text",
            "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            "button_text": "Call to Action",
            "img_src": "http:\/\/placehold.it\/360x210",
            "background_dark": false,
            "background_stars": false,
            "image_offset": false
        }
    }
}

This is heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Call to Action
Host Sign Up {% include 'components/big-quiz-2019-resources/host-sign-up' %}
#
HTML 
<div class="bq19-host-sign-up bq19-section">
	<div class="bq19-host-sign-up__top bq19-inner center-text">
		<h2 class="bq19-host-sign-up__heading">Be part of something huge</h2>
		<a class="bq19-button bq19-button--no-margin button button--bold" href="#">Sign up to host</a>
	</div>

	<div class="bq19-host-sign-up__bottom">
		<img class="bq19-host-sign-up__figure"
				srcset="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 1x, /images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png"
				alt="" />
	</div>
</div>
Twig 
<div class="bq19-host-sign-up bq19-section">
	<div class="bq19-host-sign-up__top bq19-inner center-text">
		<h2 class="bq19-host-sign-up__heading">Be part of something huge</h2>
		<a class="bq19-button bq19-button--no-margin button button--bold" href="#">Sign up to host</a>
	</div>

	<div class="bq19-host-sign-up__bottom">
		<img class="bq19-host-sign-up__figure"
				srcset="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 1x, /images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png 2x"
				src="/images/mainsite5/big-quiz-2019/host-sign-up/caber@2x.png"
				alt="" />
	</div>
</div>
{}
Text With Image Green Background {% include 'components/big-quiz-2019-resources/text-with-image~green-background' %}
#
HTML 
    <section class="bq19-text-w-image bq19-section bq19-section--green  ">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h2">
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        
                                                    <a class="button bq19-button" href="#">Call to action</a>
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img alt="" src="http://placehold.it/468x453">
                            </div>
        </div>
    </section>
Twig 
{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

{
    "text_with_images": {
        "0": {
            "img_src": "http:\/\/placehold.it\/468x453",
            "background_color": "green",
            "reverse": false,
            "content_sections": {
                "0": {
                    "button_text": "Call to action"
                }
            }
        }
    }
}

Heading Text

Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with 500 churches and 23,000 people taking part.

On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.

Call to action
Quote {% include 'components/big-quiz-2019-resources/quote' %}
#
HTML 
<div class="bq19-quote bq19-section bq19-section--white">
	<div class="bq19-quote__inner bq19-inner">
		<blockquote class="bq19-quote__blockquote">
			<div class="bq19-quote__text">
				<p class="bq19-quote__text-inner bq19-color-turquoise">&lsquo;It was easy to organise, well planned and great fun!&rsquo;</p>
			</div>

			<footer class="bq19-quote__footer">Big Quiz Night host</footer>
		</blockquote>
	</div>
</div>
Twig 
<div class="bq19-quote bq19-section bq19-section--white">
	<div class="bq19-quote__inner bq19-inner">
		<blockquote class="bq19-quote__blockquote">
			<div class="bq19-quote__text">
				<p class="bq19-quote__text-inner bq19-color-turquoise">&lsquo;It was easy to organise, well planned and great fun!&rsquo;</p>
			</div>

			<footer class="bq19-quote__footer">Big Quiz Night host</footer>
		</blockquote>
	</div>
</div>
{}

‘It was easy to organise, well planned and great fun!’

Big Quiz Night host
Find Nearest Quiz {% include 'components/big-quiz-2019-resources/find-nearest-quiz' %}
#
HTML 
<div class="bq19-find-nearest-quiz bq19-section">
	<div class="bq19-find-nearest-quiz__top bq19-inner">
		<img
			alt=""
			class="bq19-find-nearest-quiz__car"
			src="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png" 
			srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 2x"
		/>
		<h2 class="bq19-find-nearest-quiz__heading">Find your nearest quiz</h2>
		<form class="bq19-find-nearest-quiz__form">
			<input class="bq19-find-nearest-quiz__input" placeholder="Enter your postcode..." />
			<button class="bq19-find-nearest-quiz__button bq19-button button button--bold" href="#">Find a quiz night</button>
		</form>
	</div>

	<div class="bq19-find-nearest-quiz__bottom">
		<div class="bq19-find-nearest-quiz__wrapper">
		<div class="bq19-find-nearest-quiz__card-container">
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.0 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.1 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.2 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.3 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.4 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.5 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.6 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.7 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.8 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.9 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.10 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			
				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.11 Miles Away</div>
										<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
					</div>
		</div>
	</div>
</div>
Twig 
<div class="bq19-find-nearest-quiz bq19-section">
	<div class="bq19-find-nearest-quiz__top bq19-inner">
		<img
			alt=""
			class="bq19-find-nearest-quiz__car"
			src="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png" 
			srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/robin-reliant.png 2x"
		/>
		<h2 class="bq19-find-nearest-quiz__heading">Find your nearest quiz</h2>
		<form class="bq19-find-nearest-quiz__form">
			<input class="bq19-find-nearest-quiz__input" placeholder="Enter your postcode..." />
			<button class="bq19-find-nearest-quiz__button bq19-button button button--bold" href="#">Find a quiz night</button>
		</form>
	</div>

	<div class="bq19-find-nearest-quiz__bottom">
		<div class="bq19-find-nearest-quiz__wrapper">
		<div class="bq19-find-nearest-quiz__card-container">
			{% for i in 0..11 %}

				<div class="bq19-find-nearest-quiz__card">
					<div class="bq19-find-nearest-quiz__card-location">0.{{i}} Miles Away</div>
					{# NOTE: Removed from design, commenting in case needed #}
					<div class="bq19-find-nearest-quiz__card-title">St Jude’s Church, Liverpool</div>
					<div class="bq19-find-nearest-quiz__card-address">
						15 Blogg St, Bloggsville, SM1 BL0G
					</div>
					<a class="bq19-find-nearest-quiz__card-email" href="email@tearfund.org">
						email@tearfund.org
					</a>
					<div class="bq19-find-nearest-quiz__card-phone">
						01234 567 890
					</div>
					<a class="bq19-find-nearest-quiz__card-link" href="http://www.tearfund.org">
						http://www.tearfund.org
					</a>
				</div>
			{% endfor %}
		</div>
		</div>
	</div>
</div>
{}

Find your nearest quiz

0.0 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.1 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.2 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.3 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.4 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.5 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.6 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.7 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.8 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.9 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.10 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
0.11 Miles Away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
email@tearfund.org
01234 567 890
http://www.tearfund.org
Case Study {% include 'components/big-quiz-2019-resources/case-study' %}
#
HTML 
<section class="bq19-case-study bq19-section bq19-section--yellow">
	<div class="bq19-case-study__content bq19-inner">
		<div class="bq19-case-study__media">
			<img alt="" src="https://images.unsplash.com/photo-1516676237310-04deffe44aac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="bq19-case-study__image bq19-object-fit-image" />>
		</div>
		<div class="bq19-case-study__text">
			<h2 class="bq19-case-study__heading bq19-h2">Help people like martha</h2>
			<div class="bq19-case-study__rich-text bq19-rich-text">
				<p>Every pound raised will transform the lives of people like Martha from Nigeria. She fled her rural village with her young baby when the rest of her family were killed in a dispute over land. Martha feels traumatised and is desperate for counselling and support.</p>
			</div>

			<a class="bq19-case-study__button button-underline button-underline--white" href="#">Read Martha’s story</a>
		</div>
	</div>
</section>
Twig 
<section class="bq19-case-study bq19-section bq19-section--yellow">
	<div class="bq19-case-study__content bq19-inner">
		<div class="bq19-case-study__media">
			<img alt="" src="https://images.unsplash.com/photo-1516676237310-04deffe44aac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="bq19-case-study__image bq19-object-fit-image" />>
		</div>
		<div class="bq19-case-study__text">
			<h2 class="bq19-case-study__heading bq19-h2">Help people like martha</h2>
			<div class="bq19-case-study__rich-text bq19-rich-text">
				<p>Every pound raised will transform the lives of people like Martha from Nigeria. She fled her rural village with her young baby when the rest of her family were killed in a dispute over land. Martha feels traumatised and is desperate for counselling and support.</p>
			</div>

			<a class="bq19-case-study__button button-underline button-underline--white" href="#">Read Martha’s story</a>
		</div>
	</div>
</section>
{}
>

Help people like martha

Every pound raised will transform the lives of people like Martha from Nigeria. She fled her rural village with her young baby when the rest of her family were killed in a dispute over land. Martha feels traumatised and is desperate for counselling and support.

Read Martha’s story
Footer Sign Up {% include 'components/big-quiz-2019-resources/footer-sign-up' %}
#
HTML 
<section class="bq19__footer-signup bq19-footer-signup bq19-section">
    <div class="bq19-inner">
        <div class="bq19-footer-signup__content">
            <h2 class="bq19-footer-signup__heading bq19-h2 bq19-color-turquoise">hundreds of churches. thousands of people. ONE BIG QUIZ.</h2>
            <a class="button bq19-button" href="#">Sign up to host</a>
        </div>
        
        <img alt="" class="bq19-footer-signup__mandella" src="/images/mainsite5/big-quiz-2019/mandela.gif" srcset="/images/mainsite5/big-quiz-2019/mandela.gif 1x, /images/mainsite5/big-quiz-2019/mandela@2x.gif 2x">
        <img alt="" class="bq19-footer-signup__car" src="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png" srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 2x">
    </div>


    <picture>
        <source media="(min-width: 48em)" srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background@2x.jpg 2x">
        <source srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile@2x.jpg 2x">
        <img alt="" class="bq19-footer-signup__background-image bq19-object-fit-image" src="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg">
    </picture>
</section>
Twig 
<section class="bq19__footer-signup bq19-footer-signup bq19-section">
    <div class="bq19-inner">
        <div class="bq19-footer-signup__content">
            <h2 class="bq19-footer-signup__heading bq19-h2 bq19-color-turquoise">hundreds of churches. thousands of people. ONE BIG QUIZ.</h2>
            <a class="button bq19-button" href="#">Sign up to host</a>
        </div>
        
        <img alt="" class="bq19-footer-signup__mandella" src="/images/mainsite5/big-quiz-2019/mandela.gif" srcset="/images/mainsite5/big-quiz-2019/mandela.gif 1x, /images/mainsite5/big-quiz-2019/mandela@2x.gif 2x">
        <img alt="" class="bq19-footer-signup__car" src="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png" srcset="/images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 1x, /images/mainsite5/big-quiz-2019/nearest-quiz/DeLorean@2x.png 2x">
    </div>


    <picture>
        <source media="(min-width: 48em)" srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background@2x.jpg 2x">
        <source srcset="/images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile.jpg 1x, /images/mainsite5/big-quiz-2019/one-big-quiz-background-mobile@2x.jpg 2x">
        <img alt="" class="bq19-footer-signup__background-image bq19-object-fit-image" src="/images/mainsite5/big-quiz-2019/one-big-quiz-background.jpg">
    </picture>
</section>

{}
Wave {% include 'components/big-quiz-2019-resources/wave' %}
#
HTML 
<div class="bq19-wave bq19-wave--color-green-primary">
	<svg class="bq19-wave__image" width="1400px" height="100px" viewBox="0 0 1400 100" preserveAspectRatio="none" focusable="false">
		<path d="M0,5 C700,-30 800,220 1400,20 L1400,100 L0,100" />
	</svg>
</div>
Twig 
<div class="bq19-wave bq19-wave--color-green-primary">
	<svg class="bq19-wave__image" width="1400px" height="100px" viewBox="0 0 1400 100" preserveAspectRatio="none" focusable="false">
		<path d="M0,5 C700,-30 800,220 1400,20 L1400,100 L0,100" />
	</svg>
</div>
{}
Text With Image Multiple Text Content {% include 'components/big-quiz-2019-resources/text-with-image~multiple-text-content' %}
#
HTML 
    <section class="bq19-text-w-image bq19-section  bq19-section--white  ">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h3">
                                                            <span class="bq19-text-w-image__preheading">Step 1</span>
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge</p>
                        
                                            </div>
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h3">
                                                            <span class="bq19-text-w-image__preheading">Step 2</span>
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge</p>
                        
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img alt="" src="http://placehold.it/468x453">
                            </div>
        </div>
    </section>
Twig 
{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

{
    "text_with_images": {
        "0": {
            "img_src": "http:\/\/placehold.it\/468x453",
            "small_headings": true,
            "content_sections": {
                "0": {
                    "preheading": "Step 1",
                    "text": "<p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year\u2019s Big Quiz Night was a huge<\/p>"
                },
                "1": {
                    "preheading": "Step 2",
                    "text": "<p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year\u2019s Big Quiz Night was a huge<\/p>"
                }
            }
        }
    }
}

Step 1 Heading Text

Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge

Step 2 Heading Text

Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge

Text With Image Reversed {% include 'components/big-quiz-2019-resources/text-with-image~reversed' %}
#
HTML 
    <section class="bq19-text-w-image bq19-section  bq19-section--white  bq19-text-w-image--reverse">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                                    <div class="bq19-rich-text">
                        <h2 class="bq19-h2">
                            
                                                            Heading Text
                                                    </h2>

                                                    <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        
                                                    <a class="button bq19-button" href="#">Call to action</a>
                                            </div>
                            </div>
            <div class="bq19-text-w-image__image">
                                    <img alt="" src="http://placehold.it/468x453">
                            </div>
        </div>
    </section>
Twig 
{% for text_with_image in text_with_images %}
    <section class="bq19-text-w-image bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-text-w-image--reverse{% endif %}">
        <div class="bq19-text-w-image__content bq19-inner">
            <div class="bq19-text-w-image__text">
                {% for section in text_with_image.content_sections %}
                    <div class="bq19-rich-text">
                        <h2 class="{% if text_with_image.small_headings %}bq19-h3{% else %}bq19-h2{% endif %}">
                            {% if section.preheading %}
                                <span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
                            {% endif %}

                            {% if section.heading %}
                                {{section.heading}}
                            {% else %}
                                Heading Text
                            {% endif %}
                        </h2>

                        {% if section.text %}
                            {{section.text | raw}}
                        {% else %}
                            <p>Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with <strong>500 churches</strong> and <strong>23,000 people</strong> taking part.</p>

                            <p>On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.</p>
                        {% endif %}

                        {% if section.button_text %}
                            <a class="button bq19-button" href="#">{{ section.button_text }}</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            <div class="bq19-text-w-image__image">
                {% if text_with_image.img_src_retina %}
                    <img srcset="{{ text_with_image.img_src }} 1x, {{ text_with_image.img_src_retina }} 2x"
                        src="{{ text_with_image.img_src }}"
                        alt="" />
                {% else %}
                    <img alt="" src="{{ text_with_image.img_src }}">
                {% endif %}
            </div>
        </div>
    </section>
{% endfor %}

{
    "text_with_images": {
        "0": {
            "img_src": "http:\/\/placehold.it\/468x453",
            "background_color": "",
            "reverse": true,
            "content_sections": {
                "0": {
                    "button_text": "Call to action"
                }
            }
        }
    }
}

Heading Text

Get together with your friends, family and church for an epic evening of poverty-fighting fun - last year’s Big Quiz Night was a huge success with 500 churches and 23,000 people taking part.

On Saturday 16 November, churches and other groups up and down the country will once again take part in the Big Quiz Night - a huge multi-venue, nationwide quiz - and we want it to be even bigger and better.

Call to action