Big Quiz 2019
Footer Sign Up Delorean {% include 'components/big-quiz-2019/footer-sign-up~delorean' %}
HTML
<section class="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 " 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-section">
<div class="bq19-inner">
{% if footer_signup is defined %}
<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 {{ footer_signup.car_modifier }}" srcset="{{ footer_signup.car_image_src }} 1x, {{ footer_signup.car_image_src }} 2x">
{% else %}
<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/robin-reliant@2x.png" srcset="/images/mainsite5/big-quiz-2019/robin-reliant@2x.png 1x, /images/mainsite5/big-quiz-2019/robin-reliant@2x.png 2x">
{% endif %}
</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>
{
"footer_signup": {
"car_image_src": "\/images\/mainsite5\/big-quiz-2019\/nearest-quiz\/DeLorean@2x.png"
}
}
Text With Image {% include 'components/big-quiz-2019/text-with-image' %}
HTML
<section class="bq19-text-w-image bq19-section bq19-section--large
bq19-section--white
">
<div class="bq19-inner">
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">Main header</h2>
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
<div class="bq19-rich-text">
<h3 class="bq19-h2">
Heading text
</h3>
<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>
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>
</div>
</section>
Twig
{% for text_with_image in text_with_images %}
<section class="bq19-text-w-image bq19-section bq19-section--large
{% 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 %}
{% if text_with_image.align_top %}bq19-text-w-image--align-top{% endif %}">
<div class="bq19-inner">
{% if (text_with_image_header) and (loop.index == 1) %}
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">{{text_with_image_header}}</h2>
{% endif %}
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
{% for section in text_with_image.content_sections %}
<div class="bq19-rich-text">
{% if text_with_image_header %}
{% if (section.heading) or (section.preheading) %}
<h3 class="{% if text_with_image.small_headings %}bq19-h4{% else %}bq19-h2{% endif %}">
{% if section.preheading %}
<span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
{% endif %}
{% if section.heading %}
{{section.heading | raw}}
{% endif %}
</h3>
{% endif %}
{% else %}
{% if (section.heading) or (section.preheading) %}
<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 | raw}}
{% endif %}
</h2>
{% endif %}
{% endif %}
{% 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>
{% if section.button_icon_src %}
<img alt="{{ section.button_text }}" src="{{ section.button_icon_src }}">
{% endif %}
{{ 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>
</div>
</section>
{% endfor %}
{
"text_with_image_header": "Main header",
"text_with_images": {
"0": {
"img_src": "http:\/\/placehold.it\/468x453",
"img_src_retina": "http:\/\/placehold.it\/936x906",
"background_color": "",
"reverse": false,
"content_sections": {
"0": {
"heading": "Heading text",
"button_text": "Call to action"
}
}
}
}
}Main header
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 Call to actionText With Image Secondary {% include 'components/big-quiz-2019/text-with-image-secondary' %}
HTML
<section class="bq19-text-w-image bq19-section bq19-section--large
bq19-section--yellow
bq19-text-w-image--align-top">
<div class="bq19-text-w-image__content bq19-inner">
<div class="bq19-text-w-image__image">
<h2 class="bq19-h3">We want to make it as fun and easy as possible to run the quiz. </h2>
<img srcset="/images/mainsite5/big-quiz-2019/triangle-player.png 1x, /images/mainsite5/big-quiz-2019/triangle-player@2x.png 2x"
src="/images/mainsite5/big-quiz-2019/triangle-player.png"
alt="" />
</div>
<div class="bq19-text-w-image__text">
<div class="bq19-rich-text">
<p>In this guide you’ll find loads of useful info to help make your Big Quiz Night a massive success, including:</p><ul><li>Checklist of things to do to run the perfect quiz</li><li>Details of how to change the quiz to suit your</li><li>Suggested running order for the night</li></ul><p>From September you can also go to <a href="www.tearfund.org/quiz" target="_blank" rel="noopener noreferrer">www.tearfund.org/quiz</a> to order and download even more resources.</p><p>Once again, thank you. Your support is making a huge difference so have fun and know you are part of something amazing. We’re looking forward to hearing all about your Big Quiz!</p>
</div>
</div>
</div>
</section>
Twig
{% for text_with_image in text_with_images %}
<section class="bq19-text-w-image bq19-section bq19-section--large
{% 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 %}
{% if text_with_image.align_top %}bq19-text-w-image--align-top{% endif %}">
<div class="bq19-text-w-image__content bq19-inner">
<div class="bq19-text-w-image__image">
{% if text_with_image.image_header %}
<h2 class="bq19-h3">{{text_with_image.image_header}}</h2>
{% endif %}
{% 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 class="bq19-text-w-image__text">
{% for section in text_with_image.content_sections %}
<div class="bq19-rich-text">
{% 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="bq19-button {% if text_with_image.background_color == "yellow" %}secondary-button {% else %} button{% endif %}" href="#">{{ section.button_text }}</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</section>
{% endfor %}
{
"text_with_images": {
"0": {
"img_src": "\/images\/mainsite5\/big-quiz-2019\/triangle-player.png",
"img_src_retina": "\/images\/mainsite5\/big-quiz-2019\/triangle-player@2x.png",
"image_header": "We want to make it as fun and easy as possible to run the quiz. ",
"background_color": "yellow",
"align_top": true,
"content_sections": {
"0": {
"text": "<p>In this guide you\u2019ll find loads of useful info to help make your Big Quiz Night a massive success, including:<\/p><ul><li>Checklist of things to do to run the perfect quiz<\/li><li>Details of how to change the quiz to suit your<\/li><li>Suggested running order for the night<\/li><\/ul><p>From September you can also go to <a href=\"www.tearfund.org\/quiz\" target=\"_blank\" rel=\"noopener noreferrer\">www.tearfund.org\/quiz<\/a> to order and download even more resources.<\/p><p>Once again, thank you. Your support is making a huge difference so have fun and know you are part of something amazing. We\u2019re looking forward to hearing all about your Big Quiz!<\/p>"
}
}
}
}
}We want to make it as fun and easy as possible to run the quiz.
In this guide you’ll find loads of useful info to help make your Big Quiz Night a massive success, including:
- Checklist of things to do to run the perfect quiz
- Details of how to change the quiz to suit your
- Suggested running order for the night
From September you can also go to www.tearfund.org/quiz to order and download even more resources.
Once again, thank you. Your support is making a huge difference so have fun and know you are part of something amazing. We’re looking forward to hearing all about your Big Quiz!
Centered Text {% include 'components/big-quiz-2019/centered-text' %}
HTML
<section class="bq19-section bq19-section--green bq19-centered-text">
<div class="bq19-centered-text__wrapper bq19-inner bq19-align-center">
<h2 class="bq19-h2">Let’s Get Quizzical</h2>
<p class="bq19-summary">Many people question what they can do in the face of such need around the world, but you are doing something about it. Thank you for helping to be the answer to poverty.</p>
<div class="bq19-centered-text__text bq19-rich-text bq19-align-center">
<p>We are so grateful you have chosen to give your time and energy to help people in poverty across the world. Thank you for joining us for The Big Quiz Night – it’s going to be another incredible event.</p>
</div>
</div>
</section>
Twig
<section class="bq19-section bq19-section--green bq19-centered-text">
<div class="bq19-centered-text__wrapper bq19-inner bq19-align-center">
<h2 class="bq19-h2">Let’s Get Quizzical</h2>
<p class="bq19-summary">Many people question what they can do in the face of such need around the world, but you are doing something about it. Thank you for helping to be the answer to poverty.</p>
<div class="bq19-centered-text__text bq19-rich-text bq19-align-center">
<p>We are so grateful you have chosen to give your time and energy to help people in poverty across the world. Thank you for joining us for The Big Quiz Night – it’s going to be another incredible event.</p>
</div>
</div>
</section>
{}Let’s Get Quizzical
Many people question what they can do in the face of such need around the world, but you are doing something about it. Thank you for helping to be the answer to poverty.
We are so grateful you have chosen to give your time and energy to help people in poverty across the world. Thank you for joining us for The Big Quiz Night – it’s going to be another incredible event.
Hero Resources {% include 'components/big-quiz-2019/hero-resources' %}
HTML
<div class="bq19-hero bq19-hero--resources">
<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>
</div>
<div class="bq19-hero-image bq19-hero-image--resources">
<img class="bq19-hero-image__sprite bq19-hero-image__resources"
srcset="/images/mainsite5/big-quiz-2019/hero-image/hero-resources.png 1x, /images/mainsite5/big-quiz-2019/hero-image/hero-resources.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/hero-resources.png"
alt="" />
</div>
</div>
</div>
Twig
<div class="bq19-hero bq19-hero--resources">
<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>
</div>
<div class="bq19-hero-image bq19-hero-image--resources">
<img class="bq19-hero-image__sprite bq19-hero-image__resources"
srcset="/images/mainsite5/big-quiz-2019/hero-image/hero-resources.png 1x, /images/mainsite5/big-quiz-2019/hero-image/hero-resources.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/hero-resources.png"
alt="" />
</div>
</div>
</div>{}Resources
Order or download resources to make your night fabulous
Text With Image Align Top {% include 'components/big-quiz-2019/text-with-image~align-top' %}
HTML
<section class="bq19-text-w-image bq19-section bq19-section--large
bq19-section--yellow
bq19-text-w-image--align-top">
<div class="bq19-inner">
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">Main header</h2>
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
<div class="bq19-rich-text">
<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>
Call to action</a>
</div>
</div>
<div class="bq19-text-w-image__image">
<img alt="" src="http://placehold.it/468x453">
</div>
</div>
</div>
</section>
Twig
{% for text_with_image in text_with_images %}
<section class="bq19-text-w-image bq19-section bq19-section--large
{% 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 %}
{% if text_with_image.align_top %}bq19-text-w-image--align-top{% endif %}">
<div class="bq19-inner">
{% if (text_with_image_header) and (loop.index == 1) %}
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">{{text_with_image_header}}</h2>
{% endif %}
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
{% for section in text_with_image.content_sections %}
<div class="bq19-rich-text">
{% if text_with_image_header %}
{% if (section.heading) or (section.preheading) %}
<h3 class="{% if text_with_image.small_headings %}bq19-h4{% else %}bq19-h2{% endif %}">
{% if section.preheading %}
<span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
{% endif %}
{% if section.heading %}
{{section.heading | raw}}
{% endif %}
</h3>
{% endif %}
{% else %}
{% if (section.heading) or (section.preheading) %}
<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 | raw}}
{% endif %}
</h2>
{% endif %}
{% endif %}
{% 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>
{% if section.button_icon_src %}
<img alt="{{ section.button_text }}" src="{{ section.button_icon_src }}">
{% endif %}
{{ 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>
</div>
</section>
{% endfor %}
{
"text_with_image_header": "Main header",
"text_with_images": {
"0": {
"img_src": "http:\/\/placehold.it\/468x453",
"background_color": "yellow",
"reverse": false,
"align_top": true,
"content_sections": {
"0": {
"button_text": "Call to action"
}
}
}
}
}Main header
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 Call to actionSplit Call To Actions {% include 'components/big-quiz-2019/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>
{}
Hero {% include 'components/big-quiz-2019/hero' %}
HTML
<div class="bq19-hero">
<div class="bq19-inner">
<h1 class="bq19-hero__heading-image">
<span class="bq19-audio-only">The Big Quiz Night 2019</span>
<div class="bq19-hero-image">
<img class="bq19-hero-image__sprite bq19-hero-image__text"
srcset="/images/mainsite5/big-quiz-2019/hero-image/text.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/text.png"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__delorean"
srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__delorean-fire"
srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean-fire@2x.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__flag"
srcset="/images/mainsite5/big-quiz-2019/hero-image/flag.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/flag@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/flag.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__octopus"
srcset="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/octopus@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__churchill"
srcset="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/churchill@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__whoosh"
srcset="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png 1x, /images/mainsite5/big-quiz-2019/hero-image/whoosh@2x.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__eagle"
srcset="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/eagle@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__dancers"
srcset="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/dancers@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__javelin"
srcset="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/javelin@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif"
alt="" />
</div>
</h1>
<div class="bq19-hero__text center-text">
<time class="bq19-hero__heading" datetime="2019-11-16">Sat 16th Nov</time>
<p class="bq19-hero__strapline">Hundreds of churches. Thousands of people. One Big Quiz Night.</p>
<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
</div>
</div>
</div>
Twig
<div class="bq19-hero">
<div class="bq19-inner">
<h1 class="bq19-hero__heading-image">
<span class="bq19-audio-only">The Big Quiz Night 2019</span>
<div class="bq19-hero-image">
<img class="bq19-hero-image__sprite bq19-hero-image__text"
srcset="/images/mainsite5/big-quiz-2019/hero-image/text.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/text.png"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__delorean"
srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__delorean-fire"
srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean-fire@2x.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__flag"
srcset="/images/mainsite5/big-quiz-2019/hero-image/flag.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/flag@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/flag.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__octopus"
srcset="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/octopus@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__churchill"
srcset="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/churchill@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__whoosh"
srcset="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png 1x, /images/mainsite5/big-quiz-2019/hero-image/whoosh@2x.png 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__eagle"
srcset="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/eagle@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__dancers"
srcset="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/dancers@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif"
alt="" />
<img class="bq19-hero-image__sprite bq19-hero-image__javelin"
srcset="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/javelin@2x.gif 2x"
src="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif"
alt="" />
</div>
</h1>
<div class="bq19-hero__text center-text">
<time class="bq19-hero__heading" datetime="2019-11-16">Sat 16th Nov</time>
<p class="bq19-hero__strapline">Hundreds of churches. Thousands of people. One Big Quiz Night.</p>
<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
</div>
</div>
</div>{}
The Big Quiz Night 2019
Hundreds of churches. Thousands of people. One Big Quiz Night.
Sign up to hostSplit Call To Actions Single {% include 'components/big-quiz-2019/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
}
}
}Host Sign Up {% include 'components/big-quiz-2019/host-sign-up' %}
HTML
<div class="bq19-host-sign-up bq19-section bq19-section--large">
<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 bq19-section--large">
<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>{}Be part of something huge
Sign up to host
Text With Image Green Background {% include 'components/big-quiz-2019/text-with-image~green-background' %}
HTML
<section class="bq19-text-w-image bq19-section bq19-section--large
bq19-section--green
">
<div class="bq19-inner">
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">Main header</h2>
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
<div class="bq19-rich-text">
<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>
Call to action</a>
</div>
</div>
<div class="bq19-text-w-image__image">
<img alt="" src="http://placehold.it/468x453">
</div>
</div>
</div>
</section>
Twig
{% for text_with_image in text_with_images %}
<section class="bq19-text-w-image bq19-section bq19-section--large
{% 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 %}
{% if text_with_image.align_top %}bq19-text-w-image--align-top{% endif %}">
<div class="bq19-inner">
{% if (text_with_image_header) and (loop.index == 1) %}
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">{{text_with_image_header}}</h2>
{% endif %}
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
{% for section in text_with_image.content_sections %}
<div class="bq19-rich-text">
{% if text_with_image_header %}
{% if (section.heading) or (section.preheading) %}
<h3 class="{% if text_with_image.small_headings %}bq19-h4{% else %}bq19-h2{% endif %}">
{% if section.preheading %}
<span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
{% endif %}
{% if section.heading %}
{{section.heading | raw}}
{% endif %}
</h3>
{% endif %}
{% else %}
{% if (section.heading) or (section.preheading) %}
<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 | raw}}
{% endif %}
</h2>
{% endif %}
{% endif %}
{% 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>
{% if section.button_icon_src %}
<img alt="{{ section.button_text }}" src="{{ section.button_icon_src }}">
{% endif %}
{{ 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>
</div>
</section>
{% endfor %}
{
"text_with_image_header": "Main header",
"text_with_images": {
"0": {
"img_src": "http:\/\/placehold.it\/468x453",
"background_color": "green",
"reverse": false,
"content_sections": {
"0": {
"button_text": "Call to action"
}
}
}
}
}Main header
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 Call to actionQuote {% include 'components/big-quiz-2019/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">‘It was easy to organise, well planned and great fun!’</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">‘It was easy to organise, well planned and great fun!’</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!’
Find Nearest Quiz {% include 'components/big-quiz-2019/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">
reallysuperduperlongemailaddress@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">
reallysuperduperlongemailaddress@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">
reallysuperduperlongemailaddress@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">
reallysuperduperlongemailaddress@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">
reallysuperduperlongemailaddress@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">
reallysuperduperlongemailaddress@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..5 %}
<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">
reallysuperduperlongemailaddress@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
reallysuperduperlongemailaddress@tearfund.org
01234 567 890
http://www.tearfund.org
0.1 miles away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
reallysuperduperlongemailaddress@tearfund.org
01234 567 890
http://www.tearfund.org
0.2 miles away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
reallysuperduperlongemailaddress@tearfund.org
01234 567 890
http://www.tearfund.org
0.3 miles away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
reallysuperduperlongemailaddress@tearfund.org
01234 567 890
http://www.tearfund.org
0.4 miles away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
reallysuperduperlongemailaddress@tearfund.org
01234 567 890
http://www.tearfund.org
0.5 miles away
St Jude’s Church, Liverpool
15 Blogg St, Bloggsville, SM1 BL0G
reallysuperduperlongemailaddress@tearfund.org
01234 567 890
http://www.tearfund.org
Case Study {% include 'components/big-quiz-2019/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="/images/mainsite5/big-quiz-2019/BigQuiz2019Martha.jpg"
srcset="/images/mainsite5/big-quiz-2019/BigQuiz2019Martha.jpg 1x, /images/mainsite5/big-quiz-2019/BigQuiz2019Martha.jpg 2x"
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="/images/mainsite5/big-quiz-2019/BigQuiz2019Martha.jpg"
srcset="/images/mainsite5/big-quiz-2019/BigQuiz2019Martha.jpg 1x, /images/mainsite5/big-quiz-2019/BigQuiz2019Martha.jpg 2x"
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.
Footer Sign Up {% include 'components/big-quiz-2019/footer-sign-up' %}
HTML
<section class="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 " srcset="/images/mainsite5/big-quiz-2019/robin-reliant.png 1x, /images/mainsite5/big-quiz-2019/robin-reliant.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-section">
<div class="bq19-inner">
{% if footer_signup is defined %}
<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 {{ footer_signup.car_modifier }}" srcset="{{ footer_signup.car_image_src }} 1x, {{ footer_signup.car_image_src }} 2x">
{% else %}
<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/robin-reliant@2x.png" srcset="/images/mainsite5/big-quiz-2019/robin-reliant@2x.png 1x, /images/mainsite5/big-quiz-2019/robin-reliant@2x.png 2x">
{% endif %}
</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>
{
"footer_signup": {
"car_image_src": "\/images\/mainsite5\/big-quiz-2019\/robin-reliant.png"
}
}
Wave {% include 'components/big-quiz-2019/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/text-with-image~multiple-text-content' %}
HTML
<section class="bq19-text-w-image bq19-section bq19-section--large
bq19-section--white
">
<div class="bq19-inner">
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">Main header</h2>
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
<div class="bq19-rich-text">
<h3 class="bq19-h4">
<span class="bq19-text-w-image__preheading">Step 1</span>
</h3>
<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">
<h3 class="bq19-h4">
<span class="bq19-text-w-image__preheading">Step 2</span>
</h3>
<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>
</div>
</section>
Twig
{% for text_with_image in text_with_images %}
<section class="bq19-text-w-image bq19-section bq19-section--large
{% 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 %}
{% if text_with_image.align_top %}bq19-text-w-image--align-top{% endif %}">
<div class="bq19-inner">
{% if (text_with_image_header) and (loop.index == 1) %}
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">{{text_with_image_header}}</h2>
{% endif %}
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
{% for section in text_with_image.content_sections %}
<div class="bq19-rich-text">
{% if text_with_image_header %}
{% if (section.heading) or (section.preheading) %}
<h3 class="{% if text_with_image.small_headings %}bq19-h4{% else %}bq19-h2{% endif %}">
{% if section.preheading %}
<span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
{% endif %}
{% if section.heading %}
{{section.heading | raw}}
{% endif %}
</h3>
{% endif %}
{% else %}
{% if (section.heading) or (section.preheading) %}
<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 | raw}}
{% endif %}
</h2>
{% endif %}
{% endif %}
{% 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>
{% if section.button_icon_src %}
<img alt="{{ section.button_text }}" src="{{ section.button_icon_src }}">
{% endif %}
{{ 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>
</div>
</section>
{% endfor %}
{
"text_with_image_header": "Main header",
"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>"
}
}
}
}
}Main header
Step 1
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
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
Cards {% include 'components/big-quiz-2019/cards' %}
HTML
<section class="bq19-cards bq19-section bq19-section--white ">
<div class="bq19-cards__content bq19-inner">
<h2 class="bq19-cards__intro-title"></h2>
<p class="bq19-cards__intro-subtitle"></p>
<div class="bq19-cards__list">
</div>
</div>
</section>
Twig
<section class="bq19-cards 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-cards--reverse{% endif %}">
<div class="bq19-cards__content bq19-inner">
<h2 class="bq19-cards__intro-title">{{cards_listing.title}}</h2>
<p class="bq19-cards__intro-subtitle">{{cards_listing.subtitle}}</p>
<div class="bq19-cards__list">
{% for card in cards_listing.cards %}
<div class="bq19-cards__item">
{% if card.img_src %}
<div class="bq19-cards__image-container">
<img class="bq19-cards__image" src="{{card.img_src}}" />
</div>
{% endif %}
{% if card.preheading %}
<span class="bq19-cards__preheading">{{card.preheading}}</span>
{% endif %}
{% if card.heading %}
<h2 class="bq19-cards__heading">{{card.heading}}</h2>
{% endif %}
{% if card.text %}
<p class="bq19-cards__subheading">{{card.text}}</p>
{% endif %}
{% if card.button_text %}
<a class="button bold" href="{{card.button_href}}">
<img src="/images/mainsite5/big-quiz-2019/Download.svg" alt="{{card.text}}" />
{{card.button_text}}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</section>{
"cards": {
"0": {
"img_src": "\/images\/mainsite5\/big-quiz-2019\/resource-image.png",
"preheading": "PDF",
"heading": "Blank answer sheets",
"text": "For your teams to fill-in and return for marking, these are generic so can be used for any round",
"button_text": "Download"
}
}
}Text With Image Yellow Background {% include 'components/big-quiz-2019/text-with-image~yellow-background' %}
HTML
<section class="bq19-text-w-image bq19-section bq19-section--large
bq19-section--yellow
">
<div class="bq19-inner">
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">Main header</h2>
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
<div class="bq19-rich-text">
<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>
Call to action</a>
</div>
</div>
<div class="bq19-text-w-image__image">
<img alt="" src="http://placehold.it/468x453">
</div>
</div>
</div>
</section>
Twig
{% for text_with_image in text_with_images %}
<section class="bq19-text-w-image bq19-section bq19-section--large
{% 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 %}
{% if text_with_image.align_top %}bq19-text-w-image--align-top{% endif %}">
<div class="bq19-inner">
{% if (text_with_image_header) and (loop.index == 1) %}
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">{{text_with_image_header}}</h2>
{% endif %}
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
{% for section in text_with_image.content_sections %}
<div class="bq19-rich-text">
{% if text_with_image_header %}
{% if (section.heading) or (section.preheading) %}
<h3 class="{% if text_with_image.small_headings %}bq19-h4{% else %}bq19-h2{% endif %}">
{% if section.preheading %}
<span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
{% endif %}
{% if section.heading %}
{{section.heading | raw}}
{% endif %}
</h3>
{% endif %}
{% else %}
{% if (section.heading) or (section.preheading) %}
<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 | raw}}
{% endif %}
</h2>
{% endif %}
{% endif %}
{% 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>
{% if section.button_icon_src %}
<img alt="{{ section.button_text }}" src="{{ section.button_icon_src }}">
{% endif %}
{{ 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>
</div>
</section>
{% endfor %}
{
"text_with_image_header": "Main header",
"text_with_images": {
"0": {
"img_src": "http:\/\/placehold.it\/468x453",
"background_color": "yellow",
"reverse": false,
"content_sections": {
"0": {
"button_text": "Call to action"
}
}
}
}
}Main header
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 Call to actionText With Image Reversed {% include 'components/big-quiz-2019/text-with-image~reversed' %}
HTML
<section class="bq19-text-w-image bq19-section bq19-section--large
bq19-section--white
bq19-text-w-image--reverse ">
<div class="bq19-inner">
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">Main header</h2>
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
<div class="bq19-rich-text">
<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>
Call to action</a>
</div>
</div>
<div class="bq19-text-w-image__image">
<img alt="" src="http://placehold.it/468x453">
</div>
</div>
</div>
</section>
Twig
{% for text_with_image in text_with_images %}
<section class="bq19-text-w-image bq19-section bq19-section--large
{% 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 %}
{% if text_with_image.align_top %}bq19-text-w-image--align-top{% endif %}">
<div class="bq19-inner">
{% if (text_with_image_header) and (loop.index == 1) %}
<h2 class="bq19-text-w-image__main-header bq19-h2 bq19-align-center bq19-color-green">{{text_with_image_header}}</h2>
{% endif %}
<div class="bq19-text-w-image__content">
<div class="bq19-text-w-image__text">
{% for section in text_with_image.content_sections %}
<div class="bq19-rich-text">
{% if text_with_image_header %}
{% if (section.heading) or (section.preheading) %}
<h3 class="{% if text_with_image.small_headings %}bq19-h4{% else %}bq19-h2{% endif %}">
{% if section.preheading %}
<span class="bq19-text-w-image__preheading">{{section.preheading}}</span>
{% endif %}
{% if section.heading %}
{{section.heading | raw}}
{% endif %}
</h3>
{% endif %}
{% else %}
{% if (section.heading) or (section.preheading) %}
<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 | raw}}
{% endif %}
</h2>
{% endif %}
{% endif %}
{% 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>
{% if section.button_icon_src %}
<img alt="{{ section.button_text }}" src="{{ section.button_icon_src }}">
{% endif %}
{{ 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>
</div>
</section>
{% endfor %}
{
"text_with_image_header": "Main header",
"text_with_images": {
"0": {
"img_src": "http:\/\/placehold.it\/468x453",
"background_color": "",
"reverse": true,
"content_sections": {
"0": {
"button_text": "Call to action"
}
}
}
}
}Main header
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 Call to actionGuide Hero {% include 'components/big-quiz-2019/guide-hero' %}
HTML
<div class="bq19-hero bq19-hero--guide">
<div class="bq19-inner">
<div class="bq19-hero__text center-text">
<h1 class="bq19-hero__heading bq19-align-center">The big quiz night guide</h1>
<p class="bq19-hero__strapline">Everything you need to run your Big Quiz Night</p>
</div>
<img class="bq19-hero__image bq19-align-center"
srcset="/images/mainsite5/big-quiz-2019/guide-hero.png 1x, /images/mainsite5/big-quiz-2019/guide-hero.png 2x"
src="/images/mainsite5/big-quiz-2019/guide-hero.png"
alt="" />
</div>
<img class="bq19-hero__horizon"
srcset="/images/mainsite5/big-quiz-2019/guide/horizon.jpg 1x, /images/mainsite5/big-quiz-2019/guide/horizon@2x.jpg 2x"
src="/images/mainsite5/big-quiz-2019/guide/horizon.jpg"
alt="" />
</div>
Twig
<div class="bq19-hero bq19-hero--guide">
<div class="bq19-inner">
<div class="bq19-hero__text center-text">
<h1 class="bq19-hero__heading bq19-align-center">The big quiz night guide</h1>
<p class="bq19-hero__strapline">Everything you need to run your Big Quiz Night</p>
</div>
<img class="bq19-hero__image bq19-align-center"
srcset="/images/mainsite5/big-quiz-2019/guide-hero.png 1x, /images/mainsite5/big-quiz-2019/guide-hero.png 2x"
src="/images/mainsite5/big-quiz-2019/guide-hero.png"
alt="" />
</div>
<img class="bq19-hero__horizon"
srcset="/images/mainsite5/big-quiz-2019/guide/horizon.jpg 1x, /images/mainsite5/big-quiz-2019/guide/horizon@2x.jpg 2x"
src="/images/mainsite5/big-quiz-2019/guide/horizon.jpg"
alt="" />
</div>{}The big quiz night guide
Everything you need to run your Big Quiz Night
