Navbox grid

The navbox grid pattern presents a set of navboxes in various grid layouts.

Rules for the navbox grid

Must only be used within the main body of the page.
Must only be used on whole content columns.
Must only link to an internal webpage or web application.
Must not have a title that is longer than two lines of text.
When using an image, the image must relate to the link destination.
If a grid with images is used, all of the navboxes in the grid must include images.
If a grid without images is used, all of the navboxes in the grid must not include images.
When using an image you must have between two and six navboxes in a grid.
Navbox grids that exceed six navboxes must not have images.

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
Three links with images
Three links with images and paragraphs
Three links without images and paragraphs
Three links with paragraphs but without images
Four links with images
Five links with images
Six links with images
More than six links without images
More than six links with paragraphs but without images

Two links with images

Study at St Andrews

Research

Code





    
        
            
                
            
            
                Study at St Andrews
            
        
    


    
        
            
                
            
            
                Research

Three links with images

Study at St Andrews

Research

Alumni and donors

Code





    
        
            
                
            
            
                Study at St Andrews
            
        
    


    
        
            
                
            
            
                Research
            
        
    


    
        
            
                
            
            
                Alumni and donors

Three links with images and paragraphs

Use this option when you want to give a brief summary of the destination page.

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

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 and paragraphs

Study at St Andrews

Research

Alumni and donors

Code





    
        
            
                Study at St Andrews
            
        
    


    
        
            
                Research
            
        
    


    
        
            
                Alumni and donors

Three links with paragraphs but without images

Use this option when you want to give a brief summary of the destination page.

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.

Four links with images

Why St Andrews

Research

Alumni and donors

The town

Code





    
        
            
                
            
            
                Why St Andrews
            
        
    


    
        
            
                
            
            
                Research
            
        
    


    
        
            
                
            
            
                Alumni and donors
            
        
    


    
        
            
                
            
            
                The town

Five links with images

Undergraduate

Postgraduate

Schools

About

Contact

Code





    
        
            
                
            
            
                Undergraduate
            
        
    


    
        
            
                
            
            
                Postgraduate
            
        
    


    
        
            
                
            
            
                Schools
            
        
    


    
        
            
                
            
            
                About
            
        
    


    
        
            
                
            
            
                Contact

Six links with images

Study at St Andrews

Research

Alumni and donors

About

People

Contact

Code





    
        
            
                
            
            
                Study at St Andrews
            
        
    


    
        
            
                
            
            
                Research
            
        
    


    
        
            
                
            
            
                Alumni and donors
            
        
    


    
        
            
                
            
            
                About
            
        
    


    
        
            
                
            
            
                People
            
        
    


    
        
            
                
            
            
                Contact

More than six links with paragraphs but without images

Must be used when you have more than six links with a paragraph.

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

About

Governance

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

History

Sustainability

News

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Visiting

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

Code





    
        
            
                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.
    


    
        
            
                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.
    


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


    
        
            
                History
            
        
        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.
    


    
        
            
                Sustainability
            
        
        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.
    


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

Digital pattern library

Navbox grid

Rules for the navbox grid

Options available

Two links with images

Three links with images

Three links with images and paragraphs

Three links without images and paragraphs

Three links with paragraphs but without images

Four links with images

Five links with images

Six links with images

More than six links without images

More than six links with paragraphs but without images