This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Design System documentation

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

Alpha & Beta

Alpha and beta beta banners clearly identify non-live services

Why?

If your service is on the NICE subdomain and is within alpha or beta you must have a phase banner which reflects this.

Usage

Your banner must sit below the TopHat, 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 in the page, having opened a dedicated page or form.

Variants

Alpha

Example

Alpha This is a new service – your feedback will help us to improve it.

Source


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

Beta

Example

Beta This is a new service – your feedback will help us to improve it.

Source


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

Edit on GitHub