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, to other web page content, the navigation grid pattern should be used.

Rules for the navbox grid

Must only be used within the main body of the page.
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.
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.
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

Example

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

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                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

Example

Study at St Andrews

Research

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Research

Two links with paragraphs

Example

Study at St Andrews

Research

Code



	
	
	
	
	
	    
	        
	            
	                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

Example

Study at St Andrews

Research

Code



	
	
	
	
	
	    
	        
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Research

Three links with images and paragraphs

Example

Study at St Andrews

Research

Alumni and donors

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                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

Example

Study at St Andrews

Research

Alumni and donors

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Alumni and donors

Three links with paragraphs

Example

Study at St Andrews

Research

Alumni and donors

Code



	
	
	
	
	
	    
	        
	            
	                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

Example

Study at St Andrews

Research

Alumni and donors

Code



	
	
	
	
	
	    
	        
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                Alumni and donors

Four links with images and paragraphs

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                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

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Why St Andrews

Four links with paragraphs

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Code



	
	
	
	
	
	    
	        
	            
	                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

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Code



	
	
	
	
	
	    
	        
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Why St Andrews

Five links with images and paragraphs

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Subjects

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                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

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Subjects

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Why St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Subjects

Five links with paragraphs

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Subjects

Code



	
	
	
	
	
	    
	        
	            
	                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

Example

Study at St Andrews

Research

Study at St Andrews

Why St Andrews

Subjects

Code



	
	
	
	
	
	    
	        
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Why St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Subjects

Six links with images and paragraphs

Example

Study at St Andrews

Research

Alumni and donors

Why St Andrews

Subjects

About

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                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

Example

Study at St Andrews

Research

Alumni and donors

Why St Andrews

Subjects

About

Code



	
	
	
	
	
	    
	        
	            
	                
	            
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Alumni and donors
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Why St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                Subjects
	            
	        
	    
	
	
	    
	        
	            
	                
	            
	            
	                About

Six links with paragraphs

Example

Study at St Andrews

Research

Alumni and donors

Why St Andrews

Subjects

About

Code



	
	
	
	
	
	    
	        
	            
	                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

Example

Study at St Andrews

Research

Alumni and donors

Why St Andrews

Subjects

About

Code



	
	
	
	
	
	    
	        
	            
	                Study at St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Research
	            
	        
	    
	
	
	    
	        
	            
	                Alumni and donors
	            
	        
	    
	
	
	    
	        
	            
	                Why St Andrews
	            
	        
	    
	
	
	    
	        
	            
	                Subjects
	            
	        
	    
	
	
	    
	        
	            
	                About

Navbox grid

Rules for the navbox grid

Options available

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