Navbox grid

The navbox grid pattern presents a set of navboxes in various grid layouts. For a set of navigation links that are considered secondary in importance the navigation grid pattern should be used.

Rules for the navbox grid

• Must only be used within the main body of the page.
• Must only link to an internal webpage or web application.
• Navbox grids include top and bottom padding as default. This can be removed by assigning the respective classes collapse-top and collapse-bottom to the element with the navbox-grid class.
• Medium navboxes must not have a title that exceeds 88 characters.
• Small navboxes must not have a title that exceeds 57 characters.
• When using an image, the image must relate to the link destination.
• If a navbox with an image is used, all of the navboxes in the grid must include images.
• If a navbox without an image is used, all of the navboxes in the grid must not include images.
• Navbox grids that exceed six navboxes must not have images unless there is a proven user requirement.
• Navboxes with accompanying paragraph text must provide further context of the page where the navbox links to.
• Navboxes with accompanying paragraphs must be concise and must not have more than 300 characters.
• If a navbox with a paragraph is used, all of the navboxes in the grid must include paragraphs.
• If a navbox without a paragraph is used, all of the navboxes in the grid must not include paragraphs.

If there is ever an error with the navbox grid where the rows overlap you can use <div class="clearfix"></div> after the final navbox in a row to correct it.

Options available

Choose the grid option below that matches the number of navigation links required. For information on image sizes, see the navbox pattern.

• Two links with images and paragraphs
• Two links with images
• Two links with paragraphs
• Two links without images or paragraphs
• Three links with images and paragraphs
• Three links with images
• Three links with paragraphs
• Three links without images or paragraphs
• Four links with images and paragraphs
• Four links with images
• Four links with paragraphs
• Four links without images or paragraphs
• Five links with images and paragraphs
• Five links with images
• Five links with paragraphs
• Five links without images or paragraphs
• Six links with images and paragraphs
• Six links with images
• Six links with paragraphs
• Six links without images or paragraphs
• More than six links with paragraphs
• More than six links without images or paragraphs

Two links with images and paragraphs

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Two links with images

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	    
	
	
	
	
	

Two links with paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Two links without images or paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Research
	            
	        
	    
	
	
	
	
	

Three links with images and paragraphs

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Alumni and donors
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Three links with images

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Alumni and donors
	            
	        
	    
	
	
	
	
	

Three links with paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Alumni and donors
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Three links without images or paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                Alumni and donors
	            
	        
	    
	
	
	
	
	

Four links with images and paragraphs

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Why St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Four links with images

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Why St Andrews
	            
	        
	    
	
	
	
	
	

Four links with paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Four links without images or paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	    
	
	
	
	
	

Five links with images and paragraphs

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Why St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Subjects
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Five links with images

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Why St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Subjects
	            
	        
	    
	
	
	
	
	

Five links with paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Subjects
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Five links without images or paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Subjects
	            
	        
	    
	
	
	
	
	

Six links with images and paragraphs

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Alumni and donors
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Why St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                Subjects
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                
	            
	            

	                About
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Six links with images

	

	
	
	

	
	    

	        

	            

	                
	            
	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Alumni and donors
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Why St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                Subjects
	            
	        
	    
	
	
	    

	        

	            

	                
	            
	            

	                About
	            
	        
	    
	
	
	
	
	

Six links with paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Alumni and donors
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Subjects
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                About
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	
	
	

Six links without images or paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                Alumni and donors
	            
	        
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Subjects
	            
	        
	    
	
	
	    

	        

	            

	                About
	            
	        
	    
	
	
	
	
	

More than six links with paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	    
	
	
	    

	        

	            

	                Research
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	    
	
	
	    

	        

	            

	                Alumni and donors
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Subjects
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	    
	
	
	    

	        

	            

	                About
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                News
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	    
	
	
	    

	        

	            

	                Events
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	    
	
	
	    

	        

	            

	                Contact us
	            
	        
	        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	    
	
	
	
	
	

More than six links without images or paragraphs

	

	
	
	

	
	    

	        

	            

	                Study at St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Research
	            
	        
	    
	
	
	    

	        

	            

	                Alumni and donors
	            
	        
	    
	
	
	    

	        

	            

	                Why St Andrews
	            
	        
	    
	
	
	    

	        

	            

	                Subjects
	            
	        
	    
	
	
	    

	        

	            

	                About
	            
	        
	    
	
	
	    

	        

	            

	                News
	            
	        
	    
	
	
	    

	        

	            

	                Events
	            
	        
	    
	
	
	    

	        

	            

	                Contact us