Digital pattern library

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

Options available


Contact card

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

Example
Mrs Sophia Adams

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.

  • Business and finance
  • Computer science and informatics
  • Engineering
  • Artificial intelligence
  • Mathematics
Code

Mrs Sophia Adams

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.

  • Business and finance
  • Computer science and informatics
  • Engineering
  • Artificial intelligence
  • Mathematics

Contact card with initials

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

Example
Code



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.

Example
Dr Brielle Williamson

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

Dr Brielle Williamson

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

Dr Brielle Williamson

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

Phone
+44 (0)1334 46 xxxx
Email
example@st-andrews.ac.uk
More information
<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>
Publications
Associated tags heading

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.

Example

Miss Colleen Hurst

St Andrews Sustainability Institute, Psychology and Neuroscience

Academic Liason

Mr Howard Hatfield

School of Computer Science

Senior JavaScript Developer

  • Human-Computer Interaction
  • Information Management and Data Analytics
Code

Miss Colleen Hurst

St Andrews Sustainability Institute, Psychology and Neuroscience

Academic Liason

Mr Howard Hatfield

School of Computer Science

Senior JavaScript Developer

  • Human-Computer Interaction
  • Information Management and Data Analytics

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

Miss Colleen Hurst

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

Mr Howard Hatfield

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

  • Clinical Psychology
  • Industrial Psychology
  • Developmental Psychology
Dr Brielle Williamson

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

Professor Timothy Mooney

Chemical Engineering Professor

Professor Timothy Mooney

Professor Timothy Mooney

Chemical Engineering Professor

Mrs Sophia Adams

Mrs Sophia Adams

Certified Financial Planner

Phone
+44 (0)1334 46 xxxx
Email
example@st-andrews.ac.uk
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.

Mr Chris Bogglesworth

Associate Entertainment Specialist

Mr Chris Bogglesworth

Mr Chris Bogglesworth

Associate Entertainment Specialist

Dr Timothy Shah

Director of Research

Dr Timothy Shah

Dr Timothy Shah

Director of Research

Code

Miss Colleen Hurst

Miss Colleen Hurst

St Andrews Sustainability Institute, Psychology and Neuroscience

Academic Liason

Miss Colleen Hurst

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

Mr Howard Hatfield

School of Computer Science

Senior JavaScript Developer

Mr Howard Hatfield

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

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

  • Clinical Psychology
  • Industrial Psychology
  • Developmental Psychology
Dr Brielle Williamson

Dr Brielle Williamson

School of Psychology, Clinical Counselling

Research Specialist

Phone
+44 (0)1334 46 xxxx
Email
example@st-andrews.ac.uk
More information
<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>
Publications
Associated tags heading
Professor Timothy Mooney

Professor Timothy Mooney

Chemical Engineering Professor

Professor Timothy Mooney

Professor Timothy Mooney

Chemical Engineering Professor

Mrs Sophia Adams

Mrs Sophia Adams

Certified Financial Planner

Mrs Sophia Adams

Mrs Sophia Adams

Certified Financial Planner

Phone
+44 (0)1334 46 xxxx
Email
example@st-andrews.ac.uk
More information
<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>
Mr Chris Bogglesworth

Mr Chris Bogglesworth

Associate Entertainment Specialist

Mr Chris Bogglesworth

Mr Chris Bogglesworth

Associate Entertainment Specialist

Dr Timothy Shah

Dr Timothy Shah

Director of Research

Dr Timothy Shah

Dr Timothy Shah

Director of Research