Message Bar

Coming soon

These design guidelines will be updated soon to reflect the Centenary theme.

Message Bar highlights time-sensitive campaigns and offers with a brief, easy-to-scan message and a prominent link.

How to use

Use Message Bar to promote time-sensitive campaigns and offers.

• Keep the description concise and scannable.
  • lg and above: max 1 line
  • md and below: max 2 lines
• Provide one clear action link that takes the user to the campaign landing page.
• Use one primary link only (avoid secondary actions).
• Responsive behavior:
  • On sm and md, description and action stack vertically.
  • On lg and above, description and action sit on the same row.

Example of a Message Bar.

Color

Message Bar uses neutral background with inverted foreground for both description text and link label.

Color mode

Light

Message Bar in a light-mode layout.

Dark

Message Bar in a dark-mode layout.

Target size

The action link uses a 40px target size.

Spacing

• lg and above: 16px horizontal spacer between description and action.
• md and below: 8px vertical spacer between description and action.

Examples

Campaign / offer promotion.

Considerations

Content

Keep the description scannable (aim for 1 line on lg+, max 2 on md and below). Use one clear action label that describes what happens next.

Do

Do use a concise description and a clear action label (“View offers”, “Learn more”, “Book service”).

Don’t

Don’t write a long, multi-topic description or use vague CTAs that don’t say what happens next.