Phase Banner

Use a phase banner to show users that a service is in alpha or beta, and to ask for feedback.

Alpha Banner

Use the alpha banner for services in early development that are being tested with a small group of users.

<div class="phase-banner">
  <div class="phase-banner-content">
    <span class="phase-banner-tag phase-banner-tag-alpha">Alpha</span>
    <p class="phase-banner-text">
      This is a new service – your <a href="#">feedback</a> will help us to improve it.
    </p>
  </div>
</div>

Beta Banner

Use the beta banner for services that are more developed but still being tested and improved.

<div class="phase-banner">
  <div class="phase-banner-content">
    <span class="phase-banner-tag phase-banner-tag-beta">Beta</span>
    <p class="phase-banner-text">
      This is a new service – your <a href="#">feedback</a> will help us to improve it.
    </p>
  </div>
</div>

Default Banner

Use the default style for custom phases or announcements.

<div class="phase-banner">
  <div class="phase-banner-content">
    <span class="phase-banner-tag">New</span>
    <p class="phase-banner-text">
      We've updated this service. <a href="#">See what's changed</a>.
    </p>
  </div>
</div>

When to Use

Use a phase banner when:

• A service is in alpha testing
• A service is in beta testing
• You want to collect user feedback
• You need to set user expectations about service maturity

Remove the phase banner when:

• The service has passed assessment and is live
• The service is no longer being actively improved

Usage Guidelines

Do

• Place at the top of the page, below the header
• Include a feedback link
• Use consistent wording across your service
• Remove when the service moves to live

Don't

• Don't use both alpha and beta banners on the same service
• Don't leave the banner indefinitely
• Don't use for marketing messages

Phase Definitions

Alpha

Early stage, testing core functionality with limited users. Expect significant changes.

Beta

More complete service being tested with a wider audience. May still have issues.

Live

Fully operational service. No banner needed.

Accessibility

• The banner is not interactive (except the feedback link)
• Screen readers can understand the content
• Colour contrast meets WCAG requirements

CSS Classes

/* Container */
.phase-banner { }
.phase-banner-content { }

/* Tag */
.phase-banner-tag { }
.phase-banner-tag-alpha { }
.phase-banner-tag-beta { }

/* Text */
.phase-banner-text { }