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
Featured academics
Professor Sophia Adams
Structural Biologist
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Aiden Davis
School of English
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Olivia Evans
Senior Lecturer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Featured academics
Professor Sophia Adams
Structural Biologist
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Aiden Davis
School of English
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Olivia Evans
Senior Lecturer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
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.
Dr Garrett Winters
School of Biology
Dr Rhona Davidson
School of Medicine
Brielle Williamson
PhD student
Professor Sophia Adams
Structural Biologist
Aiden Davis
School of English
Olivia Evans
Senior Lecturer
Dr Garrett Winters
School of Biology
Dr Rhona Davidson
School of Medicine
Brielle Williamson
PhD student
Professor Sophia Adams
Structural Biologist
Aiden Davis
School of English
Olivia Evans
Senior Lecturer
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.
Student participants
Ashton Cox
Student
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Olivia Liang
Student
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Student participants
Ashton Cox
Student
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
Olivia Liang
Student
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
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.
About the author
Professor Sonya Frost
Theoretical Physicist
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.
About the author
Professor Sonya Frost
Theoretical Physicist
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum eget velit ac ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed est sem. Duis egestas justo hos.