University of St Andrews

Panel

The panel pattern shows either a header link with an optional background colour or an image. Both always with a description. Panels are can be used in asides for additional information or combined together to form a panel grid.

Rules for panels

• Individual panels must only be used in asides.
• Multiple panels must not be used in asides.
• Individual panels must not be used in the main body of pages.
• Panel grid pattern must be used to feature multiple panels on a page.
• Any combination of coloured of panels can be used on a panel grid.
• Panels with images must only appear in asides.
• Images in panels must be 360 × 240 pixels.

Options available

• Primary
• Secondary
• Tertiary 1
• Tertiary 2
• Tertiary 3
• Panel with image

Primary

	

		

			
Primary
		
		

			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.
		
	

Secondary

	

		

			
Secondary
		
		

			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.
		
	

Tertiary 1

	

		

			
Tertiary 1
		
		

			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.
		
	

Tertiary 2

	

		

			
Tertiary 2
		
		

			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.
		
	

Tertiary 3

	

		

			
Tertiary 3
		
		

			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.
		
	

Panel with image

A panel with an image must only be used in asides. It is recommended that panels with images include a link in the description text for further context. Images be must 360 × 240 pixels in resolution.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.

	

		

        	
        
		

			
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque adipisci id perspiciatis veniam magnam! Numquam incidunt placeat eos cum. Beatae perspiciatis officiis sint harum.