A NSW Government website
NSW Government
NSW Design System v3.26.0

Media

Media combines visual elements with text to give context and alignment within content.

Figma

Usage

Use media to add an image or video that supports and reinforces the content. Ensure media used is relevant and impactful.

Each media component needs to be allocated a width and position. We recommend using width percentages in increments of ten at the positions below:

  • Widths of 30%, 40% and 50% should have a position of left or right
  • Widths of 60%, 70%, 80%, 90% and 100% should have a position of centre.

Captions

Captions by default contain a coloured background to visually connect the text to the image or video. If your caption text would be better placed without a background, this option is also available.

Read more about using captions.

Video thumbnail

Use a thumbnail image that clearly represents the video. Avoid relying on the default frame chosen by the video platform — it may not reflect the main message or context.

Add a play icon overlay to help users recognise that it's a video, not just an image. If you're using the Figma UI kit, the icon is already built in, so you can easily export the thumbnail with the overlay in place.

If you're using another design tool or need to add it manually, you can download our standard play icon.

Download NSW play icon SVG

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

View in new windowView theming example

Full width

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Full width with Brand Dark background

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Full width with Brand Light background

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Full width without background

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Full width video

Use the official play icon to indicate that the thumbnail is a video.
Download NSW play icon SVG

A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Centre 90%

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Centre 80%

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Centre 70%

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Centre 60%

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Left 50%

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Right 50%

A picture of a black dog
A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.
Show code Hide code

Left 40%

A picture of a black dog
A long caption, ee mei labores adipiscing.
Show code Hide code

Right 40%

A picture of a black dog
A long caption, ee mei labores adipiscing.
Show code Hide code

Left 30%

A picture of a black dog
Show code Hide code

Right 30%

A picture of a black dog
Show code Hide code