Gallery

The gallery component block is used to create an interactive visual story telling element to a page. Images are stacked in a 3 column grid and when the image is clicked it displays in a light box with further description.

See and interact with the Gallery component block demo on this page.

Listen

Demo component

Closeup photo of a honeybee foraging for nectar and pollen on a yellow pea flower growing on a shrub in coastal scrub forest in spring.

The image description displays here. The description is added to the image in the media library.

Koala sitting in between a tree at Taronga Zoo.

The descriptions on the images should provide the audience with information that complements the content on the page.

Eastern yellow robin (Eopsaltria australis) in the forest, Sydney, Australia

Closeup of a flock of Australian Galahs in the wild, walking on green grass and eating seed heads in autumn.

Try to create a narrative for the audience with the descriptions as they scroll through the gallery.

A short beaked echidna, Tachyglossus aculeatu, also known as the spiny anteater. This is an egg laying mammal or monotreme.

Don't use galleries for important information. Galleries should complement the main message of the page content.

Closeup of a wild Australian Swamp Wallaby in the bush - Cape Byron headland, Byron Bay, north coast NSW. Soft focus background.

Don’t use an image gallery just to create visual interest or fill space on the page.

Gallery with all images horizontal and the same size

The image description displays here. The description is added to the image in the media library.

The descriptions on the images should provide the audience with information that complements the content on the page.

The description should be a maximum of 200 words.

Try to create a narrative for the audience with the descriptions as they scroll through the gallery.

Don't use galleries for important information. Galleries should complement the main message of the page content.

Don’t use an image gallery just to create visual interest or fill space on the page.

Guidance

See the Help Hub guide for detailed instructions on how and when to use this component.

CMS components guide

Content Snake Block
Media
- Images
Editable component blocks
Layout builder component blocks
Easy Read Content Type Template
Agency content type - 'Key projects' layout demo
Agency content type - 'News focus' layout demo
Agency content type - 'About us' layout demo
Easy Read Navigation Page Template

downloadDownload as PDF printPrint this page shareShare this page

Facebook
LinkedIn
X
Email

Gallery

Demo component

DO NOT USE gallery one

DO NOT USE gallery two

DO NOT USE gallery three - portrait

DO NOT USE gallery four

DO NOT USE gallery five

DO NOT USE gallery six