University of St Andrews

Contact card

The contact card pattern is used to display contact information for staff and students.

Rules for contact cards

This pattern must only be used on people pages in the main body of the page on people pages.

Options available

• Staff cards
• Student cards

Staff cards

• Staff name must link to their research portal profile if one is available.
• Staff cards must have a profile image 111 × 127 pixels.
• If an image is not available, use the default staff profile image: contact-card-default.gif

Sophia Adams

Professor

Contact

• 01334 46xxxx
• example@st-andrews.ac.uk

Jackson Baker

Emeritus Professor

Contact

• 01334 46xxxx
• example@st-andrews.ac.uk

Emma Clark

Reader

Contact

• 01334 46xxxx
• example@st-andrews.ac.uk

Aiden Davis

Senior Lecturer

Contact

• 01334 46xxxx
• example@st-andrews.ac.uk

Olivia Evans

Lecturer

Contact

• 01334 46xxxx
• example@st-andrews.ac.uk

<!-- Begin pattern: contact-card //-->
<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="tom123" class="contact-card academic">
            <h3>
                <a href="#">Sophia Adams</a>
            </h3>
                <img src="../../assets/core/images/contact-card-default.gif" alt="Sophia Adams" title="Sophia Adams" class="profilePhoto">
            <h4>Professor</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="tel:#" data-rel="external">01334 46xxxx</a>
                    </li>
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="bob123" class="contact-card academic">
            <h3>
                <a href="#">Jackson Baker</a>
            </h3>
                <img src="../../assets/core/images/contact-card-default.gif" alt="Jackson Baker" title="Jackson Baker" class="profilePhoto">
            <h4>Emeritus Professor</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="tel:#" data-rel="external">01334 46xxxx</a>
                    </li>
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="steve123" class="contact-card academic">
            <h3>
                <a href="#">Emma Clark</a>
            </h3>
                <img src="../../assets/core/images/contact-card-default.gif" alt="Emma Clark" title="Emma Clark" class="profilePhoto">
            <h4>Reader</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="tel:#" data-rel="external">01334 46xxxx</a>
                    </li>
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="pete123" class="contact-card academic">
            <h3>
                <a href="#">Aiden Davis</a>
            </h3>
                <img src="../../assets/core/images/contact-card-default.gif" alt="Aiden Davis" title="Aiden Davis" class="profilePhoto">
            <h4>Senior Lecturer</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="tel:#" data-rel="external">01334 46xxxx</a>
                    </li>
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="sally123" class="contact-card academic">
            <h3>
                <a href="#">Olivia Evans</a>
            </h3>
                <img src="../../assets/core/images/contact-card-default.gif" alt="Olivia Evans" title="Olivia Evans" class="profilePhoto">
            <h4>Lecturer</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="tel:#" data-rel="external">01334 46xxxx</a>
                    </li>
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
</div>
<!-- End pattern: contact-card //-->

Student cards

• Student contact cards must not have an image.

<!-- Begin pattern: contact-card //-->
<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="tom123" class="contact-card student">
            <h3>
                Lucas Frank
            </h3>
            <h4>PhD student</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="bob123" class="contact-card student">
            <h3>
                Ava Ghosh
            </h3>
            <h4>PhD student</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="steve123" class="contact-card student">
            <h3>
                Liam Hills
            </h3>
            <h4>PhD student</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="pete123" class="contact-card student">
            <h3>
                Mia Irwin
            </h3>
            <h4>PhD student</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
        <article id="sally123" class="contact-card student">
            <h3>
                Noah Jones
            </h3>
            <h4>PhD student</h4>
            <div class="contact">
                <h4>Contact</h4>
                <ul class="contact-card-links">
                    <li>
                        <a href="mailto:#">example@st-andrews.ac.uk</a>
                    </li>
                </ul>
            </div>
        </article>
    </div>
</div>
<!-- End pattern: contact-card //-->