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

Example
Code


		

Two links with images

Example
Code


		

Two links with paragraphs

Example
Code


		

Two links without images or paragraphs

Example
Code


		

Three links with images and paragraphs

Example
Code


		

Three links with images

Example
Code


		

Three links with paragraphs

Example
Code


		

Three links without images or paragraphs

Example
Code


		

Four links with images and paragraphs

Example
Code


		

Four links with images

Example
Code


		

Four links with paragraphs

Example
Code


		

Four links without images or paragraphs

Example
Code


		

Five links with images and paragraphs

Example
Code


		

Five links with images

Example
Code


		

Five links with paragraphs

Example
Code


		

Five links without images or paragraphs

Example
Code


		

Six links with images and paragraphs

Example
Code


		

Six links with images

Example
Code


		

Six links with paragraphs

Example
Code


		

Six links without images or paragraphs

Example
Code


		

More than six links with paragraphs

Example
Code


		

More than six links without images or paragraphs

Example
Code