Category grid

Usage

Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.

A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.

The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.

When and how to use

• Use as a collection of cards only.
• Include clear and concise content.
• Use with icons or pictograms.
• Be careful not to include too many cards.
• Always use unique media items per card.

When and how not to use

• Don’t use a single card only.
• Don’t repeat content in the same a group of cards.
• Don’t overload with content.
• Don’t include with other interactive elements like links.
• Don’t use without a media item.
• Don’t use on pages with a sidebar.

Theming

The category grid uses colour to indicate interaction states.

To create your own theme see theming guidance for designers or theming guidance for developers.