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.