Panel grid

The panel grid pattern arranges panel items in a column grid.

Rules for the panel grid

• Panels must be arranged equally into two or three columns.
• Panel elements must never appear outside of a grid.
• There is no limitation on combination of colours used for panel headings.
• Panel headings must link to other webpages.
• Links must be used in an unordered list with no more than six links per panel.

Options available

• Two columns option with paragraph text
• Three columns option with links
• Two columns option with links

---

Two columns option with paragraph text

Two column layout must be used when displaying panels with paragraph text. A variety of colours are available, in keeping with the colour palette.

Example

Code

	

		

			
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
		
		

			
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
		
		

			
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
		
		

			
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
		
		

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


	

		

			
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.
		
	

---

Three columns option with links

This example has the panel headings linked.

Example

Code

	

		

			
Research portal
		
		

			
Researchers
Publications
Impact
Data
Funded projects
		
	


	

		

			
Research environment
		
		

			
Committees and forums
Equality and diversity
Schools, centres and institutes
Funding
Collaborations
		
	


	

		

			
Research support
		
		

			
Knowledge transfer centre
Public engagement
RBDC
Library
Contact us
		
	

---

Two columns option with links

Example

Code

	

		

			
Research portal
		
		

			
Researchers
Publications
Impact
Data
Funded projects
		
	


	

		

			
Research environment
		
		

			
Committees and forums
Equality and diversity
Schools, centres and institutes
Funding
Collaborations