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.
  • Any combination of colours can be used for panel headings.
  • Panel headings can be linked to other webpages.

Options available

Two columns option with paragraph text

Two column layout example displaying panels with paragraph text and showing all the colours available.

Example

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.

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.

This example has the panel headings linked, with each panel containing a list of links.

Example

Research portal

Research environment

Research support

Code 







	

		

			
Research portal

		

		

			
		

	





	

		

			
Research environment

		

		

			
		

	





	

		

			
Research support

This example is of a two column layout with each panel containing a list of links.

Example

Research portal

Research environment

Code 







	

		

			
Research portal

		

		

			
		

	





	

		

			
Research environment