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