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.

Patterns

Travel updates

About

What does it do?

  • The travel updates widget gives users an overview of any disruptions to transport across the Transport for West Midlands
  • It uses the small Disruption indicator component to show how severe the disruption is for a transport mode. The disruption service levels are severe, major, minor and good
  • Users can personalise the travel updates widget by adding a specific transport route. This is so users can access disruptions relevant to them straight from the homepage

Shareable Travel Updates Widget

How to use it?

  • Place the following snippet in your source code (where you want the widget to appear on the page) and you will be able to use TfWM travel widget on your website.
<div data-widget-host="tfwm-travel-updates-widget"></div>
<script src="//unpkg.com/tfwm-travel-updates-widget@1.2.0/build/static/js/build.min.js"></script>
TfWM design system CSS must be included in your page.

When to use it?

  • The default travel updates widget should be used on the homepage or a page where you offer travel advice

How it works?

  • The widget shows all current disruptions to bus, train and tram services that have been added to the Disruptions API. It also shows the number of current disruptions on all roads in the West Midlands region.

  • Users can view disruption information through the disruptions service by clicking on the disruption link or the ‘View all updates’ button.

  • When more than two types of disruptions occur for a transport mode, the disruption indicator will only show the highest level of disruption. There will still be individual disruption links for each disruption severity.

Default view

When to use it?

  • The default travel updates widget should be used on the homepage

How it works?

  • The user can view disruption information through the disruptions service by clicking on the small disruption indicator or the disruption link
  • The user can add a specific bus, train or tram route to the widget by clicking on the ‘Add services’ button. This will take the user to the disruptions service, where they can search for a transport route and favourite it.
  • When more than two types of disruptions occur for a transport mode, the disruption indicator will only show the highest level of disruption. There will still be individual disruption links for each disruption severity.

Travel updates


Train

Good service




HTML markup
<div class="wmnds-content-card wmnds-content-card--travel-updates">
  <div class="wmnds-p-sm wmnds-col-1">
    <h2 class="wmnds-content-card__title">Travel updates</h2>
    <div class="wmnds-travel-update">
      <div class="wmnds-travel-update__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>
        <h3 class="wmnds-m-none">Bus</h3>
        <div class="wmnds-travel-update__disruption-text">
          <div>
            <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
              1 severe disruption
            </a>
          </div>
          <div>
            <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
              2 major disruptions
            </a>
          </div>
          <div>
            <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
              8 minor disruptions
            </a>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-travel-update">
      <div class="wmnds-travel-update__disruption">
        <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-rail" href="#wmnds-modes-isolated-rail"></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>
        <h3 class="wmnds-m-none">Train</h3>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Good service</strong>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-travel-update">
      <div class="wmnds-travel-update__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-metro" href="#wmnds-modes-isolated-metro"></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>
        <h3 class="wmnds-m-none">Tram</h3>
        <div class="wmnds-travel-update__disruption-text">
          <div>
            <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
              Major disruption
            </a>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-travel-update">
      <div class="wmnds-travel-update__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-roads" href="#wmnds-modes-isolated-roads"></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>
        <h3 class="wmnds-m-none">Roads</h3>
        <div class="wmnds-travel-update__disruption-text">
          <div>
            <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
              3 minor disruptions
            </a>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <!-- Content card actions -->
    <div class="wmnds-grid wmnds-grid--spacing-sm-2-lg wmnds-p-t-md">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <button class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-m-b-md" type="button">
          Add services
          <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
            <use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <button class="wmnds-btn wmnds-btn--block" type="button">
          View all updates
          <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
            <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Personalised view

When to use it?

  • If a user has favourited a transport route through the disruptions service

How it works?

  • By favouriting a service through the disruptions service, users can see if any of their services are disrupted within the widget straight from the homepage
  • Users can still view all disruptions across the network by clicking on the ‘View all updates’ button
  • On mobile devices, the route name and disruption link are hidden behind a dropdown by default. A user can expand each individual transport mode or click on the small disruption indicator to view the disruption in detail.


HTML markup
<div class="wmnds-content-card wmnds-content-card--travel-updates">
  <div class="wmnds-p-sm wmnds-col-1">
    <h2 class="wmnds-content-card__title">My travel updates</h2>
    <div class="wmnds-travel-update wmnds-travel-update--personal">
      <div class="wmnds-travel-update__disruption-title">
        <h3 class="wmnds-m-none">Bus</h3>
        <button class="wmnds-travel-update__disruption-detail-toggle" data-show-details="false">
          <svg>
            <title>Toggle details</title>
            <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <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>
            <span class="wmnds-disruption-indicator-medium__service">16</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>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Hamstead - Birmingham via Hockley</strong>
          <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
            Minor disruption
          </a>
        </div>
      </div>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <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>
            <span class="wmnds-disruption-indicator-medium__service">S16</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>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Solihull - Yardley via Lyndon</strong>
          <strong>Good service</strong>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-travel-update wmnds-travel-update--personal">
      <div class="wmnds-travel-update__disruption-title">
        <h3 class="wmnds-m-none">Train</h3>
        <button class="wmnds-travel-update__disruption-detail-toggle" data-show-details="false">
          <svg>
            <title>Toggle details</title>
            <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
            <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
              <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
            </svg>
            <span class="wmnds-disruption-indicator-medium__service">Cross City Line</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>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
            Minor disruption
          </a>
        </div>
      </div>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
            <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
              <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
            </svg>
            <span class="wmnds-disruption-indicator-medium__service">Hereford via Worcester</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>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Good service</strong>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-travel-update wmnds-travel-update--personal">
      <div class="wmnds-travel-update__disruption-title">
        <h3 class="wmnds-m-none">Tram</h3>
        <button class="wmnds-travel-update__disruption-detail-toggle" data-show-details="false">
          <svg>
            <title>Toggle details</title>
            <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <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-metro" href="#wmnds-modes-isolated-metro"></use>
            </svg>
            <span class="wmnds-disruption-indicator-medium__service">mm1</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>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Grand Central - St Chad’s</strong>
          <a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
            Major disruption
          </a>
        </div>
      </div>
    </div>
    <hr>
    <!-- Content card actions -->
    <div class="wmnds-grid wmnds-grid--spacing-sm-2-lg wmnds-p-t-md">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <button class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-m-b-md" type="button">
          Edit your services
        </button>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <button class="wmnds-btn wmnds-btn--block" type="button">
          View all updates
          <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
            <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Edit view

When to use it?

  • The edit view will be shown when a user clicks on the ‘Edit your services’ button if they have personalised the travel updates widget

How it works?

  • Users can remove routes they have added through the disruptions service by clicking on the bin icon.
  • Users can add more routes to their widget by clicking on the ‘Add services’ button. This will take the user to the disruptions service, where they can search for another transport route and favourite it.

My travel updates

Bus

Hamstead - Birmingham via Hockley
Solihull - Yardley via Lyndon

Train


Tram

Grand Central - St Chad’s


HTML markup
<div class="wmnds-content-card wmnds-content-card--travel-updates">
  <div class="wmnds-p-sm wmnds-col-1">
    <h2 class="wmnds-content-card__title">My travel updates</h2>
    <div class="wmnds-travel-update wmnds-travel-update--personal wmnds-travel-update--edit">
      <h3 class="wmnds-m-b-md">Bus</h3>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon 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>
            <span class="wmnds-disruption-indicator-medium__service">16</span>
          </div>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Hamstead - Birmingham via Hockley</strong>
        </div>
        <button class="wmnds-travel-update__disruption-delete">
          <svg>
            <title>Delete service</title>
            <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon 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>
            <span class="wmnds-disruption-indicator-medium__service">S16</span>
          </div>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Solihull - Yardley via Lyndon</strong>
        </div>
        <button class="wmnds-travel-update__disruption-delete">
          <svg>
            <title>Delete service</title>
            <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
          </svg>
        </button>
      </div>
    </div>
    <hr>
    <div class="wmnds-travel-update wmnds-travel-update--personal wmnds-travel-update--edit">
      <h3 class="wmnds-m-b-md">Train</h3>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
            <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
              <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
            </svg>
            <span class="wmnds-disruption-indicator-medium__service">Cross City Line</span>
          </div>
        </button>
        <button class="wmnds-travel-update__disruption-delete">
          <svg>
            <title>Delete service</title>
            <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
            <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
              <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
            </svg>
            <span class="wmnds-disruption-indicator-medium__service">Hereford via Worcester</span>
          </div>
        </button>
        <button class="wmnds-travel-update__disruption-delete">
          <svg>
            <title>Delete service</title>
            <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
          </svg>
        </button>
      </div>
    </div>
    <hr>
    <div class="wmnds-travel-update wmnds-travel-update--personal wmnds-travel-update--edit">
      <h3 class="wmnds-m-b-md">Tram</h3>
      <div class="wmnds-travel-update__disruption">
        <button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
          <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow">
            <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
              <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
            </svg>
            <span class="wmnds-disruption-indicator-medium__service">mm1</span>
          </div>
        </button>
        <div class="wmnds-travel-update__disruption-text">
          <strong>Grand Central - St Chad’s</strong>
        </div>
        <button class="wmnds-travel-update__disruption-delete">
          <svg>
            <title>Delete service</title>
            <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
          </svg>
        </button>
      </div>
    </div>
    <hr>
    <!-- Content card actions -->
    <div class="wmnds-grid wmnds-grid--spacing-sm-2-lg wmnds-p-t-md">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <button class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-m-b-md" type="button">
          Add a new service
          <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
            <use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <button class="wmnds-btn wmnds-btn--block" type="button">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>