A NSW Government website
NSW Government
Design System v3.18.3

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.

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.

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.

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.

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.

Full width video

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

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.

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.

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.

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.

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.

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.

Left 40%

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

Right 40%

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

Left 30%

A picture of a black dog

Right 30%

A picture of a black dog