<!-- Default -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Zig Zag -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Diagonal -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-diagonal basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Weave -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-weave basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Right -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-right-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Left -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- White -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-white">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Blue -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-blue">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-white" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Black -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-black">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-white" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Midblue -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-mid-blue">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Strawberry -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-strawberry">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Yellow -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-yellow">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Primary Blue -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-primary-blue">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Turquoise -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Orange -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-orange">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Green -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-green">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Green Blue -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-green-blue">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Image srcset support -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-turquoise">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Example Use -->
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-right-align basic-promo-default">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-green-blue">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Where better to learn than in our world-class spa in Buxton?</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail. Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all
                    easy to get to by road and rail.</p>
                <a href="#" class="button-outline" title="Where better to learn than in our world-class spa in Buxton?" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>
<div class="basic-promo-container">
    <section class="basic-promo basic-promo-left-align basic-promo-blue">
        <div class="basic-promo-backdrop basic-promo-pattern basic-promo-pattern-zigzag basic-promo-pattern-yellow">
            <div class="basic-promo-pattern-background" role="presentation"></div>
            <div class="basic-promo-image-container">
                <img src="../../images/UG19Prosp-Keyvis-292.jpg" alt="Man at the Gym" /> </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>Living at the University of Derby</h2>
                <p>Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.</p>
                <a href="#" class="button-white" title="Living at the University of Derby" role="button" tabindex="0" data-scroll>
        View accomodation options
            <span class="button-overlay"><span>
                        View accomodation options
                    </span></span></a> </div>
        </div>
    </section>
</div>

<!-- Default -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Zig Zag -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Diagonal -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Weave -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Right -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Left -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- White -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Blue -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Black -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Midblue -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Strawberry -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Yellow -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Primary Blue -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Turquoise -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Orange -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Green -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Green Blue -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Image srcset support -->
<div class="basic-promo-container">
    <section class="basic-promo{% if imageAlignment %} basic-promo-{{ imageAlignment }}-align{% endif %}{% if scheme %} basic-promo-{{ scheme }}{% endif %}">
        <div class="basic-promo-backdrop{% if pattern %} basic-promo-pattern basic-promo-pattern-{{ pattern }}{% if patternColour %} basic-promo-pattern-{{ patternColour }}{% endif %}{% endif %}">
            {% if pattern %}<div class="basic-promo-pattern-background" role="presentation"></div>{% endif %}
            <div class="basic-promo-image-container">
                {% if image %}<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />{% endif %}
            </div>
        </div>
        <div class="basic-promo-panel">
            <div class="basic-promo-panel-inner">
                <h2>{{ title }}</h2>
                <p>{{ copy }}</p>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href,
                    scheme: (scheme == 'black' or scheme == 'blue') ? 'white' : ''
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>

<!-- Example Use -->
{% include '@basic-promo' with {
    imageAlignment: 'right',
    image: {
        path: '/images/UG19Prosp-Keyvis-292.jpg',
        alt: 'Man at the Gym'
    },
    pattern: 'zigzag',
    patternColour: 'green-blue',
    scheme: 'default',
    title: 'Where better to learn than in our world-class spa in Buxton?',
    copy: "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail. Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
    callToAction: {
        label: 'View accomodation options',
        href: '#'
    }
} %}
{% include '@basic-promo' with {
    imageAlignment: 'left',
    image: {
        path: '/images/UG19Prosp-Keyvis-292.jpg',
        alt: 'Man at the Gym'
    },
    pattern: 'zigzag',
    patternColour: 'yellow',
    scheme: 'blue',
    title: 'Living at the University of Derby',
    copy: "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
    callToAction: {
        label: 'View accomodation options',
        href: '#'
    }
} %}
/* Default */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Zig Zag */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Diagonal */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "diagonal",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Weave */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "weave",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Right */
{
  "imageAlignment": "right",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Left */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* White */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "white",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Blue */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "blue",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Black */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "black",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Midblue */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "mid-blue",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Strawberry */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "strawberry",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Yellow */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "yellow",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Primary Blue */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "primary-blue",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Turquoise */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Orange */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "orange",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Green */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "green",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Green Blue */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "green-blue",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

/* Image srcset support */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  },
  "srcset": [
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg",
      "width": 320
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_517.jpg",
      "width": 517
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_685.jpg",
      "width": 685
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_767.jpg",
      "width": 767
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg",
      "width": 538
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_694.jpg",
      "width": 694
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg",
      "width": 596
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_720.jpg",
      "width": 720
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_480.jpg",
      "width": 480
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_810.jpg",
      "width": 810
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1077.jpg",
      "width": 1077
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1274.jpg",
      "width": 1274
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1461.jpg",
      "width": 1461
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1643.jpg",
      "width": 1643
    },
    {
      "path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1700.jpg",
      "width": 1700
    }
  ]
}

/* Example Use */
{
  "imageAlignment": "left",
  "image": {
    "path": "/images/UG19Prosp-Keyvis-292.jpg",
    "alt": "Man at the Gym"
  },
  "pattern": "zigzag",
  "patternColour": "turquoise",
  "scheme": "default",
  "title": "Living at the University of Derby",
  "copy": "Our three safe and friendly campuses are all located in the English county of Derbyshire. They're all easy to get to by road and rail.",
  "callToAction": {
    "label": "View accomodation options",
    "href": "#"
  }
}

  • Content:
    // defining the colours as a collection allows us to loop through them and generate classnames based on the keys
    $basic-promo-pattern-colours: (
        mid-blue: $mid-blue,
        strawberry: $strawberry,
        yellow: $yellow,
        primary-blue: $primary-blue,
        turquoise: $turquoise,
        orange: $orange,
        green: $green,
        green-blue: $green-blue
    );
    
    // pictures used should be fixed at a 4x3 ratio (0.66) so this value is used for the sake of readability in calculations
    $image-aspect-ratio: .66;
    
    // the image and pattern backgrounds are positioned absolutely so that they can be overlapped by the panel itself
    // but the panel might not be tall enough to show all of the background image. We need to set a min-height on the
    // container panel to get around this. The min-height should always be the height of the image (and no more) and
    // because we reliably know the viewport width and the aspect ratio of the image, we can work this out.
    //
    // 100% viewport width - (40px margin * 2) - 10px gutter = the available space of 16 columns
    // available space divided into the number of columns = the image width
    // image width * aspect ratio of 4/3 = the image height
    
    $gutter: 10px;
    $margin: $max-size; // max-size comes from the fluid-margins calculations elsewhere. but above ipad portrait this is always 40px
    $max-width: 100vw;
    $total-columns: 16;
    $image-columns: 11;
    $width-ratio: $image-columns / $total-columns;
    
    // height = 100% viewport width * image aspect ratio - the margins either side of the image
    $image-height-mobile: #{'calc(' + 100vw * $image-aspect-ratio + ' + ' + fluid-margin(true) + ')'};
    
    // on tablet devices, the image width is 11 columns
    // I'm sorry, 130px is a magic number to make this work and I don't know why.
    $image-height-tablet: #{'calc((((' + $max-width + ' - (130px)) * (' + $width-ratio + ')) - ' + $gutter + ') * ' + $image-aspect-ratio + ')'};
    
    // on desktop devices, the image width is 9 columns
    $image-columns: 9;
    $width-ratio: $image-columns / $total-columns;
    // I'm sorry, 60px is a magic number to make this work and I don't know why.
    $image-height-desktop: #{'calc((((' + $max-width + ' - (60px)) * (' + $width-ratio + ')) - ' + $gutter + ') * ' + $image-aspect-ratio + ')'};
    
    // the grid is capped at 1700px wide, so above that screen size we need to cap our max width calculations by using a fixed px instead of viewport width
    $max-width: 1780px;
    // I'm sorry, 60px is a magic number to make this work and I don't know why.
    $image-height-large-desktop: #{'calc((((' + $max-width + ' - (60px)) * (' + $width-ratio + ')) - ' + $gutter + ') * ' + $image-aspect-ratio + ')'};
    
    // use to size the content like the lost-grid columns logic, but without the pseudo-element creation to make things difficult.
    @mixin flexbox-width-without-columns($columns, $total) {
        flex-basis: 0 0 #{'calc(99.9% * ' + ($columns/$total) + ' - (' + $gutter + ' - ' + $gutter + ' * ' + ($columns/$total) + '))'};
        width: #{'calc(99.9% * ' + ($columns/$total) + ' - (' + $gutter + ' - '+$gutter+' * ' + ($columns/$total) + '))'};
        max-width: #{'calc(99.9% * ' + ($columns/$total) + ' - (' + $gutter + ' - ' + $gutter + ' * ' + ($columns/$total) + '))'};
    }
    
    .basic-promo {
        display: flex;
        position: relative;
        align-items: flex-start;
        justify-content: flex-end;
        lost-column: 8/8;
        lost-align: top-right;
        
        // on mobile (default) we don't need a minimum height, because we handle this with a margin top/bottom on the panel instead
        
        @include for-tablet-portrait-up {
            min-height: $image-height-tablet;
        }
    
        @include for-largerthan-ipad-portrait {
            lost-offset: 1/16;
            lost-column: 14/16;
            min-height: $image-height-desktop;
        }
    
        @media (min-width: 1780px) {
            min-height: $image-height-large-desktop;
        }
    
        &-container {
            @include margin-medium;
            width: 100%;
        }
    
        &-blue,
        &-black {
            .basic-promo-panel {
                background: $primary-blue;
    
                &,
                h2 {
                    color: $white;
                }
    
                &-inner {
                    margin-right: 20px;
                    margin-left: 20px;
    
                    .button {
                        margin-bottom: px-to-em(18, 16);
                    }
    
                    @include for-tablet-portrait-up {
                        margin-right: 0;
                        margin-left: 0;
    
                        .button {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    
        &-black {
            .basic-promo-panel {
                background: $black;
    
                .button {
                    .button-overlay {
                        color: $black;
                    }
                }
            }
        }
    
        &-right-align {
            lost-align: top-left;
        }
    
        &-panel {
            position: relative;
            background: $white;
            // on mobile the absolutely positioned background should appear above the panel.
            // we can achieve that by adding a margin to the top of the panel which is equal to the height of the image
            margin-top: $image-height-mobile;
    
            &-inner {
                margin-top: 1.125rem;
    
                // for accessiblity we need to use an h2, but want it to look like an h3
                h2 {
                    @extend .h3;
                }
    
                .button {
                    margin-bottom: 0px;
                }
            }
    
            @include for-tablet-portrait-up {
                @include flexbox-width-without-columns(7.5, 16);
                margin-top: $margin-small;
                padding: 30px 30px;
                margin-left: 20px;
                margin-right: 20px;
    
                .basic-promo-right-align & {
                    margin-right: 20px;
                }
    
                &-inner {
                    margin-bottom: 30px;
                    margin: 0;
                }
            }
    
    
            @include for-largerthan-ipad-portrait {
                $single-column-width: #{"calc(" + 1 / 14 * 100 + "% + (10px / 14))"};
    
                @include flexbox-width-without-columns(6, 14);
                margin-top: $margin-small;
                padding: 30px 40px;
                margin-right: $single-column-width;
    
                .basic-promo-right-align & {
                    margin-right: 20px;
                    margin-left: $single-column-width;
                }
            }
        }
    
        &-backdrop {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            justify-content: flex-start;
            display: flex;
    
            @include for-tablet-portrait-up {
                overflow: hidden;
    
                .basic-promo-right-align & {
                    justify-content: flex-end;
                }
            }
    
            @include for-tablet-portrait-up {
                max-height: $image-height-tablet;
            }
    
            @include for-largerthan-ipad-portrait {
                max-height: $image-height-desktop;
            }
    
            @media (min-width: 1780px) {
                max-height: $image-height-large-desktop;
            }
        }
    
        &-image-container {
            margin-bottom: 0;
            font-size: 0;
            position: relative;
    
            img {
                max-width: 100%;
                width: 100%;
            }
    
            @include for-tablet-portrait-up {
                lost-column: 9/14;
                lost-align: right;
                margin: 0;
            }
        }
    
        &-pattern {
            &-background {
                position: absolute;
                display: flex;
                flex: 1;
                width: 75%;
                height: 100%;
                top: -20px;
                right: fluid-margin(true);
            }
    
            @include for-tablet-portrait-up {
                &-background {
                    width: 100%;
                    top: 0;
                    left: 0;
                    right: 0;
                }
            }
    
            @each $item, $colour in $basic-promo-pattern-colours {
                &-#{$item} {
    
                    &.basic-promo-pattern-zigzag {
                        .basic-promo-pattern-background {
                            @include pattern-zigzag($colour);
                        }
                    }
    
                    &.basic-promo-pattern-diagonal {
                        .basic-promo-pattern-background {
                            @include pattern-diagonal($colour);
                        }
                    }
    
                    &.basic-promo-pattern-weave {
                        .basic-promo-pattern-background {
                            @include pattern-weave($colour);
                        }
                    }
                }
            }
        }
    }
    
  • URL: /components/raw/basic-promo/basic-promo.scss
  • Filesystem Path: components/components/promo/basic-promo/basic-promo.scss
  • Size: 8.4 KB

Promo Component

A visual promotion component which combines lead text, a call to action button, pattern and image. Images and text can display on the left or right, the pattern and its colour can be changed, and the text can be displayed with a white, blue or black background, to break up consecutive promos. Image dimensions are fixed at a ratio of 4:3.

Responsive images are supported through use of the srcset property, which combine an image path and a target screen width at which the image should be displayed.

Key Features

  • Left or Right image alignment
  • 3x Pattern variants
  • 8x Pattern colours
  • Blue, Black or White background panels
  • Optional call to action button

Options

Properties

  • imageAlignment [Required, string “left” or “right”]
  • image [Required, Image]
  • pattern [Required, string “zigzag”, “diagonal” or “weave”]
  • patternColour [Required, string “primary-blue”, “dark-grey”, “mid-grey”, “black”, “white”, “strawberry”, “mid-blue”, “light-grey”, “orange”, “turquoise”, “green”, “yellow”, “green-blue” or “text-black”]
  • scheme [Optional, string “white”, “blue” or “black” default “white”]
  • title [Required, string]
  • copy [Required, string]
  • callToAction [Optional, LinkObject]

LinkObject

  • label [required, string]
  • href [required, string]

Image

  • path [required, string(path)]
  • alt [required, string]
  • srcset [optional, Array of ResponsiveImage]

ResponsiveImage

  • image [required, string(path)]
  • width [required, number]