A NSW Government website

Command Palette

Search for a command to run...

Galleries

Use the Gallery component to display groups of images in a consistent, grid-based layout. This component helps present multiple visuals in a structured, scannable and visually balanced format across different email clients.

Galleries can use simple equal-sized grids or more dynamic masonry-style layouts. They are ideal for highlighting events, showcasing programs, providing project updates or supporting visual storytelling.

When to use

Use a Gallery when you need to:

  • display a group of related images in a single section
  • present visual content in a consistent, structured grid
  • highlight a series of projects, events or case studies
  • create a dynamic, image-rich section that works within the limitations of email clients.

When not to use

Avoid using a Gallery when:

  • displaying a single hero image – use the Image component instead
  • presenting long-form text content – use the Features or Cards component
  • adding decorative images that do not support meaning or purpose.

Variations

The NSW Email Toolkit supports several gallery layouts, from simple grids to dynamic masonry styles:

2 columns

Equal-width 2-column gallery for smaller image sets or stronger image emphasis.

2 columns with captions

2-column gallery that adds captions when image context or credits matter.

3 columns

Compact 3-column gallery for larger image sets.

4 columns

Dense 4-column gallery suited to thumbnail-style image sets.

Masonry

Staggered gallery layout for more editorial, image-led storytelling.

Masonry, small images left

Masonry variation that balances a hero image with smaller supporting images on the left.

Masonry, small images right

Mirrored masonry layout for alternating image rhythm across a campaign.

Design guidance

  • Optimise images for fast loading – avoid large file sizes.
  • Maintain consistent aspect ratios in equal-column layouts.
  • Use captions sparingly to keep content scannable.
  • Test in mobile clients – most galleries will stack images vertically for readability.

Accessibility

  • Ensure images have descriptive alt text that conveys meaning.
  • Don't rely solely on images – include captions or context where necessary.
  • Confirm text contrast in captioned layouts meets accessibility requirements.
  • Keep galleries keyboard and screen reader friendly by ordering images logically in the code.
Previous
Footers