Ripple Design System

Category grid

The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.


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.


The category grid uses colour to indicate interaction states.

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