University of St Andrews

Contact card

The contact card pattern is used to display information about an individual.

Rules for contact cards

• Contact cards may appear solo or grouped as a stacked list.
• 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.

Options available

• Contact card
• Linked contact card with lightbox
• Contact card list

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 phone and email entries must link to valid phone numbers and email addresses.
• The list of tags can be used to convey additional linked 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.

    

        
    
    

        

        Mrs Sophia Adams
        
        
Unit name, Team name
        
Job title
    
    

        

            +44 (0)1334 46 xxxx
        
        

            example@st-andrews.ac.uk
        
    
    

        
Business and finance
        
Computer science and informatics
        
Engineering
        
Artificial intelligence
        
Mathematics
    


    

        

            
        
        
Mrs Sophia Adams
        
Unit name, Team name
        
Job title
        

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

                
Business and finance
                
Computer science and informatics
                
Engineering
                
Artificial intelligence
                
Mathematics
            
            
        
    

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.

    

        
        
        
    
    

        

        
        Dr Brielle Williamson
        
        
        
School of Psychology, Clinical Counselling
        
Research Specialist
    
    

        

            +44 (0)1334 46 xxxx
        
        

            example@st-andrews.ac.uk
        
    
    

        
Clinical Psychology
        
Industrial Psychology
        
Developmental Psychology
    


    

        

            
        
        
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
            

                
Publication title
                            
Publication title
                            
Publication title
            
            
            
Associated tags heading
            

                
Clinical Psychology
                
Industrial Psychology
                
Developmental Psychology
            
            
        
    

Contact card list

This example shows a list of contact cards that contains a mixture of available information.

• 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.

    

        
        
        
    
    

        

        
        Miss Colleen Hurst
        
        
        
St Andrews Sustainability Institute, Psychology and Neuroscience
        
Academic Liason
    
    

        

            +44 (0)1334 46 xxxx
        
        

            example@st-andrews.ac.uk
        
    
    

        
Crowd behaviour
        
Discrimination
        
Nationalism
        
Prejudice
        
Psychology
    


    

        

            
        
        
Miss Colleen Hurst
        
St Andrews Sustainability Institute, Psychology and Neuroscience
        
Academic Liason
        

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

                
Crowd behaviour
                
Discrimination
                
Nationalism
                
Prejudice
                
Psychology
            
            
        
    


    

        
        HH
        
    
    

        

        
        Mr Howard Hatfield
        
        
        
School of Computer Science
        
Senior JavaScript Developer
    
    

        

            +44 (0)1334 46 xxxx
        
        

            longerexample@st-andrews.ac.uk
        
    
    

        
Human-Computer Interaction
        
Information Management and Data Analytics
    


    

        

            HH
        
        
Mr Howard Hatfield
        
School of Computer Science
        
Senior JavaScript Developer
        

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

                
Human-Computer Interaction
                
Information Management and Data Analytics
            
            
        
    


    

        
        OL
        
    
    

        

        
        Dr Olivia Liang
        
        
        
University Court
        
Certified Financial Planner
    
    

        

            +44 (0)1334 46 xxxx
        
        

            example@st-andrews.ac.uk
        
    


    

        

            OL
        
        
Dr Olivia Liang
        
University Court
        
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>
        
    


    

        
        
        
    
    

        

        
        Professor Timothy Mooney
        
        
        

        
Chemical Engineering Professor
    
    

    
    

        
Finance & Law for Engineers
        
Mass, Transfer and Separations
        
General Reaction Engineering
    


    

        

            
        
        
Professor Timothy Mooney
        

        
Chemical Engineering Professor
        

            
Associated tags heading
            

                
Finance & Law for Engineers
                
Mass, Transfer and Separations
                
General Reaction Engineering