Link grid

The link grid organizes the frequently used pages or top level calls to action. It guides people to important services and topics.

When viewed on a computer, the grid is a maximum of 3 links wide. On mobile devices, this grid stacks into a single column.

Sample

Example
Source code

Example

Short link 1

Short link 2

Short link 3

Source code


  
    Short link 1
  
  
    Short link 2
  
  
    Short link 3

Usage

When and how to use it

Use the link grid to highlight the top things people need. Organize the links in a way that makes sense for people’s primary needs and lead users to specific content.

The link grid is typically used on the homepage of a site so visitors can find and get to useful content quickly.

Only use the link grid if you have two or more links to add to it.

How not to use it

Avoid using more than 9 links. The link grid is intended to highlight the most important content. The recommended maximum grid size is 3 rows by 3 columns.

Because the grid collapses into one column on mobile, large grids may occupy several screens. This can hide lower links.

Accessibility

Standard accessibility review

Each time a new component version is published:

Test with the axe accessibility tool
Review with the VoiceOver or NVDA screen reader
Ensure all actionable elements are accessible by keyboard command and tab in a logical order
Check the component layout on a variety of screen sizes