Contact card

The contact card pattern is used to display contact information about an individual which may link to additional information. If the main goal is to display contact information this pattern should be used, however if the primary aim is to provide biographical information about an individual then the Staff Profile pattern should be considered.

Rules for contact cards

Contact cards may appear solo or grouped as a stacked list, they must not appear side by side.
Contact cards must take up the full width of the design's available space, if the width of a contact card is less than 600px.
Photographs must be headshots of the individual named in the card and of professional quality.
Images should be cropped square at 180px wide and 180px high.
If a suitable image is not available then the initials of the individual should be used.
The full name of the individual must be displayed.
Cards may link to additional information on a specific individual but this usage must be consistent within a list of contacts. For example if one card links to a lightbox then all other linked cards in that list must also use the lightbox method.

Use of lightbox to display additional information

If using the code examples that feature the lightbox, please remove the marked comments from either side of the relevant tags before using. These are only included in the code examples to prevent interaction with the lightbox script on page load, resulting in changes to the displayed html.

For maximum accessibility the inert polyfill from Google should also be used. This can be loaded by placing the following at the bottom of the page <script src="https://cdn.rawgit.com/GoogleChrome/inert-polyfill/v0.1.0/inert-polyfill.min.js"></script>

Contact card

This example shows all available content that may be included on a card.

Only the image or initials and the full name are required.
The optional secondary headings should be used to specify the organisational position and role of the individual.
The optional short paragraph of supporting text can be used to provide additional context for the individual - to help a user identify the correct person to contact.
The optional phone and email entries must link to valid phone numbers and email addresses.
The list of linked tags can be used to convey additional information on an individual.
The number of tags for a card should be no larger than five.
The usage of tags should be introduced before the contact cards, if the tag values used do not immediately convey their purpose.

Example

Mrs Sophia Adams

Unit name, Team name

Job title

This is a short paragraph of text that can be used to provide supporting information about a contact that may aid in the identification of the correct person to contact.

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Code

<!-- Begin pattern: contact-card //-->
<div class="contact-card">
    <div class="contact-card__image">
        <img src="../../assets/docs/images/profile-pictures/female-001.jpg" alt="Mrs Sophia Adams" title="Mrs Sophia Adams">
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        Mrs Sophia Adams
        </h3>
        <h4 class="contact-card__subtitle">Unit name, Team name</h4>
        <h4 class="contact-card__subtitle">Job title</h4>
        <p class="contact-card__summary">This is a short paragraph of text that can be used to provide supporting information about a contact that may aid in the identification of the correct person to contact.</p>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
    <ul class="contact-card__tags">
<li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Business and finance</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Computer science and informatics</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Engineering</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Artificial intelligence</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Mathematics</a></li>
    </ul>
</div>
<!-- End pattern: contact-card //-->

Contact card with initials

This example shows the alternative display of initials if an image is not available.

The initials must be a maximum length of two characters.

Example

Mrs Sophia Adams

Unit name, Team name

Job title

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Code

<!-- Begin pattern: contact-card //-->
<div class="contact-card">
    <div class="contact-card__initials">
        <abbr title="Mrs Sophia Adams">SA</abbr>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        Mrs Sophia Adams
        </h3>
        <h4 class="contact-card__subtitle">Unit name, Team name</h4>
        <h4 class="contact-card__subtitle">Job title</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
    <ul class="contact-card__tags">
<li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Business and finance</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Computer science and informatics</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Engineering</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Artificial intelligence</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Mathematics</a></li>
    </ul>
</div>
<!-- End pattern: contact-card //-->

Linked contact card with lightbox

Contact cards can also be used to link to further details of the individual. This example opens a lightbox with further details, but the link could also navigate to a new page if desired.

The content shown in the lightbox must, as a minimum, include all the information available from the selected contact card.
Additional information may be added to the lightbox with appropriate heading labels.

Example

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

Phone

+44 (0)1334 46 xxxx

Email

example@st-andrews.ac.uk

Office

Room D17, Bute medical building

Biography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur vel tellus eget vehicula. Mauris gravida ex a elit rutrum, et laoreet turpis egestas. Etiam interdum mattis erat, eget faucibus ipsum varius quis. Quisque quis magna enim. Vivamus commodo, urna a fringilla cursus, nisi felis blandit diam, sit amet venenatis enim tellus in ante. Pellentesque vel magna quis eros mattis porttitor at ut sapien. Curabitur congue ac purus sed posuere. Praesent imperdiet ligula arcu, et varius est suscipit ac.

Nam id diam id odio facilisis pretium at non sem. In in massa at risus blandit venenatis nec ut enim. Phasellus condimentum fringilla aliquam. Praesent in est in eros bibendum lobortis. Phasellus in elementum erat, eget iaculis nulla. Nam commodo, nunc quis dictum tempus, nisi massa mollis orci, sed sagittis ligula justo et est. Sed ultricies arcu nec nisi finibus, sed dictum neque porttitor. Curabitur ante ante, posuere sit amet ligula eget, blandit tincidunt lacus.

Publications

Associated tags heading

Code

<!-- Begin pattern: contact-card //-->
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#c1" data-modal-open tabindex="-1">
        <img src="../../assets/docs/images/profile-pictures/female-002.jpg" alt="Dr Brielle Williamson" title="Dr Brielle Williamson">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#c1" data-modal-open>
        Dr Brielle Williamson
        </a>
        </h3>
        <h4 class="contact-card__subtitle">School of Psychology, Clinical Counselling</h4>
        <h4 class="contact-card__subtitle">Research Specialist</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
    <ul class="contact-card__tags">
<li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Clinical Psychology</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Industrial Psychology</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Developmental Psychology</a></li>
    </ul>
</div>
<div id="c1" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img src="../../assets/docs/images/profile-pictures/female-002.jpg" alt="Dr Brielle Williamson" title="Dr Brielle Williamson">
        </div>
        <h3 class="contact-details__title">Dr Brielle Williamson</h3>
        <h4 class="contact-details__subtitle">School of Psychology, Clinical Counselling</h4>
        <h4 class="contact-details__subtitle">Research Specialist</h4>
        <dl class="contact-details__profile">
            <dt class="contact-details__profile-item">Phone</dt>
            <dd class="contact-details__profile-value content-block"><a href="tel:+44 (0)1334 46 xxxx">+44 (0)1334 46 xxxx</a></dd>
            <dt class="contact-details__profile-item">Email</dt>
            <dd class="contact-details__profile-value content-block"><a href="mailto:example@st-andrews.ac.uk">example@st-andrews.ac.uk</a></dd>
            <dt class="contact-details__profile-item">Office</dt>
            <dd class="contact-details__profile-value content-block">Room D17, Bute medical building</dd>
            <dt class="contact-details__profile-item">Biography</dt>
            <dd class="contact-details__profile-value content-block"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur vel tellus eget vehicula. Mauris gravida ex a elit rutrum, et laoreet turpis egestas. Etiam interdum mattis erat, eget faucibus ipsum varius quis. Quisque quis magna enim. Vivamus commodo, urna a fringilla cursus, nisi felis blandit diam, sit amet venenatis enim tellus in ante. Pellentesque vel magna quis eros mattis porttitor at ut sapien. Curabitur congue ac purus sed posuere. Praesent imperdiet ligula arcu, et varius est suscipit ac.</p><p>Nam id diam id odio facilisis pretium at non sem. In in massa at risus blandit venenatis nec ut enim. Phasellus condimentum fringilla aliquam. Praesent in est in eros bibendum lobortis. Phasellus in elementum erat, eget iaculis nulla. Nam commodo, nunc quis dictum tempus, nisi massa mollis orci, sed sagittis ligula justo et est. Sed ultricies arcu nec nisi finibus, sed dictum neque porttitor. Curabitur ante ante, posuere sit amet ligula eget, blandit tincidunt lacus.</p></dd>
            <dt class="contact-details__profile-item">Publications</dt>
            <dd class="contact-details__profile-value content-block"><ul>
                <li><a href="#">Publication title</a></li>
                            <li><a href="#">Publication title</a></li>
                            <li><a href="#">Publication title</a></li>
            </ul>
            </dd>
            <dt class="contact-details__profile-item">Associated tags heading</dt>
            <dd class="contact-details__profile-value content-block"><ul>
                <li><a href="#">Clinical Psychology</a></li>
                <li><a href="#">Industrial Psychology</a></li>
                <li><a href="#">Developmental Psychology</a></li>
            </ul>
            </dd>
        </dl>
    </div>
</div>
<!-- End pattern: contact-card //-->

Contact card list

This example shows a list of contact cards that contains a mixture of available information. These contact cards link to a different url rather than opening a lightbox.

If tags are used in a list of contact cards then their meaning should be consistent. In this example the tags are used to show the areas of expertise of each individual.

Example

Miss Colleen Hurst

St Andrews Sustainability Institute, Psychology and Neuroscience

Academic Liason

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Mr Howard Hatfield

School of Computer Science

Senior JavaScript Developer

+44 (0)1334 46 xxxx

longerexample@st-andrews.ac.uk

Dr Olivia Liang

Certified Financial Planner

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Professor Timothy Mooney

Chemical Engineering Professor

Code

<!-- Begin pattern: contact-card //-->
<div class="row">
    <div class="col-sm-8">
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#" tabindex="-1">
        <img src="../../assets/docs/images/profile-pictures/female-003.jpg" alt="Miss Colleen Hurst" title="Miss Colleen Hurst">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#">
        Miss Colleen Hurst
        </a>
        </h3>
        <h4 class="contact-card__subtitle">St Andrews Sustainability Institute, Psychology and Neuroscience</h4>
        <h4 class="contact-card__subtitle">Academic Liason</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
    <ul class="contact-card__tags">
<li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Crowd behaviour</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Discrimination</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Nationalism</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Prejudice</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Psychology</a></li>
    </ul>
</div>
<div class="contact-card">
    <div class="contact-card__initials">
        <a href="#" tabindex="-1">
        <abbr title="Mr Howard Hatfield">HH</abbr>
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#">
        Mr Howard Hatfield
        </a>
        </h3>
        <h4 class="contact-card__subtitle">School of Computer Science</h4>
        <h4 class="contact-card__subtitle">Senior JavaScript Developer</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">longerexample@st-andrews.ac.uk</a>
        </div>
    </div>
    <ul class="contact-card__tags">
<li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Human-Computer Interaction</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Information Management and Data Analytics</a></li>
    </ul>
</div>
<div class="contact-card">
    <div class="contact-card__initials">
        <a href="#" tabindex="-1">
        <abbr title="Dr Olivia Liang">OL</abbr>
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#">
        Dr Olivia Liang
        </a>
        </h3>
        <h4 class="contact-card__subtitle">Certified Financial Planner</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
</div>
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#" tabindex="-1">
        <img src="../../assets/docs/images/profile-pictures/male-004.jpg" alt="Professor Timothy Mooney" title="Professor Timothy Mooney">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#">
        Professor Timothy Mooney
        </a>
        </h3>
        <h4 class="contact-card__subtitle">Chemical Engineering Professor</h4>
    </div>
    <div class="contact-card__contact">
    </div>
    <ul class="contact-card__tags">
<li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Finance &amp; Law for Engineers</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Mass, Transfer and Separations</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">General Reaction Engineering</a></li>
    </ul>
</div>
    </div>
</div>
<!-- End pattern: contact-card //-->

Contact card list with lazyload

This example shows a list of contact cards that makes use of the available lazyload feature to only load the images when they are about to be viewed. This reduces the amount of data downloaded by the browser, thus improving performance, and would be useful for lengthy contact card lists that may contain a large number of images.

Example

Miss Colleen Hurst

St Andrews Sustainability Institute, Psychology and Neuroscience

Academic Liason

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Miss Colleen Hurst

St Andrews Sustainability Institute, Psychology and Neuroscience

Academic Liason

Phone: +44 (0)1334 46 xxxx
Email: example@st-andrews.ac.uk

Mr Howard Hatfield

School of Computer Science

Senior JavaScript Developer

+44 (0)1334 46 xxxx

longerexample@st-andrews.ac.uk

Mr Howard Hatfield

School of Computer Science

Senior JavaScript Developer

Phone: +44 (0)1334 46 xxxx
Email: longerexample@st-andrews.ac.uk

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

Phone

+44 (0)1334 46 xxxx

Email

example@st-andrews.ac.uk

Office

Room D17, Bute medical building

Biography

Publications

Associated tags heading

Professor Timothy Mooney

Chemical Engineering Professor

Professor Timothy Mooney

Chemical Engineering Professor

Mrs Sophia Adams

Certified Financial Planner

+44 (0)1334 46 xxxx

example@st-andrews.ac.uk

Mrs Sophia Adams

Certified Financial Planner

Phone

+44 (0)1334 46 xxxx

Email

example@st-andrews.ac.uk

Biography

Mr Chris Bogglesworth

Associate Entertainment Specialist

Mr Chris Bogglesworth

Associate Entertainment Specialist

Dr Timothy Shah

Director of Research

Dr Timothy Shah

Director of Research

Code

<!-- Begin pattern: contact-card //-->
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#e1" data-modal-open tabindex="-1">
        <img data-src="../../assets/docs/images/profile-pictures/female-003.jpg" alt="Miss Colleen Hurst" title="Miss Colleen Hurst" class="lazyload">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#e1" data-modal-open>
        Miss Colleen Hurst
        </a>
        </h3>
        <h4 class="contact-card__subtitle">St Andrews Sustainability Institute, Psychology and Neuroscience</h4>
        <h4 class="contact-card__subtitle">Academic Liason</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
</div>
<div id="e1" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img data-src="../../assets/docs/images/profile-pictures/female-003.jpg" alt="Miss Colleen Hurst" title="Miss Colleen Hurst" class="lazyload">
        </div>
        <h3 class="contact-details__title">Miss Colleen Hurst</h3>
        <h4 class="contact-details__subtitle">St Andrews Sustainability Institute, Psychology and Neuroscience</h4>
        <h4 class="contact-details__subtitle">Academic Liason</h4>
        <dl class="contact-details__profile">
            <dt class="contact-details__profile-item">Phone</dt>
            <dd class="contact-details__profile-value content-block"><a href="tel:+44 (0)1334 46 xxxx">+44 (0)1334 46 xxxx</a></dd>
            <dt class="contact-details__profile-item">Email</dt>
            <dd class="contact-details__profile-value content-block"><a href="mailto:example@st-andrews.ac.uk">example@st-andrews.ac.uk</a></dd>
        </dl>
    </div>
</div>
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#e2" data-modal-open tabindex="-1">
        <img data-src="../../assets/docs/images/profile-pictures/male-001.jpg" alt="Mr Howard Hatfield" title="Mr Howard Hatfield" class="lazyload">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#e2" data-modal-open>
        Mr Howard Hatfield
        </a>
        </h3>
        <h4 class="contact-card__subtitle">School of Computer Science</h4>
        <h4 class="contact-card__subtitle">Senior JavaScript Developer</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">longerexample@st-andrews.ac.uk</a>
        </div>
    </div>
</div>
<div id="e2" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img data-src="../../assets/docs/images/profile-pictures/male-001.jpg" alt="Mr Howard Hatfield" title="Mr Howard Hatfield" class="lazyload">
        </div>
        <h3 class="contact-details__title">Mr Howard Hatfield</h3>
        <h4 class="contact-details__subtitle">School of Computer Science</h4>
        <h4 class="contact-details__subtitle">Senior JavaScript Developer</h4>
        <dl class="contact-details__profile">
            <dt class="contact-details__profile-item">Phone</dt>
            <dd class="contact-details__profile-value content-block"><a href="tel:+44 (0)1334 46 xxxx">+44 (0)1334 46 xxxx</a></dd>
            <dt class="contact-details__profile-item">Email</dt>
            <dd class="contact-details__profile-value content-block"><a href="mailto:longerexample@st-andrews.ac.uk">longerexample@st-andrews.ac.uk</a></dd>
        </dl>
    </div>
</div>
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#e3" data-modal-open tabindex="-1">
        <img data-src="../../assets/docs/images/profile-pictures/female-002.jpg" alt="Dr Brielle Williamson" title="Dr Brielle Williamson" class="lazyload">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#e3" data-modal-open>
        Dr Brielle Williamson
        </a>
        </h3>
        <h4 class="contact-card__subtitle">School of Psychology, Clinical Counselling</h4>
        <h4 class="contact-card__subtitle">Research Specialist</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
    <ul class="contact-card__tags">
<li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Clinical Psychology</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Industrial Psychology</a></li><li class="contact-card__tag"><a class="contact-card__tag-link contact-card__tag-link-small" href="#">Developmental Psychology</a></li>
    </ul>
</div>
<div id="e3" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img data-src="../../assets/docs/images/profile-pictures/female-002.jpg" alt="Dr Brielle Williamson" title="Dr Brielle Williamson" class="lazyload">
        </div>
        <h3 class="contact-details__title">Dr Brielle Williamson</h3>
        <h4 class="contact-details__subtitle">School of Psychology, Clinical Counselling</h4>
        <h4 class="contact-details__subtitle">Research Specialist</h4>
        <dl class="contact-details__profile">
            <dt class="contact-details__profile-item">Phone</dt>
            <dd class="contact-details__profile-value content-block"><a href="tel:+44 (0)1334 46 xxxx">+44 (0)1334 46 xxxx</a></dd>
            <dt class="contact-details__profile-item">Email</dt>
            <dd class="contact-details__profile-value content-block"><a href="mailto:example@st-andrews.ac.uk">example@st-andrews.ac.uk</a></dd>
            <dt class="contact-details__profile-item">Office</dt>
            <dd class="contact-details__profile-value content-block">Room D17, Bute medical building</dd>
            <dt class="contact-details__profile-item">Biography</dt>
            <dd class="contact-details__profile-value content-block"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur vel tellus eget vehicula. Mauris gravida ex a elit rutrum, et laoreet turpis egestas. Etiam interdum mattis erat, eget faucibus ipsum varius quis. Quisque quis magna enim. Vivamus commodo, urna a fringilla cursus, nisi felis blandit diam, sit amet venenatis enim tellus in ante. Pellentesque vel magna quis eros mattis porttitor at ut sapien. Curabitur congue ac purus sed posuere. Praesent imperdiet ligula arcu, et varius est suscipit ac.</p><p>Nam id diam id odio facilisis pretium at non sem. In in massa at risus blandit venenatis nec ut enim. Phasellus condimentum fringilla aliquam. Praesent in est in eros bibendum lobortis. Phasellus in elementum erat, eget iaculis nulla. Nam commodo, nunc quis dictum tempus, nisi massa mollis orci, sed sagittis ligula justo et est. Sed ultricies arcu nec nisi finibus, sed dictum neque porttitor. Curabitur ante ante, posuere sit amet ligula eget, blandit tincidunt lacus.</p></dd>
            <dt class="contact-details__profile-item">Publications</dt>
            <dd class="contact-details__profile-value content-block"><ul>
                <li><a href="#">Publication title</a></li>
                            <li><a href="#">Publication title</a></li>
                            <li><a href="#">Publication title</a></li>
            </ul>
            </dd>
            <dt class="contact-details__profile-item">Associated tags heading</dt>
            <dd class="contact-details__profile-value content-block"><ul>
                <li><a href="#">Clinical Psychology</a></li>
                <li><a href="#">Industrial Psychology</a></li>
                <li><a href="#">Developmental Psychology</a></li>
            </ul>
            </dd>
        </dl>
    </div>
</div>
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#e4" data-modal-open tabindex="-1">
        <img data-src="../../assets/docs/images/profile-pictures/male-004.jpg" alt="Professor Timothy Mooney" title="Professor Timothy Mooney" class="lazyload">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#e4" data-modal-open>
        Professor Timothy Mooney
        </a>
        </h3>
        <h4 class="contact-card__subtitle">Chemical Engineering Professor</h4>
    </div>
    <div class="contact-card__contact">
    </div>
</div>
<div id="e4" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img data-src="../../assets/docs/images/profile-pictures/male-004.jpg" alt="Professor Timothy Mooney" title="Professor Timothy Mooney" class="lazyload">
        </div>
        <h3 class="contact-details__title">Professor Timothy Mooney</h3>
        <h4 class="contact-details__subtitle">Chemical Engineering Professor</h4>
        <dl class="contact-details__profile">
        </dl>
    </div>
</div>
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#e5" data-modal-open tabindex="-1">
        <img data-src="../../assets/docs/images/profile-pictures/female-001.jpg" alt="Mrs Sophia Adams" title="Mrs Sophia Adams" class="lazyload">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#e5" data-modal-open>
        Mrs Sophia Adams
        </a>
        </h3>
        <h4 class="contact-card__subtitle">Certified Financial Planner</h4>
    </div>
    <div class="contact-card__contact">
        <div class="contact-card__contact--phone">
            <a class="contact-card__tag-link" href="tel:#">+44 (0)1334 46 xxxx</a>
        </div>
        <div class="contact-card__contact--email">
            <a class="contact-card__tag-link" href="mailto:#">example@st-andrews.ac.uk</a>
        </div>
    </div>
</div>
<div id="e5" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img data-src="../../assets/docs/images/profile-pictures/female-001.jpg" alt="Mrs Sophia Adams" title="Mrs Sophia Adams" class="lazyload">
        </div>
        <h3 class="contact-details__title">Mrs Sophia Adams</h3>
        <h4 class="contact-details__subtitle">Certified Financial Planner</h4>
        <dl class="contact-details__profile">
            <dt class="contact-details__profile-item">Phone</dt>
            <dd class="contact-details__profile-value content-block"><a href="tel:+44 (0)1334 46 xxxx">+44 (0)1334 46 xxxx</a></dd>
            <dt class="contact-details__profile-item">Email</dt>
            <dd class="contact-details__profile-value content-block"><a href="mailto:example@st-andrews.ac.uk">example@st-andrews.ac.uk</a></dd>
            <dt class="contact-details__profile-item">Biography</dt>
            <dd class="contact-details__profile-value content-block"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur vel tellus eget vehicula. Mauris gravida ex a elit rutrum, et laoreet turpis egestas. Etiam interdum mattis erat, eget faucibus ipsum varius quis. Quisque quis magna enim. Vivamus commodo, urna a fringilla cursus, nisi felis blandit diam, sit amet venenatis enim tellus in ante. Pellentesque vel magna quis eros mattis porttitor at ut sapien. Curabitur congue ac purus sed posuere. Praesent imperdiet ligula arcu, et varius est suscipit ac.</p><p>Nam id diam id odio facilisis pretium at non sem. In in massa at risus blandit venenatis nec ut enim. Phasellus condimentum fringilla aliquam. Praesent in est in eros bibendum lobortis. Phasellus in elementum erat, eget iaculis nulla. Nam commodo, nunc quis dictum tempus, nisi massa mollis orci, sed sagittis ligula justo et est. Sed ultricies arcu nec nisi finibus, sed dictum neque porttitor. Curabitur ante ante, posuere sit amet ligula eget, blandit tincidunt lacus.</p></dd>
        </dl>
    </div>
</div>
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#e6" data-modal-open tabindex="-1">
        <img data-src="../../assets/docs/images/profile-pictures/male-002.jpg" alt="Mr Chris Bogglesworth" title="Mr Chris Bogglesworth" class="lazyload">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#e6" data-modal-open>
        Mr Chris Bogglesworth
        </a>
        </h3>
        <h4 class="contact-card__subtitle">Associate Entertainment Specialist</h4>
    </div>
    <div class="contact-card__contact">
    </div>
</div>
<div id="e6" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img data-src="../../assets/docs/images/profile-pictures/male-002.jpg" alt="Mr Chris Bogglesworth" title="Mr Chris Bogglesworth" class="lazyload">
        </div>
        <h3 class="contact-details__title">Mr Chris Bogglesworth</h3>
        <h4 class="contact-details__subtitle">Associate Entertainment Specialist</h4>
        <dl class="contact-details__profile">
        </dl>
    </div>
</div>
<div class="contact-card">
    <div class="contact-card__image">
        <a href="#e7" data-modal-open tabindex="-1">
        <img data-src="../../assets/docs/images/profile-pictures/male-003.jpg" alt="Dr Timothy Shah" title="Dr Timothy Shah" class="lazyload">
        </a>
    </div>
    <div class="contact-card__titles">
        <h3 class="contact-card__title">
        <a href="#e7" data-modal-open>
        Dr Timothy Shah
        </a>
        </h3>
        <h4 class="contact-card__subtitle">Director of Research</h4>
    </div>
    <div class="contact-card__contact">
    </div>
</div>
<div id="e7" data-modal>
    <div class="contact-details">
        <div class="contact-details__image">
        <img data-src="../../assets/docs/images/profile-pictures/male-003.jpg" alt="Dr Timothy Shah" title="Dr Timothy Shah" class="lazyload">
        </div>
        <h3 class="contact-details__title">Dr Timothy Shah</h3>
        <h4 class="contact-details__subtitle">Director of Research</h4>
        <dl class="contact-details__profile">
        </dl>
    </div>
</div>
<!-- End pattern: contact-card //-->