University of St Andrews

Contact card

The contact card pattern includes a name, title, contact details and image. Student card is also the same but without an image.

• Name should be linked to PURE profile for more info.
• Image must be 127px high by 111px wide.

Staff card

Tom Test

Lecturer

Contact

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

<!-- Begin pattern: contact-card //-->

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <article id="al244" class="contact-card academic">
                <h3>
                    <a href="https://www.st-andrews.ac.uk/profile/al244">Tom Test</a>
                </h3>
                <h4>Lecturer</h4>
                    <img src="http://portal.st-andrews.ac.uk/staff-photos/al244/small" alt="Tom Test" title="Tom Test" class="profilePhoto">
                <div class="contact">
                    <h4>Contact</h4>
                    <ul class="contact-card-links">
                            <li>
                                <a href="tel:01334 46xxxx" data-rel="external">01334 46xxxx</a>
                            </li>
                        <li>
                            <a href="mailto:tst123@st-andrews.ac.uk">tst123@st-andrews.ac.uk</a>
                        </li>
                    </ul>
                </div>
            </article>
        </div>
    </div>
</div>

<!-- End pattern: contact-card //-->

Student card

<!-- Begin pattern: contact-card //-->

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <article id="al244" class="contact-card student">
                <h3>
                    <a href="https://www.st-andrews.ac.uk/profile/al244">Student Test</a>
                </h3>
                <h4>PhD student</h4>
                <div class="contact">
                    <h4>Contact</h4>
                    <ul class="contact-card-links">
                            <li>
                                <a href="tel:01334 46xxxx" data-rel="external">01334 46xxxx</a>
                            </li>
                        <li>
                            <a href="mailto:tst123@st-andrews.ac.uk">tst123@st-andrews.ac.uk</a>
                        </li>
                    </ul>
                </div>
            </article>
        </div>
    </div>
</div>

<!-- End pattern: contact-card //-->