Ripple Design System

Media gallery

The Media gallery component is a series of images users can side-scroll through.


Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images.

Media gallery combines images and text to give users context within the content.

Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.

See media for information relating to file type, ratios and focal point.

When and how to use

  • Include related images only.
  • Use at least 2 images.
  • Always use a media title.
  • Include an optional caption to help users understand images' context and relevance to the page content.
  • Use on any page type.

When and how not to use

  • Don't use for decorative purposes.
  • Don't use sensory images.
  • Don't use for a single image, instead use the media embed component.
  • Don't use with media unrelated to page content.


Media embed uses colour for:

  • icons
  • indicating an interaction to users
  • interactive states.

It also adopts its theming from the pagination component.

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

Propose a change to this page on GitHub.