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

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

placeholder
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

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

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

placeholder
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

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

placeholder
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

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

placeholder
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.‌