A NSW Government website

Command Palette

Search for a command to run...

Header bars

The header bar is a short strip of content at the top of an email. It provides important context or utility links such as View in browser, Manage preferences, or Unsubscribe.

Separating these links from the main content helps improve clarity, accessibility and compliance. Header bars can also include information such as dates, contact details or security messages to help readers understand the context.

When to use

Use a header bar when you need to:

  • provide links that relate to the email itself, not its main content
  • offer another way for readers to interact with the email, such as viewing it in a browser
  • include contact details, dates or security advice
  • meet compliance and accessibility requirements, including making preference and unsubscribe options clear.

When not to use

Avoid using a header bar for:

  • primary calls to action – these belong in the body of the email
  • long-form content – header bars should be brief and functional
  • decorative or non-functional content – every element should serve a purpose.

Variations

The NSW Email Toolkit includes several header bar styles:

View in browser

Single utility link for browser fallback when rendering may vary across clients.

Date + view in browser

Adds a date stamp beside the browser-view link for newsletters and timed updates.

Contact + social

Pairs contact options with social links when support and ongoing engagement both matter.

Contact + view in browser

Combines support details with a browser-view fallback in one utility strip.

Manage preferences

Compliance-focused links for subscription preferences and unsubscribe options.

Compact set of browser-view, preferences and unsubscribe links in one bar.

Security advice

Short security message for sensitive or service-led emails that need extra trust cues.

Design guidance

  • Keep header bars minimal and unobtrusive – they are for utility, not primary content.
  • Place the most important action (for example, “View in browser”) at the start or left for visibility.
  • Use consistent font size and colour contrast so links remain accessible.
  • Avoid clutter by limiting to one or two functions per bar unless using the dedicated Links variation.

Accessibility

  • Ensure links are descriptive (for example, “View this email in your browser” instead of “Click here”).
  • Maintain colour contrast ratios for text against the background.
  • Screen readers should read header bars in a logical order before moving into the main content.
Previous
Galleries