A NSW Government website
Search for a command to run...
Images support written content, strengthen brand identity and provide visual context. They help break up text-heavy layouts and can be used to highlight key information or create visual impact.
Use images in your emails when they:
The Images component offers flexible layout options to support a range of content. From full-width banners to side-by-side layouts, these options ensure images adapt to both single-column and multi-column designs.
Displays one image spanning the entire content area. Use this layout for banners, section dividers or strong visual moments.
Shows a single image within one grid column. This layout pairs well with text blocks or when the image supports specific content.
Places two images side by side in equal-width columns. Ideal for comparisons, showcasing multiple features or telling a visual story.
Use alignment settings to control how images sit within a multi-column layout. For example, align images to the left or right of accompanying text to create visual rhythm and balance.
Prop | Type | Default | Description |
---|---|---|---|
src | string | — | The image source URL. Must be an absolute or relative path to the image file. |
alt | string | — | Alternative text for accessibility. Required for all images to describe the purpose or content. |
width | number | string | 100% | Specifies the image width in pixels or percentage. Defaults to full container width unless overridden. |
height | number | string | auto | Specifies the image height in pixels or percentage. When omitted, height scales proportionally to width. |
aspectRatio | string | — | Optional fixed aspect ratio (e.g., "16:9", "4:3", "1:1"). Helps maintain consistent sizing across layouts. |
alignment | string | center | Controls horizontal alignment. Options: "left", "center", "right". Useful for multi-column or asymmetrical layouts. |
columns | number | — | Defines how many columns the image spans when placed in a grid. Common values: 1, 2. |
mobileClass | string | mobile-full-width | Responsive utility applied at ≤639px. Ensures images stack and remain legible on smaller screens. |
bgcolor | string | transparent | Optional background colour behind the image. Must use NSW digital palette tokens for consistency. |