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
Beta

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

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
NameTypeDescription
modestringRequired. Specifies the travel mode which the disruption relates to. Accepted values are: bus, coach, cycle, metro, plane, rail, roads and walk
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). Default value is general-warning-circle
classesstringList 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
NameTypeDescription
modestringRequired. Specifies the travel mode which the disruption relates to. Accepted values are: bus, coach, cycle, metro, plane, rail, roads and walk
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). Default value is general-warning-circle
classesstringList 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
NameTypeDescription
modestringRequired. Specifies the travel mode which the disruption relates to. Accepted values are: bus, coach, cycle, metro, plane, rail, roads and walk
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). Default value is general-warning-circle
classesstringList 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
X15
X15
X15
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
NameTypeDescription
contentTextstringText to describe the route name or number of the mode of transport.
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeftstringThe icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtnbooleanIf set to true the right icon will be displayed as a clickable button. Default value is false.
displayNarrowbooleanIf set to true, the badge will be displayed in the narrow style. Default value is false.
capitalizebooleanIf set to true, the badge text will display in a title text format rather than uppercase. Default value is false.
classesstringList 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
NameTypeDescription
contentTextstringText to describe the route name or number of the mode of transport.
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeftstringThe icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtnbooleanIf set to true the right icon will be displayed as a clickable button. Default value is false.
displayNarrowbooleanIf set to true, the badge will be displayed in the narrow style. Default value is false.
capitalizebooleanIf set to true, the badge text will display in a title text format rather than uppercase. Default value is false.
classesstringList 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
NameTypeDescription
primaryTextstringRequired. Primary text which describes the status/severity of the transport mode disruption.
contentTextstringFurther text to describe the route of the mode of transport.
modestringRequired. Specifies the travel mode which the disruption relates to. Accepted values are: bus, coach, cycle, metro, plane, rail, roads and walk.
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeftstringThe icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtnbooleanIf set to true the right icon will be displayed as a clickable button. Default value is false.
classesstringList 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
NameTypeDescription
primaryTextstringRequired. Primary text which describes the status/severity of the transport mode disruption.
contentTextstringFurther text to describe the route of the mode of transport.
modestringRequired. Specifies the travel mode which the disruption relates to. Accepted values are: bus, coach, cycle, metro, plane, rail, roads and walk.
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeftstringThe icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtnbooleanIf set to true the right icon will be displayed as a clickable button. Default value is false.
classesstringList 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
NameTypeDescription
primaryTextstringRequired. Primary text which describes the status/severity of the transport mode disruption.
contentTextstringFurther text to describe the route of the mode of transport.
modestringRequired. Specifies the travel mode which the disruption relates to. Accepted values are: bus, coach, cycle, metro, plane, rail, roads and walk.
iconRightstringThe icon tag which specifies the icon to show to the right of the indicator (see icon reference). By default, no icon will be displayed.
iconLeftstringThe icon tag which specifies the icon to show to the left of the indicator (see icon reference). By default, no icon will be displayed.
iconRightBtnbooleanIf set to true the right icon will be displayed as a clickable button. Default value is false.
classesstringList 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