University of St Andrews

Showcase banner

This pattern is for showcasing informative headlines, statistics, and other positive content with a full width background. Header and paragraph text is displayed along with a vector icon to add context to the headline. A navbox is included to act as a reference link for further reading.

Rules for showcase banners

• Navboxes must be included on all banners.
• Icons used must be Font Awesome icons. See the Font Awesome pattern page for a full list of approved icons.
• If there is a user case to use other icons outwith the Font Awesome selection, the digital communications team must be consulted.
• Only the colours from the background colour groups shown in the options can be used.
• Colours from different background colour groups must not be combined when using sequential banners.
• Background colours must be in numerical order when using sequential banners.
• For rules on appropriate use of navboxes, please see the navbox pattern page.
• The headline character count must not exceed 100 characters.
• The paragraph character count must not exceed 500 characters.

CSS classes for approved background colour groups

Options available

• One panel
• Two panels
• Three panels

One panel

	

		

			

					
Lorem ipsum dolor sit amet
					
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			
			

					
			
			

					
					
					
					

					    

					        

					            

					                
					            
					            

					                Lorem ipsum dolor sit amet
					            
					        
					    
					
					
								
		
	

Two panels

	

		

			

					
Lorem ipsum dolor sit amet
					
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			
			

					
			
			

					
					
					
					

					    

					        

					            

					                
					            
					            

					                Lorem ipsum dolor sit amet
					            
					        
					    
					
					
								
		
	


	

		

			

					
Lorem ipsum dolor sit amet
					
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			
			

					
			
			

					
					
					
					

					    

					        

					            

					                
					            
					            

					                Lorem ipsum dolor sit amet
					            
					        
					    
					
					
								
		
	

Three panels

	

		

			

					
Lorem ipsum dolor sit amet
					
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			
			

					
			
			

					
					
					
					

					    

					        

					            

					                
					            
					            

					                Lorem ipsum dolor sit amet
					            
					        
					    
					
					
								
		
	


	

		

			

					
Lorem ipsum dolor sit amet
					
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			
			

					
			
			

					
					
					
					

					    

					        

					            

					                
					            
					            

					                Lorem ipsum dolor sit amet
					            
					        
					    
					
					
								
		
	


	

		

			

					
Lorem ipsum dolor sit amet
					
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			
			

					
			
			

					
					
					
					

					    

					        

					            

					                
					            
					            

					                Lorem ipsum dolor sit amet