Components

Disruption indicators

About

Disruption indicators are used to show the current service status within interfaces and maps. There are three types all giving different levels of detail.

Small

What does it do?

A pin to place on a map
Shows the modal icon
Shows severity of the disruption with background colour and icon

When to use it?

On a live map

Minor disruption

HTML markup

<!-- map pin for bus -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

<!-- map pin for coach -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-coach" href="#wmnds-modes-isolated-coach"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

<!-- map pin for cycle -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

<!-- map pin for metro -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

<!-- map pin for plane -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-plane" href="#wmnds-modes-isolated-plane"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

<!-- map pin for rail -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

<!-- map pin for roads -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

<!-- map pin for walk -->
<span class="wmnds-disruption-indicator-small">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</span>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/small/_small.njk" import wmndsDisruptionIndicatorSmall %}

{{
  wmndsDisruptionIndicatorSmall({
    mode: "bus",
    iconRight: "general-warning-triangle",
    classes: "wmnds-disruption-indicator-small--error"
  })
}}

Nunjucks properties

Name	Type	Description
mode	string	Required. Specifies the travel mode which the disruption relates to. Accepted values are: `bus`, `coach`, `cycle`, `metro`, `plane`, `rail`, `roads` and `walk`
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). Default value is `general-warning-circle`
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-small--severe`

Major disruption

HTML markup

<!-- map pin for bus -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for coach -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-coach" href="#wmnds-modes-isolated-coach"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for cycle -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for metro -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for plane -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-plane" href="#wmnds-modes-isolated-plane"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for rail -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for roads -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for walk -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--error">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/small/_small.njk" import wmndsDisruptionIndicatorSmall %}

{{
  wmndsDisruptionIndicatorSmall({
    mode: "bus",
    iconRight: "general-warning-triangle",
    classes: "wmnds-disruption-indicator-small--error"
  })
}}

Nunjucks properties

Name	Type	Description
mode	string	Required. Specifies the travel mode which the disruption relates to. Accepted values are: `bus`, `coach`, `cycle`, `metro`, `plane`, `rail`, `roads` and `walk`
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). Default value is `general-warning-circle`
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-small--severe`

Severe disruption

HTML markup

<!-- map pin for bus -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for coach -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-coach" href="#wmnds-modes-isolated-coach"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for cycle -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for metro -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for plane -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-plane" href="#wmnds-modes-isolated-plane"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for rail -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for roads -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

<!-- map pin for walk -->
<span class="wmnds-disruption-indicator-small wmnds-disruption-indicator-small--severe">
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-small__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</span>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/small/_small.njk" import wmndsDisruptionIndicatorSmall %}

{{
  wmndsDisruptionIndicatorSmall({
    mode: "bus",
    iconRight: "general-warning-triangle",
    classes: "wmnds-disruption-indicator-small--error"
  })
}}

Nunjucks properties

Name	Type	Description
mode	string	Required. Specifies the travel mode which the disruption relates to. Accepted values are: `bus`, `coach`, `cycle`, `metro`, `plane`, `rail`, `roads` and `walk`
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). Default value is `general-warning-circle`
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-small--severe`

Medium - Normal

What does it do?

Shows the route number
Shows the severity with the background colour and icon where there is data, purple where there is no data

When to use it?

In search results, when searching for a bus route

X15

HTML markup

<div class="wmnds-disruption-indicator-medium">
  <span class="wmnds-disruption-indicator-medium__service">X15</span>
</div>

<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success">
  <span class="wmnds-disruption-indicator-medium__service">X15</span>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
  </svg>
</div>

<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning">
  <span class="wmnds-disruption-indicator-medium__service">X15</span>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</div>

<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--error">
  <span class="wmnds-disruption-indicator-medium__service">X15</span>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--severe">
  <span class="wmnds-disruption-indicator-medium__service">X15</span>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/medium/_medium.njk" import wmndsDisruptionIndicatorMedium %}

{{
  wmndsDisruptionIndicatorMedium({
    contentText: "X15",
    iconRight: "general-warning-triangle",
    iconLeft: "modes-isolated-bus",
    iconRightBtn: false,
    displayNarrow: false,
    capitalize: false,
    classes: "wmnds-disruption-indicator-medium--error"
  })
}}

Nunjucks properties

Name	Type	Description
contentText	string	Text to describe the route name or number of the mode of transport.
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeft	string	The icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtn	boolean	If set to true the right icon will be displayed as a clickable button. Default value is false.
displayNarrow	boolean	If set to true, the badge will be displayed in the narrow style. Default value is false.
capitalize	boolean	If set to true, the badge text will display in a title text format rather than uppercase. Default value is false.
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-medium--severe`

Medium - Narrow

What does it do?

Shows the route number
Shows the modal icon
Shows the disruption severity with the background

When to use it?

When showing a specific bus route's disruption status
Example: homepage travel updates widget or major roadworks sidebar

When not use it?

If the service is not a route

HTML markup

<!-- Bus (good service) -->
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow">
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
  </svg>
</div>

<!-- Bus (mindor disruption) -->
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning wmnds-disruption-indicator-medium--narrow">
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</div>

<!-- Bus (major disruption) -->
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--error wmnds-disruption-indicator-medium--narrow">
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Bus (severe disruption) -->
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--severe wmnds-disruption-indicator-medium--narrow">
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Bus (delete) -->
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--error wmnds-disruption-indicator-medium--narrow">
  <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
    <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
  </svg>
  <button class="wmnds-disruption-indicator-medium__btn" aria-label="Delete favourite - bus - ">
    <svg class="wmnds-disruption-indicator-medium__icon">
      <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
    </svg>
  </button>
</div>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/medium/_medium.njk" import wmndsDisruptionIndicatorMedium %}

{{
  wmndsDisruptionIndicatorMedium({
    contentText: "X15",
    iconRight: "general-warning-triangle",
    iconLeft: "modes-isolated-bus",
    iconRightBtn: false,
    displayNarrow: false,
    capitalize: false,
    classes: "wmnds-disruption-indicator-medium--error"
  })
}}

Nunjucks properties

Name	Type	Description
contentText	string	Text to describe the route name or number of the mode of transport.
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeft	string	The icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtn	boolean	If set to true the right icon will be displayed as a clickable button. Default value is false.
displayNarrow	boolean	If set to true, the badge will be displayed in the narrow style. Default value is false.
capitalize	boolean	If set to true, the badge text will display in a title text format rather than uppercase. Default value is false.
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-medium--severe`

Large

What does it do?

Shows the route name or number
Shows the modal name and icon
Shows the disruption severity with the background colour, icon and text

When to use it?

Showing a specific train, tram or road's disruption status
Example: homepage travel updates widget or major roadworks sidebar

Research

During user testing for the home page travel update widget, users preferred having a text description of the mode in addition to the modal icons, as the train and tram brand icons are very similar when small

Train

Train Good service
Cross City Line

Train Minor disruption
Cross City Line

Train Major disruption
Cross City Line

Train Severe disruption
Cross City Line

Train Major disruption
Cross City Line

HTML markup

<!-- Train (good service) -->
<div class="wmnds-disruption-indicator-large">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
      </svg>
      <br>Train
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Good service</strong><br>
      Cross City Line
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
  </svg>
</div>

<!-- Train (minor disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--warning">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
      </svg>
      <br>Train
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Minor disruption</strong><br>
      Cross City Line
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</div>

<!-- Train (major disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--error">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
      </svg>
      <br>Train
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Major disruption</strong><br>
      Cross City Line
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Train (severe disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--severe">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
      </svg>
      <br>Train
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Severe disruption</strong><br>
      Cross City Line
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Train (delete) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--error">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
      </svg>
      <br>Train
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Major disruption</strong><br>
      Cross City Line
    </span>
  </div>
  <button class="wmnds-disruption-indicator-large__btn" aria-label="Delete favourite - Train - Major disruption">
    <svg class="wmnds-disruption-indicator-large__icon">
      <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
    </svg>
  </button>
</div>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/large/_large.njk" import wmndsDisruptionIndicatorLarge %}

{{
  wmndsDisruptionIndicatorLarge({
    primaryText: "Minor disruption",
    contentText: "A38",
    mode: "train",
    iconRight: "general-warning-triangle",
    iconLeft: "modes-isolated-bus",
    iconRightBtn: false,
    classes: "wmnds-disruption-indicator-large--error"
  })
}}

Nunjucks properties

Name	Type	Description
primaryText	string	Required. Primary text which describes the status/severity of the transport mode disruption.
contentText	string	Further text to describe the route of the mode of transport.
mode	string	Required. Specifies the travel mode which the disruption relates to. Accepted values are: `bus`, `coach`, `cycle`, `metro`, `plane`, `rail`, `roads` and `walk`.
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeft	string	The icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtn	boolean	If set to true the right icon will be displayed as a clickable button. Default value is false.
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-large--severe`

Tram

Tram Good service

Tram Minor disruption
Between Jewellery Quarter and Wolverhampton

Tram Major disruption
Between Jewellery Quarter and Wolverhampton

Tram Severe disruption
Between Jewellery Quarter and Wolverhampton

Tram Major disruption
Between Jewellery Quarter and Wolverhampton

HTML markup

<!-- Tram (good service) -->
<div class="wmnds-disruption-indicator-large">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
      </svg>
      <br>Tram
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Good service</strong><br>
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
  </svg>
</div>

<!-- Tram (minor disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--warning">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
      </svg>
      <br>Tram
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Minor disruption</strong><br>
      Between Jewellery Quarter and Wolverhampton
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</div>

<!-- Tram (major disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--error">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
      </svg>
      <br>Tram
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Major disruption</strong><br>
      Between Jewellery Quarter and Wolverhampton
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Tram (severe disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--severe">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
      </svg>
      <br>Tram
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Severe disruption</strong><br>
      Between Jewellery Quarter and Wolverhampton
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Tram (delete) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--error">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
      </svg>
      <br>Tram
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Major disruption</strong><br>
      Between Jewellery Quarter and Wolverhampton
    </span>
  </div>
  <button class="wmnds-disruption-indicator-large__btn" aria-label="Delete favourite - Tram - Major disruption">
    <svg class="wmnds-disruption-indicator-large__icon">
      <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
    </svg>
  </button>
</div>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/large/_large.njk" import wmndsDisruptionIndicatorLarge %}

{{
  wmndsDisruptionIndicatorLarge({
    primaryText: "Minor disruption",
    contentText: "A38",
    mode: "train",
    iconRight: "general-warning-triangle",
    iconLeft: "modes-isolated-bus",
    iconRightBtn: false,
    classes: "wmnds-disruption-indicator-large--error"
  })
}}

Nunjucks properties

Name	Type	Description
primaryText	string	Required. Primary text which describes the status/severity of the transport mode disruption.
contentText	string	Further text to describe the route of the mode of transport.
mode	string	Required. Specifies the travel mode which the disruption relates to. Accepted values are: `bus`, `coach`, `cycle`, `metro`, `plane`, `rail`, `roads` and `walk`.
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeft	string	The icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtn	boolean	If set to true the right icon will be displayed as a clickable button. Default value is false.
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-large--severe`

Roads

Roads Usual traffic
A38

Roads Minor disruption
A38

Roads Major disruption
A38

Roads Severe disruption
A38

Roads Major disruption
A38

HTML markup

<!-- Roads (good service) -->
<div class="wmnds-disruption-indicator-large">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
      </svg>
      <br>Roads
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Usual traffic</strong><br>
      A38
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
  </svg>
</div>

<!-- Roads (minor disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--warning">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
      </svg>
      <br>Roads
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Minor disruption</strong><br>
      A38
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
</div>

<!-- Roads (major disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--error">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
      </svg>
      <br>Roads
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Major disruption</strong><br>
      A38
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Roads (severe disruption) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--severe">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
      </svg>
      <br>Roads
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Severe disruption</strong><br>
      A38
    </span>
  </div>
  <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
</div>

<!-- Roads (delete) -->
<div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--error">
  <div class="wmnds-disruption-indicator-large__left-wrapper">
    <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
      <svg class="wmnds-disruption-indicator-large__icon">
        <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
      </svg>
      <br>Roads
    </span>
    <span class="wmnds-disruption-indicator-large__text">
      <strong>Major disruption</strong><br>
      A38
    </span>
  </div>
  <button class="wmnds-disruption-indicator-large__btn" aria-label="Delete favourite - Roads - Major disruption">
    <svg class="wmnds-disruption-indicator-large__icon">
      <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
    </svg>
  </button>
</div>

Nunjucks markup

{% from "wmnds/components/disruption-indicator/large/_large.njk" import wmndsDisruptionIndicatorLarge %}

{{
  wmndsDisruptionIndicatorLarge({
    primaryText: "Minor disruption",
    contentText: "A38",
    mode: "train",
    iconRight: "general-warning-triangle",
    iconLeft: "modes-isolated-bus",
    iconRightBtn: false,
    classes: "wmnds-disruption-indicator-large--error"
  })
}}

Nunjucks properties

Name	Type	Description
primaryText	string	Required. Primary text which describes the status/severity of the transport mode disruption.
contentText	string	Further text to describe the route of the mode of transport.
mode	string	Required. Specifies the travel mode which the disruption relates to. Accepted values are: `bus`, `coach`, `cycle`, `metro`, `plane`, `rail`, `roads` and `walk`.
iconRight	string	The icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeft	string	The icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtn	boolean	If set to true the right icon will be displayed as a clickable button. Default value is false.
classes	string	List of additional classes which will be added to the disruption indicator. A typical use case is modifying the badge colour to indicate severity e.g. `wmnds-disruption-indicator-large--severe`

Your privacy settings

General

Form elements

Disruption indicators

About

Small

What does it do?

When to use it?

Minor disruption

Major disruption

Severe disruption

Medium - Normal

What does it do?

When to use it?

Medium - Narrow

What does it do?

When to use it?

When not use it?

Large

What does it do?

When to use it?

Research

Train

Tram

Roads