Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies

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


Phase indicators


What does it do?

  • Helps users to identify when a service is in a development phase

When to use it?

  • Every service that has not passed its public beta service assessment must have a phase indicator
  • Within the header pattern
  • Within the phase banner pattern

A service can either be in Alpha (prototype stage) or Beta (when it is on a publicly accessible website).


HTML markup
<span class="wmnds-phase-indicator">

Nunjucks markup
{% from "wmnds/components/phase-indicator/_phase-indicator.njk" import wmndsPhaseIndicator %}

{{ wmndsPhaseIndicator() }}

HTML markup
<div class="wmnds-grid wmnds-banner-container">
  <div class="wmnds-col-auto wmnds-float-left wmnds-m-r-xsm">
    <span class="wmnds-phase-indicator">
  <div class="wmnds-col-auto">
    <p class="wmnds-banner-container__text">
      <a href="#" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
        Try our new disruptions page

Nunjucks markup
{% from "wmnds/components/phase-indicator/phase-indicator-link/_phase-indicator-link.njk" import wmndsPhaseIndicatorLink %}

      contentText: "Try our new disruptions page",
      href: "#",
      title: "link title"

Nunjucks properties
contentTextstringText content for the phase indicator link
hrefstringSpecifies the href to be used in the phase indicator link
titlestringTitle text for the phase indicator link