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
• Grid of profiles
• Two profiles with indented descriptions
• One profile with indented description

---

Three profiles with descriptions

Example

Code

	

		
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.

Example

Code

	

		
		

			

				

					
	
						
					
					

						
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.

Example

Code

	

		
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.

Example

Code

	

		
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.