University of Derby

Academic Profile Promo 

<!-- Default -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-light-grey">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Zig Zag -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-light-grey">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Diagonal -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-diagonal academic-profile-promo-pattern-light-grey">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Weave -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-weave academic-profile-promo-pattern-light-grey">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- No Image -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-light-grey academic-profile-promo-no-image">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Midblue -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-mid-blue">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Strawberry -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-strawberry">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Yellow -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-yellow">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Primary Blue -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-primary-blue">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Turquoise -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-turquoise">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Orange -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-orange">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Green -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-green">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Green Blue -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-green-blue">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<!-- Image srcset support -->
<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop academic-profile-promo-pattern academic-profile-promo-pattern-zigzag academic-profile-promo-pattern-light-grey">
            <div class="academic-profile-promo-pattern-background" role="presentation"></div>
            <div class="academic-profile-promo-image-container">
                <img src="../../images/academic-profile-hero/staff-square.jpg" alt="" />
            </div>
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    Dr Ian Turner
                    <br/><span class="subheading">Head of forensic sciences</span>
                </h3>
                <p>Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences. Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>[email protected]</dd>
                </dl>
                <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        View full staff profile
            <span class="button-overlay"><span>
                        View full staff profile
                    </span></span></a> </div>
        </div>
    </section>
</div>


<div class="academic-profile-promo-container">
    <section class="academic-profile-promo">
        <div class="academic-profile-promo-backdrop{% if pattern %} academic-profile-promo-pattern academic-profile-promo-pattern-{{ pattern }}{% else %} academic-profile-promo-pattern academic-profile-promo-pattern-zigzag{% endif %}{% if patternColour %} academic-profile-promo-pattern-{{ patternColour }}{% else %} academic-profile-promo-pattern-light-grey{% endif %}{% if not (image and image.path) %} academic-profile-promo-no-image{% endif %}">
            {% if pattern %}<div class="academic-profile-promo-pattern-background" role="presentation"></div>{% endif %}
            {% if image and image.path %}
            <div class="academic-profile-promo-image-container">
                <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 }}" />
            </div>
            {% endif %}
        </div>
        <div class="academic-profile-promo-panel">
            <div class="academic-profile-promo-panel-inner">
                <h3>
                    {{ title }}
                    {% if subtitle %}
                    <br/><span class="subheading">{{ subtitle }}</span>
                    {% endif %}
                </h3>
                <p>{{ intro }}</p>
                <dl class="academic-profile-promo-panel-contact-details">
                    <dt class="academic-profile-promo-panel-contact-details-heading">Email</dt>
                    <dd>{{ email }}</dd>
                </dl>
                {% if callToAction and callToAction.label and callToAction.href %}
                {% include '@button' with {
                    label: callToAction.label,
                    href: callToAction.href
                } %}
                {% endif %}
            </div>
        </div>
    </section>
</div>
 
/* Default */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  }
}


/* Zig Zag */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  }
}


/* Diagonal */
{
  "pattern": "diagonal",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  }
}


/* Weave */
{
  "pattern": "weave",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  }
}


/* No Image */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": null
}


/* Midblue */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "mid-blue"
}


/* Strawberry */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "strawberry"
}


/* Yellow */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "yellow"
}


/* Primary Blue */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "primary-blue"
}


/* Turquoise */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "turquoise"
}


/* Orange */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "orange"
}


/* Green */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "green"
}


/* Green Blue */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "patternColour": "green-blue"
}


/* Image srcset support */
{
  "pattern": "zigzag",
  "title": "Dr Ian Turner",
  "subtitle": "Head of forensic sciences",
  "intro": "Head of Forensic Science and the Deputy Head of the Dept. of Natural Sciences in the College of Life and Natural Sciences.  Interested in Forensic Science research specifically the areas of Forensic Handwriting and Document Analysis.",
  "email": "[email protected]",
  "callToAction": {
    "label": "View full staff profile",
    "href": "#"
  },
  "image": {
    "path": "/images/academic-profile-hero/staff-square.jpg",
    "label": "Profile image"
  },
  "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
    }
  ]
}
  • Content: 
    // defining the colours as a collection allows us to loop through them and generate classnames based on the keys
$academic-profile-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,
    light-grey: $light-grey,
);

$mobile-image-width: #{'calc((100vw - (80px + 10px)) * 16/16)'};
$tablet-image-width: #{'calc((100vw - (80px + 10px)) * 8/16)'};
$desktop-image-width: #{'calc((100vw - (80px + 10px)) * 6/16)'};
$large-desktop-image-width: #{'calc((1780px - (80px + 10px)) * 6/16)'};

.academic-profile-promo {
    display: flex;
    position: relative;
    align-items: flex-start;
    justify-content: flex-end;
    lost-column: 8/8;
    lost-align: top-right;
    
    @include for-largerthan-ipad-portrait {
        lost-offset: 1/16;
        lost-column: 14/16;
    }

    &-container {
        @include margin-medium;
        width: 100%;
        min-height: $mobile-image-width;

        @include for-tablet-portrait-up {
            min-height: $tablet-image-width;
        }
        
        @include for-largerthan-ipad-portrait {
            min-height: $desktop-image-width;
        }
        
        @media (min-width: 1780px) {
            min-height: $large-desktop-image-width;
        }
    }

    &-panel {
        position: relative;
        // 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: $mobile-image-width;
        background: $white;

        .academic-profile-promo-no-image + & {
            margin-top: 0;
        }

        &-inner {
            margin-top: 1.125rem;
            margin-bottom: 0;

            .button {
                margin-bottom: 0;
            }

            p {
                margin-bottom: px-to-em(24, 17);
            }
        }

        &-contact-details {
            @include large-body-font;
            margin: px-to-em(24, 22) 0;

            &-heading {
                @include header;
            }

            dt,
            dd {
                margin: 0;
            }
        }

        @include for-tablet-portrait-up {
            @include flexbox-width-without-columns(10, 16);
            margin-top: $margin-small;
            margin-right: 20px;
            margin-left: 20px;
            padding: 30px;

            .academic-profile-promo-right-align & {
                margin-right: 20px;
            }

            &-inner {
                margin: 0;
            }

            .academic-profile-promo-no-image + & {
                margin-top: $margin-small;
            }
        }

        @include for-largerthan-ipad-portrait {
            $single-column-width: #{'calc(' + ((1/14) * 100) + '% + (10px / 14))'};

            @include flexbox-width-without-columns(8, 14);
            margin-top: $margin-small;
            margin-right: $single-column-width;
            padding: 30px 40px;

            .academic-profile-promo-right-align & {
                margin-right: 20px;
                margin-left: $single-column-width;
            }
        }
    }

    &-backdrop {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        align-items: flex-start;
        justify-content: flex-start;

        @include for-tablet-portrait-up {
            overflow: hidden;

            .academic-profile-promo-right-align & {
                justify-content: flex-end;
            }
        }

        height: $mobile-image-width;

        @include for-tablet-portrait-up {
            height: $tablet-image-width;
        }

        @include for-largerthan-ipad-portrait {
            height: $desktop-image-width;
        }

        @media (min-width: 1780px) {
            height: $large-desktop-image-width;
        }
    }

    &-image-container {
        position: relative;
        margin: 0;
        margin-bottom: 0;
        width: 100%;
        font-size: 0;

        @include for-tablet-portrait-up {
            width: auto;
        }

        img {
            width: 100%;

            @include for-tablet-portrait-up {
                width: $tablet-image-width;
                height: $tablet-image-width;
            }

            @include for-largerthan-ipad-portrait {
                width: $desktop-image-width;
                height: $desktop-image-width;
            }

            @media (min-width: 1780px) {
                width: $large-desktop-image-width;
                height: $large-desktop-image-width;
            }
        }
    }

    &-pattern {
        &-background {
            display: flex;
            position: absolute;
            top: -20px;
            right: fluid-margin(true);
            flex: 1;
            width: 75%;
            height: 100%;
        }

        @include for-tablet-portrait-up {
            &-background {
                top: 0;
                right: 0;
                left: 0;
                width: 100%;
            }
        }

        @each $item, $colour in $academic-profile-promo-pattern-colours {
            &-#{$item} {

                &.academic-profile-promo-pattern-zigzag {
                    .academic-profile-promo-pattern-background {
                        @include pattern-zigzag($colour);
                    }
                }

                &.academic-profile-promo-pattern-diagonal {
                    .academic-profile-promo-pattern-background {
                        @include pattern-diagonal($colour);
                    }
                }

                &.academic-profile-promo-pattern-weave {
                    .academic-profile-promo-pattern-background {
                        @include pattern-weave($colour);
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/academic-profile-promo/academic-profile-promo.scss
  • Filesystem Path: components/components/promo/academic-profile-promo/academic-profile-promo.scss
  • Size: 6 KB

Academic Profile Promo Component

Displays key profile information as a promo component. Profile images are optional, the pattern and its colour can be changed. Profile images should be square. 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

  • 3x Pattern variants
  • 8x Pattern colours
  • Optional Image
  • Optional Call To Action

Options

Properties

  • image [Optional, Image Object]
  • pattern [Required, string “zigzag”, “diagonal” or “weave”]
  • patternColour [optional, default “mid-grey”, string “primary-blue”, “mid-grey”, “dark-grey”, “mid-grey”, “black”, “white”, “strawberry”, “mid-blue”, “light-grey”, “orange”, “turquoise”, “green”, “yellow”, “green-blue” or “text-black”]
  • title [Required, string]
  • subtitle [Optional, string]
  • email [Optional, string]
  • intro [Required, string]
  • callToAction [Optional, LinkObject]

LinkObject

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

ResponsiveImage

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