NSW Email Design System

Features

The Feature component spans the full width of the email canvas and displays content in two columns. One column contains a full-bleed image with no padding. The other includes a heading, short description and a call-to-action (CTA) button or link.

Use this component to pair text with a supporting image or icon. It’s ideal for promoting services, campaigns or key content in a way that balances clarity with visual impact.

You can use a single Feature to highlight a message, or stack multiple Features to build a modular story. Layout variations adjust the proportion of space between text and image, helping you emphasise either the written content or the visual.

When to use

Use the Feature component when:

you want to highlight a service, program or campaign using both text and imagery
content needs to be scannable and balanced, not presented as plain text
alternating left–right layouts add visual rhythm to longer emails
an image, icon or graphic reinforces the message without dominating it.

When not to use

Avoid using the Feature component for:

long-form letters or policy notices – use the Letter template instead
highly transactional content like reminders or receipts – use the Transactional template
media-heavy content where the image is primary – use Image or Card components.

Layout options

The Features component includes several layout variations that control how space is shared between text and images. Choose a layout that reflects your content's purpose and supports a clear reading flow.

Content left (8–4 split)

Text takes up two-thirds of the width on the left, with a narrower image on the right. Best when the copy is the main focus and the image plays a supporting role.

Content left (7–5 split)

Text block on the left balanced with a medium-width image on the right. Provides a good balance of storytelling and visual support.

Content left (6–6 split)

A clean 50/50 split with text on the left and image on the right. Ideal when text and visuals are equally important.

Content right (4–8 split)

A wide image on the left with a narrower content area on the right. Works well when the image is strong and needs to lead the story.

Content right (5–7 split)

Medium-width image on the left with a slightly larger text block on the right. Balances image impact with room for more copy.

Content right (6–6 split)

Even split with image on the left and text on the right. Creates rhythm when alternated with content-left layouts.

Design guidance

Keep text concise — headings, a short summary, and a primary link or button.
Ensure images are contextual and add meaning rather than decoration.
Alternate left/right versions in long emails to avoid monotony.
Use NSW Government brand imagery, pictograms, or photography to maintain trust and consistency.

Accessibility

Always provide alt text for images.
Maintain a clear reading order — text first in the source code so it reads correctly when stacked on mobile or by screen readers.
Ensure sufficient contrast between text and background.
Avoid embedding critical content in images — always pair with text.

Features

Use this component to pair text with a supporting image or icon. It’s ideal for promoting services, campaigns or key content in a way that balances clarity with visual impact.

When to use

Use the Feature component when:

you want to highlight a service, program or campaign using both text and imagery
content needs to be scannable and balanced, not presented as plain text
alternating left–right layouts add visual rhythm to longer emails
an image, icon or graphic reinforces the message without dominating it.

When not to use

Avoid using the Feature component for:

long-form letters or policy notices – use the Letter template instead
highly transactional content like reminders or receipts – use the Transactional template
media-heavy content where the image is primary – use Image or Card components.

Layout options

Content left (8–4 split)

Text takes up two-thirds of the width on the left, with a narrower image on the right. Best when the copy is the main focus and the image plays a supporting role.

Content left (7–5 split)

Text block on the left balanced with a medium-width image on the right. Provides a good balance of storytelling and visual support.

Content left (6–6 split)

A clean 50/50 split with text on the left and image on the right. Ideal when text and visuals are equally important.

Content right (4–8 split)

A wide image on the left with a narrower content area on the right. Works well when the image is strong and needs to lead the story.

Content right (5–7 split)

Medium-width image on the left with a slightly larger text block on the right. Balances image impact with room for more copy.

Content right (6–6 split)

Even split with image on the left and text on the right. Creates rhythm when alternated with content-left layouts.

Design guidance

Keep text concise — headings, a short summary, and a primary link or button.
Ensure images are contextual and add meaning rather than decoration.
Alternate left/right versions in long emails to avoid monotony.
Use NSW Government brand imagery, pictograms, or photography to maintain trust and consistency.

Accessibility

Always provide alt text for images.
Maintain a clear reading order — text first in the source code so it reads correctly when stacked on mobile or by screen readers.
Ensure sufficient contrast between text and background.
Avoid embedding critical content in images — always pair with text.

Command Palette

Command Palette

Features

When to use

When not to use

Layout options

Content left (8–4 split)

Content left (7–5 split)

Content left (6–6 split)

Content right (4–8 split)

Content right (5–7 split)

Content right (6–6 split)

Design guidance

Accessibility

Features

When to use

When not to use

Layout options

Content left (8–4 split)

Content left (7–5 split)

Content left (6–6 split)

Content right (4–8 split)

Content right (5–7 split)

Content right (6–6 split)

Design guidance

Accessibility