Text 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 action