Staff profile

The staff profile pattern is used to display information about an individual with an emphasis on the role and biography. This pattern includes a short biography excerpt, contact details, and an optional link to each staff member’s full biography page. If the emphasis is instead to provide contact details then the Contact Card pattern should be considered.

Rules for staff profiles

Must only be used in the main body of the page.
The biography excerpt must not exceed 550 characters.
If a biography excerpt exceeds 550 characters, and there is a user case to include all information, then a standalone biography page should be considered as an alternative.
The profile image must be 200 × 200 pixels.
Photographs must be headshots of the individual named in the card and of professional quality.
The heading link and the full biography link must link to the same page.
Contact information should be present if available.

Options available

Staff profile - default
Staff profile - without link to biography
Staff profile - minimum
Staff profile list

Staff profile - default

The call-to-action link is also included in the profile heading.

Example

Team leader

Finn Camacho

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌
Full biography

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

Code



        
                Team leader
            Finn Camacho
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌
                
Full biography
            
        
        
            
        
        
            
                Email:
                example@st-andrews.ac.uk
                Phone:
                +44 (0)1334 46 xxxx

Staff profile - without link to biography

Without a link to a biography, there is also no link on the heading.

Example

Accountant

Airi Satou

Lorem ipsum dolor sit amet, ex wisi detraxit vel, tamquam referrentur at nam, ei wisi omittam dignissim est. Dolore sanctus quo te, ad mea accumsan complectitur, ea his essent dolorem consequuntur. Has choro tincidunt assueverit cu, at delenit vocibus fastidii vix, diam munere abhorreant ut vel. Utinam eripuit corrumpit eu vix. Ea invidunt perpetua eum. Cum quodsi euismod scripserit an, ei vim nisl assentior constituto. Ne mea enim soleat, scripta integre disputationi nec te.

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

Code



        
                Accountant
            Airi Satou
            Lorem ipsum dolor sit amet, ex wisi detraxit vel, tamquam referrentur at nam, ei wisi omittam dignissim est. Dolore sanctus quo te, ad mea accumsan complectitur, ea his essent dolorem consequuntur. Has choro tincidunt assueverit cu, at delenit vocibus fastidii vix, diam munere abhorreant ut vel. Utinam eripuit corrumpit eu vix. Ea invidunt perpetua eum. Cum quodsi euismod scripserit an, ei vim nisl assentior constituto. Ne mea enim soleat, scripta integre disputationi nec te.
            
        
        
            
        
        
            
                Email:
                example@st-andrews.ac.uk
                Phone:
                +44 (0)1334 46 xxxx

Staff profile - minimum

This is the minimum required content for a staff profile.

Example

JavaScript developer

Colleen Hurst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌

Code



        
                JavaScript developer
            Colleen Hurst
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌

Staff profile list

Profiles can be combined to form a list.

Example

Team leader

Finn Camacho

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌
Full biography

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

Accountant

Airi Satou

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

JavaScript developer

Colleen Hurst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌

Code



        
                Team leader
            Finn Camacho
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌
                
Full biography
            
        
        
            
        
        
            
                Email:
                example@st-andrews.ac.uk
                Phone:
                +44 (0)1334 46 xxxx
            
        


        
                Accountant
            Airi Satou
            Lorem ipsum dolor sit amet, ex wisi detraxit vel, tamquam referrentur at nam, ei wisi omittam dignissim est. Dolore sanctus quo te, ad mea accumsan complectitur, ea his essent dolorem consequuntur. Has choro tincidunt assueverit cu, at delenit vocibus fastidii vix, diam munere abhorreant ut vel. Utinam eripuit corrumpit eu vix. Ea invidunt perpetua eum. Cum quodsi euismod scripserit an, ei vim nisl assentior constituto. Ne mea enim soleat, scripta integre disputationi nec te.
            
        
        
            
        
        
            
                Email:
                example@st-andrews.ac.uk
                Phone:
                +44 (0)1334 46 xxxx
            
        


        
                JavaScript developer
            Colleen Hurst
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lacus et ligula fringilla, at malesuada massa blandit. Etiam nec amet.‌