Announcement Banner

Definition

The Promotional Announcement Bar is a full-width horizontal row placed directly above the site header. It contains a single line of promotional or informational text and may include a text link.

It does not contain imagery, buttons, icons, ratings, logos, or secondary elements.

Purpose / Why It Matters

This element provides a highly visible placement for time-sensitive or revenue-driving messaging without disrupting the core header structure.

Because it sits above navigation and primary calls to action, it must remain visually controlled, concise, and compliant with accessibility standards. Its purpose is to highlight — not overpower — the site experience.

Rules & Guidelines

Placement

• Must appear above the header.
• Must exist in its own dedicated row.
• Must not be integrated into the header layout.
• Must not interfere with navigation, reviews, logo, or primary CTA placement.
  

Content

• Messaging must be limited to a single sentence.
• Messaging must remain concise and written for quick scanning.
• Multi-sentence structures, long clauses, or dense phrasing are not permitted.
• Messaging must not rely on automatic wrapping to maintain readability.
• Recommended length (including spaces):
• 120 characters for desktop and tablet
• 100 characters for mobile
• Character counts are guidelines; slight overages are acceptable provided layout rules are maintained.
• Desktop and tablet (landscape) messaging must display on a single line and must not wrap.
• Mobile messaging (portrait) may wrap to a maximum of two lines.
• If messaging causes wrapping (e.g., desktop wrapping or mobile exceeding two lines), it must be shortened regardless of character count.
• Content should not rely on truncation or uncontrolled wrapping to meet layout constraints. 
• View Acceptable & Non-Acceptable Announcement Banner Examples →
  

Device-Specific Content Handling

The Announcement Banner supports device-specific messaging through the Content Library→Business Text

• Two separate Business Text fields must be used:
• Announcement Banner – Desktop
• Announcement Banner – Mobile
• View Content Library Example (Desktop & Mobile) →
• Desktop and tablet will use the Desktop version.
• Mobile will use the Mobile version.
• The default Announcement Banner section is automatically connected to the corresponding Content Library fields within the template.
• If the Announcement Banner is added after initial build, the content must be manually connected to the appropriate Desktop and Mobile Business Text fields.
• The Mobile version must be written to display within a maximum of two lines on standard mobile devices.
  

Height & Layout

• Maximum height: 50px on desktop.
• Must remain visually compact.
• Must not push core header content excessively below the fold.
• No buttons permitted due to height constraints.
• If a link is included, it must be styled as a text link only.
• Links are encouraged but not mandatory.
• The link may direct to:
• Financing page
• Specials page
• Contact page
• Gallery page
• Relevant internal landing page
• Excessive text length that causes the banner to exceed two lines on mobile must be corrected by shortening the message.
  

Color, Branding & Visual Treatment

• Default styling should align with the client’s brand color palette.
• Background and text color must meet accessibility contrast requirements.
• If brand colors do not provide sufficient visual prominence (e.g., black and white schemes), an alternate accent color may be used.
• Alternate colors must still align with brand standards and not appear disconnected from the overall design.
• The banner should attract attention without appearing visually aggressive or inconsistent with the overall design system.
  

Animation (Optional)

Subtle entrance animation is supported under the following conditions:

• Animation must be an entrance effect (e.g., fade-in, slight slide-in, bounce, etc).
• Continuous motion, looping effects, flashing, bouncing, or pulsing are not permitted.
• Animation is optional and should enhance visibility — not compete with primary calls to action.
  

Governance & Limitations

• Only one promotional announcement bar may be active at a time.
• This element is not a replacement for hero messaging.
• This element is not intended for permanent informational content.
• This is typically added after first proof approval.
• It should not be used as a workaround for structural layout limitations.
• Content Library fields for Announcement Banner – Desktop and Announcement Banner – Mobile are included at the template level.
• For existing sites, the Amends team is responsible for creating these fields when implementing the Announcement Banner.
• Both fields must be populated when the Announcement Banner is used.