NICE Design System home

Phase Banner

Use the phase banner component to show users your service is still in development.

AlphaThis is a new service - your feedback will help us to improve it.

When to use this component

Services hosted on a NICE subdomain must use the phase banner until they pass a live assessment. Use an alpha banner when your service is in alpha and a beta banner if your service is in a private or public beta.

How to use

Your banner must sit below the NICE global navigation and above the page breadcrumb. You should use a ‘feedback' link to collect feedback about your service. Ensure the user can return to their previous point on the page, having opened a dedicated page or form.

Variants

Alpha

AlphaThis is a new service - your feedback will help us to improve it.

React
HTML

_10
<PhaseBanner alpha>
_10
This is a new service - your <a href="#">feedback</a> will help us to
_10
improve it.
_10
</PhaseBanner>

Beta

BetaThis is a new service - your feedback will help us to improve it.

React
HTML

_10
<PhaseBanner beta>
_10
This is a new service - your <a href="#">feedback</a> will help us to
_10
improve it.
_10
</PhaseBanner>

Accessibility

Component meets WCAG AA guidelines for accessibility on:

  • Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).
  • UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
  • Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Research and evidence

No research done on the component at this time.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.