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