Split 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>
{}

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