Featured people

The featured people pattern allows University academics, staff, and students to be prominently included on a webpage. This is used to link to work or research profiles of noteable people affiliated with the University of St Andrews.

Rules for featured people

  • This pattern should only appear once on a web page.
  • The background colour must be white or light grey, using the class sta-light-grey.
  • Padding must be added at the top of the pattern, using the class padding-top, if the light grey background is added.
  • The heading for the section is optional.
  • The image and name of a featured person must link to the same web page.
  • Linked web pages must open in the same tab.
  • Section title must not exceed 50 characters.
  • Featured images must be 180 by 180 pixels.
  • Featured images must be a high quality portraiture headshot of the named person.
  • It is recommended that featured people's names must not exceed 50 characters in length.
  • It is recommended that featured people's title must not exceed 70 characters in length.
  • Description character count must not exceed 300 characters.

Options available


Three profiles with descriptions

Example
Code



Grid of profiles

This example shows a grid of featured people without linking to further information. A light grey background has been added, with additional padding at the top.

Example
Code



Two profiles with indented descriptions

The descriptions can be indented by adding the class featured-people__person--indented.

  • This class must only be used when a person has a description.
  • If used then all persons in the current block must also have indented descriptions.
  • Must not be used when more than two Featured People are on a single row.
Example
Code



One profile with indented description

The descriptions can be indented by adding the class featured-people__person--indented.

  • This class must only be used when a person has a description.
  • If used then all persons in the current block must also have indented descriptions.
  • Must not be used when more than two Featured People are on a single row.
Example
Code