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

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>

Recommended javascript (browser compatible)
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var travelUpdatesWidgetJs = function travelUpdatesWidgetJs() {
  var mobileMenu = window.matchMedia('(max-width: 767px)');

  function handleMobileMenu(mq) {
    if (mq.matches) {
      var updateSections = document.querySelectorAll('.wmnds-travel-update--personal');
      updateSections.forEach(function(section) {
        // Button for chevron which toggles all details
        var sectionToggleBtn = section.querySelector('.wmnds-travel-update__disruption-detail-toggle'); // Get clickable disruption indicators

        var detailToggleBtn = section.querySelectorAll('.wmnds-travel-update__disruption-indicator-btn'); // Variable to control whether the whole section is expanded or not

        var sectionExpanded = false; // Toggle detail state

        var toggleDetail = function toggleDetail(btn, state) {
          btn.setAttribute('aria-expanded', state);
        }; // Toggle chevron icon state


        var toggleIcon = function toggleIcon(state) {
          sectionToggleBtn.dataset.showDetails = state;
        }; // Toggle section state


        var toggleSection = function toggleSection(state) {
          sectionExpanded = state || !sectionExpanded;
          toggleIcon(sectionExpanded); // Overwrite each individual detail state to match section

          detailToggleBtn.forEach(function(btn) {
            return toggleDetail(btn, sectionExpanded);
          });
        }; // True if there are any details sections left expanded


        var isSectionExpanded = function isSectionExpanded() {
          return section.querySelector('.wmnds-travel-update__disruption-indicator-btn[aria-expanded="true"]') && true;
        }; // Toggle whole section on click


        sectionToggleBtn.addEventListener('click', function() {
          toggleSection(!sectionExpanded);
        });
        detailToggleBtn.forEach(function(btn) {
          btn.addEventListener('click', function() {
            // Toggle individual detail on click
            if (btn.getAttribute('aria-expanded') === 'false') {
              toggleDetail(btn, true); // Add expanded class to btn container

              btn.parentNode.classList.add('is-expanded');
            } else {
              toggleDetail(btn, false); // Remove expanded class from btn container

              btn.parentNode.classList.remove('is-expanded');
            } // Set section icon state according to whether there are expanded details left or not


            if (isSectionExpanded()) {
              sectionExpanded = true;
              toggleIcon(sectionExpanded);
            } else {
              sectionExpanded = false;
              toggleIcon(sectionExpanded);
            }
          });
        });
      });
    }
  } // init mobile nav function


  handleMobileMenu(mobileMenu);
  mobileMenu.addListener(handleMobileMenu);
};

var _default = travelUpdatesWidgetJs;
exports["default"] = _default;

Recommended javascript (ES6)
const travelUpdatesWidgetJs = () => {
  const mobileMenu = window.matchMedia('(max-width: 767px)');

  function handleMobileMenu(mq) {
    if (mq.matches) {
      const updateSections = document.querySelectorAll('.wmnds-travel-update--personal');

      updateSections.forEach(section => {
        // Button for chevron which toggles all details
        const sectionToggleBtn = section.querySelector(
          '.wmnds-travel-update__disruption-detail-toggle'
        );
        // Get clickable disruption indicators
        const detailToggleBtn = section.querySelectorAll(
          '.wmnds-travel-update__disruption-indicator-btn'
        );
        // Variable to control whether the whole section is expanded or not
        let sectionExpanded = false;
        // Toggle detail state
        const toggleDetail = (btn, state) => {
          btn.setAttribute('aria-expanded', state);
        };
        // Toggle chevron icon state
        const toggleIcon = state => {
          sectionToggleBtn.dataset.showDetails = state;
        };
        // Toggle section state
        const toggleSection = state => {
          sectionExpanded = state || !sectionExpanded;
          toggleIcon(sectionExpanded);
          // Overwrite each individual detail state to match section
          detailToggleBtn.forEach(btn => toggleDetail(btn, sectionExpanded));
        };
        // True if there are any details sections left expanded
        const isSectionExpanded = () =>
          section.querySelector(
            '.wmnds-travel-update__disruption-indicator-btn[aria-expanded="true"]'
          ) && true;

        // Toggle whole section on click
        sectionToggleBtn.addEventListener('click', () => {
          toggleSection(!sectionExpanded);
        });

        detailToggleBtn.forEach(btn => {
          btn.addEventListener('click', () => {
            // Toggle individual detail on click
            if (btn.getAttribute('aria-expanded') === 'false') {
              toggleDetail(btn, true);
              // Add expanded class to btn container
              btn.parentNode.classList.add('is-expanded');
            } else {
              toggleDetail(btn, false);
              // Remove expanded class from btn container
              btn.parentNode.classList.remove('is-expanded');
            }

            // Set section icon state according to whether there are expanded details left or not
            if (isSectionExpanded()) {
              sectionExpanded = true;
              toggleIcon(sectionExpanded);
            } else {
              sectionExpanded = false;
              toggleIcon(sectionExpanded);
            }
          });
        });
      });
    }
  }
  // init mobile nav function
  handleMobileMenu(mobileMenu);
  mobileMenu.addListener(handleMobileMenu);
};

export default travelUpdatesWidgetJs;

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>