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

Live departures

Bus

What does it do?

  • Shows live departures for all bus services from a bus stop

When to use it?

  • On a bus stop page

How it works?

  • This shows all the bus services available from a bus stop, in numerical order
  • The bus service name is the destination, instead of the full route name
  • The 3 latest departures times for all services are shown next to the bus service indicator, name and operator
  • Users can click on the bus service indicator to view the bus service in more detail


HTML markup
<div style="max-width: 640px;">
  <div class="wmnds-live-departures wmnds-live-departures--bus">
    <div class="wmnds-live-departures__service wmnds-grid wmnds-grid--spacing-sm-2-md wmnds-grid--justify-between">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__service-details">
          <div class="wmnds-live-departures__service-name">16</div>
          <div class="wmnds-live-departures__service-description">
            <strong>Wolverhampton</strong>
            <span class="wmnds-live-departures__service-operator">National Express West Midlands</span>
          </div>
        </div>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__times">
          <div class="wmnds-live-departures__time">3 mins</div>
          <div class="wmnds-live-departures__time">7 mins</div>
          <div class="wmnds-live-departures__time">28 mins</div>
        </div>
      </div>
    </div>
    <div class="wmnds-live-departures__service wmnds-grid wmnds-grid--spacing-sm-2-md wmnds-grid--justify-between">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__service-details">
          <div class="wmnds-live-departures__service-name">17</div>
          <div class="wmnds-live-departures__service-description">
            <strong>Dudley</strong>
            <span class="wmnds-live-departures__service-operator">National Express West Midlands</span>
          </div>
        </div>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__times">
          <div class="wmnds-live-departures__time">4 mins</div>
          <div class="wmnds-live-departures__time">14 mins</div>
          <div class="wmnds-live-departures__time">24 mins</div>
        </div>
      </div>
    </div>
    <div class="wmnds-live-departures__service wmnds-grid wmnds-grid--spacing-sm-2-md wmnds-grid--justify-between">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__service-details">
          <div class="wmnds-live-departures__service-name">17A</div>
          <div class="wmnds-live-departures__service-description">
            <strong>Wall Heath</strong>
            <span class="wmnds-live-departures__service-operator">Diamond</span>
          </div>
        </div>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__times">
          <div class="wmnds-live-departures__time">8 mins</div>
          <div class="wmnds-live-departures__time">19 mins</div>
          <div class="wmnds-live-departures__time">27 mins</div>
        </div>
      </div>
    </div>
    <div class="wmnds-live-departures__service wmnds-grid wmnds-grid--spacing-sm-2-md wmnds-grid--justify-between">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__service-details">
          <div class="wmnds-live-departures__service-name">57</div>
          <div class="wmnds-live-departures__service-description">
            <strong>Wall Heath</strong>
            <span class="wmnds-live-departures__service-operator">National Express West Midlands</span>
          </div>
        </div>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__times">
          <div class="wmnds-live-departures__time">6 mins</div>
          <div class="wmnds-live-departures__time">16 mins</div>
          <div class="wmnds-live-departures__time">26 mins</div>
        </div>
      </div>
    </div>
    <div class="wmnds-live-departures__service wmnds-grid wmnds-grid--spacing-sm-2-md wmnds-grid--justify-between">
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__service-details">
          <div class="wmnds-live-departures__service-name">125</div>
          <div class="wmnds-live-departures__service-description">
            <strong>Bridgnorth</strong>
            <span class="wmnds-live-departures__service-operator">Diamond</span>
          </div>
        </div>
      </div>
      <div class="wmnds-col-1 wmnds-col-sm-1-2">
        <div class="wmnds-live-departures__times">
          <div class="wmnds-live-departures__time">9 mins</div>
          <div class="wmnds-live-departures__time">14 mins</div>
          <div class="wmnds-live-departures__time">24 mins</div>
        </div>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/live-departures/live-departures-bus/_live-departures-bus.njk" import wmndsLiveDeparturesBus %}

{{
   wmndsLiveDeparturesBus({
      services: [
         {
         name: "16",
         destination: "Wolverhampton",
         operator: "National Express West Midlands",
         times: [3, 7, 28]
         },
         {
         name: "17",
         destination: "Dudley",
         operator: "National Express West Midlands",
         times: [4, 14, 24]
         },
         {
         name: "17A",
         destination: "Wall Heath",
         operator: "Diamond",
         times: [8, 19, 27]
         },
         {
         name: "57",
         destination: "Wall Heath",
         operator: "National Express West Midlands",
         times: [6, 16, 26]
         },
         {
         name: "125",
         destination: "Bridgnorth",
         operator: "Diamond",
         times: [9, 14, 24]
         }
      ]
   })
}}

Nunjucks properties
NameTypeDescription
servicearrayArray of objects containing the bus service information

Options for service

NameTypeDescription
namestringThe name of the bus service e.g. 16
destinationstringThe bus service destination name
operatorstringThe bus service operator name
timesarrayArray of departure times to show

Bus and tram service

What does it do?

  • Shows live departures for a bus or tram service from a bus or tram stop

When to use it?

  • On a bus stop page
  • On a tram stop page

How it works?

  • This shows the latest 5 departure times for a bus or tram service on desktop. The latest 3 departure times are shown on mobile
  • Users can favourite a bus or tram service, which will be added to the live departures widget on the homepage
  • For bus services we show the operator name as more than one operator can run the same service number

Bus



HTML markup
<div style="max-width: 640px;">
  <div class="wmnds-live-departures wmnds-live-departures--service">
    <div class="wmnds-live-departures__service-details wmnds-m-b-md">
      <div class="wmnds-live-departures__service-name">16</div>
      <div class="wmnds-live-departures__service-description">
        <div class="wmnds-h3 wmnds-m-none">Stourbridge - Wolverhampton via Kingswinford</div>
      </div>
    </div>
    <p><a href="#">National Express West Midlands</a> runs this service</p>
    <button class="wmnds-btn wmnds-btn--favourite" type="button">
      <svg class="wmnds-btn__icon ">
        <use xlink:href="#wmnds-general-star-empty" href="#wmnds-general-star-empty"></use>
      </svg>
      Add to homepage
    </button>
    <hr>
    <div class="wmnds-grid wmnds-grid--justify-between wmnds-grid--spacing-md-2-md">
      <div class="wmnds-col-1 wmnds-col-md-auto">
        <div class="wmnds-h3 wmnds-m-t-none wmnds-m-b-md">Real time departures</div>
        <p class="wmnds-m-b-md">See when the next 16 bus leaves this stop</p>
      </div>
      <div class="wmnds-col-1 wmnds-col-md-auto">
        <p class="wmnds-live-departures__last-updated">Last updated 9:30am</p>
      </div>
    </div>
    <div class="wmnds-live-departures__times">
      <div class="wmnds-live-departures__time">4 mins</div>
      <div class="wmnds-live-departures__time">14 mins</div>
      <div class="wmnds-live-departures__time">24 mins</div>
      <div class="wmnds-live-departures__time">34 mins</div>
      <div class="wmnds-live-departures__time">44 mins</div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/live-departures/live-departures-service/_live-departures-service.njk" import wmndsLiveDeparturesService %}
{{
   wmndsLiveDeparturesService({
      name: "MM1",
      operator: null,
      destination: "Birmingham - Wolverhampton",
      lastUpdated: "9:30am",
      times: [4, 14, 24, 34, 44]
   })
}}

Nunjucks properties
NameTypeDescription
namestringThe name of the service e.g. 16
destinationstringThe bus service destination name
lastUpdatedstringThe time of last departure update e.g. 9:30am
operatorstringThe service operator name
timesarrayArray of departure times to show

Tram



HTML markup
<div style="max-width: 640px;">
  <div class="wmnds-live-departures wmnds-live-departures--service">
    <div class="wmnds-live-departures__service-details wmnds-m-b-md">
      <div class="wmnds-live-departures__service-name">MM1</div>
      <div class="wmnds-live-departures__service-description">
        <div class="wmnds-h3 wmnds-m-none">Birmingham - Wolverhampton</div>
      </div>
    </div>
    <button class="wmnds-btn wmnds-btn--favourite" type="button">
      <svg class="wmnds-btn__icon ">
        <use xlink:href="#wmnds-general-star-empty" href="#wmnds-general-star-empty"></use>
      </svg>
      Add to homepage
    </button>
    <hr>
    <div class="wmnds-grid wmnds-grid--justify-between wmnds-grid--spacing-md-2-md">
      <div class="wmnds-col-1 wmnds-col-md-auto">
        <div class="wmnds-h3 wmnds-m-t-none wmnds-m-b-md">Real time departures</div>
        <p class="wmnds-m-b-md">See when the next tram leaves this stop</p>
      </div>
      <div class="wmnds-col-1 wmnds-col-md-auto">
        <p class="wmnds-live-departures__last-updated">Last updated 9:30am</p>
      </div>
    </div>
    <div class="wmnds-live-departures__times">
      <div class="wmnds-live-departures__time">4 mins</div>
      <div class="wmnds-live-departures__time">14 mins</div>
      <div class="wmnds-live-departures__time">24 mins</div>
      <div class="wmnds-live-departures__time">34 mins</div>
      <div class="wmnds-live-departures__time">44 mins</div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/live-departures/live-departures-service/_live-departures-service.njk" import wmndsLiveDeparturesService %}
{{
   wmndsLiveDeparturesService({
      name: "MM1",
      operator: null,
      destination: "Birmingham - Wolverhampton",
      lastUpdated: "9:30am",
      times: [4, 14, 24, 34, 44]
   })
}}

Nunjucks properties
NameTypeDescription
namestringThe name of the service e.g. 16
destinationstringThe bus service destination name
lastUpdatedstringThe time of last departure update e.g. 9:30am
operatorstringThe service operator name
timesarrayArray of departure times to show

Train station

What does it do?

  • Shows live train departures from a rail station

When to use it?

  • On a train station page

How it works?

  • Users can switch between live departures and live arrivals
  • Users can filter live departures to see which train services stop at a specific rail station
  • When a filter has been applied, users can favourite this journey to the live departures widget on the homepage

Live departures/arrivals



HTML markup
<div style="max-width: 640px;">
  <div class="wmnds-live-departures-train">
    <div class="wmnds-live-departures-tabs">
      <input class="wmnds-live-departures-tabs__input wmnds-screenreaders-only" type="radio" value="Live departures" name="trainTabs" id="live-departures" aria-label="Live departures" checked>
      <label class="wmnds-live-departures-tabs__label" for="live-departures">
        <span class="wmnds-h3 wmnds-m-none">Live departures</span>
      </label>
      <input class="wmnds-live-departures-tabs__input wmnds-screenreaders-only" type="radio" value="Live arrivals" name="trainTabs" id="live-arrivals" aria-label="Live arrivals">
      <label class="wmnds-live-departures-tabs__label" for="live-arrivals">
        <span class="wmnds-h3 wmnds-m-none">Live arrivals</span>
      </label>
      <div class="wmnds-live-departures wmnds-live-departures-tabs__departures">
        <div class="wmnds-col-1 wmnds-col-md-3-4">
          <label class="wmnds-fe-label wmnds-h4 wmnds-m-t-none" for="autoComplete">Enter your destination to filter departures</label>
          <div class="wmnds-grid wmnds-autocomplete">
            <svg class="wmnds-autocomplete__icon">
              <use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
            </svg>
            <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Search" name="autoComplete" aria-label="Search" type="text" id="acmplt" required="false" autocomplete="off">
          </div>
        </div>
        <hr class="wmnds-hide-mobile">
        <div class="wmnds-grid wmnds-m-b-md">
          <div class="wmnds-col-1 wmnds-col-md-1-2">
          </div>
          <hr class="wmnds-col-1 wmnds-hide-desktop">
          <div class="wmnds-col-1 wmnds-col-md-1-2">
            <p class="wmnds-text-align-right wmnds-m-b-none">Last updated 9:30am</p>
          </div>
        </div>
        <table class="wmnds-table wmnds-live-departures__train-timetable">
          <caption class="wmnds-table__caption wmnds-screenreaders-only">
            Live departures
          </caption>
          <thead>
            <th scope="col">Train</th>
            <th scope="col">Platform</th>
            <th scope="col">Time</th>
          </thead>
          <tbody>
            <tr>
              <th scope="row" data-header="Train"><strong>Kidderminster</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">2</td>
              <td data-header="Time">
                08:21
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>London Marylebone</strong><span>Chiltern Railways</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:25
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Stratford-upon-Avon</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:31
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Worcester Forgate Street</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform"></td>
              <td data-header="Time">
                <strong class="wmnds-live-departures__train-timetable-status">Cancelled</strong>
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Dorridge</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:40
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="wmnds-live-departures wmnds-live-departures-tabs__arrivals">
        <p class="wmnds-text-align-right wmnds-m-b-md">Last updated 9:30am</p>
        <table class="wmnds-table wmnds-live-departures__train-timetable wmnds-live-departures__train-timetable--responsive">
          <caption class="wmnds-table__caption wmnds-screenreaders-only">
            Live arrivals
          </caption>
          <thead>
            <th scope="col">Train</th>
            <th scope="col">Platform</th>
            <th scope="col">Time</th>
          </thead>
          <tbody>
            <tr>
              <th scope="row" data-header="Train"><strong>Kidderminster</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">2</td>
              <td data-header="Time">
                08:21
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>London Marylebone</strong><span>Chiltern Railways</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:25
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Stratford-upon-Avon</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:31
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Worcester Forgate Street</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">2</td>
              <td data-header="Time">
                08:36
                <strong class="wmnds-live-departures__train-timetable-status">6 mins late</strong>
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Dorridge</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:40
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/live-departures/live-departures-train/_live-departures-train.njk" import wmndsLiveDeparturesTrain %}
{{
   wmndsLiveDeparturesTrain({
      showFiltered: false,
      lastUpdated: "09:30am",
      departures: [
         {
            train: "Kidderminster",
            operator: "West Midlands Railway",
            status: null,
            time: "08:21",
            platform: 2
         },
         {
            train: "London Marylebone",
            operator: "Chiltern Railways",
            platform: 1,
            time: "08:25"
         },
         {
            train: "Stratford-upon-Avon",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:31"
         },
         {
            train: "Worcester Forgate Street",
            operator: "West Midlands Railway",
            status: "Cancelled"
         },
         {
            train: "Dorridge",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:40"
         }
      ],
      arrivals: [
         {
            train: "Kidderminster",
            operator: "West Midlands Railway",
            status: null,
            time: "08:21",
            platform: 2
         },
         {
            train: "London Marylebone",
            operator: "Chiltern Railways",
            platform: 1,
            time: "08:25"
         },
         {
            train: "Stratford-upon-Avon",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:31"
         },
         {
            train: "Worcester Forgate Street",
            operator: "West Midlands Railway",
            platform: 2,
            time: "08:36",
            status: "6 mins late"
         },
         {
            train: "Dorridge",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:40"
         }
      ]
   })
}}

Nunjucks properties
NameTypeDescription
showFilteredbooleanDetermines whether to show in filtered mode
lastUpdatedstringThe time that the departures were last updated e.g. 9:30am
departuresarrayArray of objects containing the departures information
arrivalsarrayArray of objects containing the arrivals information

Options for departures

NameTypeDescription
trainstringThe train destination
operatorstringThe train operator name
platformstringThe platform number
timestringThe departure time
statusstringThe departure status e.g. '6 mins late', 'Cancelled'

Options for arrivals

NameTypeDescription
trainstringThe train destination
operatorstringThe train operator name
platformstringThe platform number
timestringThe arrival time
statusstringThe arrival status e.g. '6 mins late', 'Cancelled'

Live departures/arrivals (filtered)



HTML markup
<div style="max-width: 640px;">
  <div class="wmnds-live-departures-train">
    <div class="wmnds-live-departures-tabs">
      <input class="wmnds-live-departures-tabs__input wmnds-screenreaders-only" type="radio" value="Live departures" name="trainTabs" id="live-departures" aria-label="Live departures" checked>
      <label class="wmnds-live-departures-tabs__label" for="live-departures">
        <span class="wmnds-h3 wmnds-m-none">Live departures</span>
      </label>
      <input class="wmnds-live-departures-tabs__input wmnds-screenreaders-only" type="radio" value="Live arrivals" name="trainTabs" id="live-arrivals" aria-label="Live arrivals">
      <label class="wmnds-live-departures-tabs__label" for="live-arrivals">
        <span class="wmnds-h3 wmnds-m-none">Live arrivals</span>
      </label>
      <div class="wmnds-live-departures wmnds-live-departures-tabs__departures">
        <div class="wmnds-col-1 wmnds-col-md-3-4">
          <label class="wmnds-fe-label wmnds-h4 wmnds-m-t-none" for="autoComplete">Enter your destination to filter departures</label>
          <div class="wmnds-grid wmnds-autocomplete__selected-item wmnds-grid--justify-between">
            <strong class="wmnds-col-auto wmnds-autocomplete__selected-item-summary">Stourbridge Junction</strong>
            <button type="button" class="wmnds-autocomplete__selected-item-close">
              <svg class="wmnds-autocomplete__selected-item-close-icon">
                <title>Close</title>
                <use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
              </svg>
            </button>
          </div>
        </div>
        <hr class="wmnds-hide-mobile">
        <div class="wmnds-grid wmnds-m-b-md wmnds-m-t-md">
          <div class="wmnds-col-1 wmnds-col-md-1-2">
            <button class="wmnds-btn wmnds-btn--favourite" type="button">
              <svg class="wmnds-btn__icon ">
                <use xlink:href="#wmnds-general-star-empty" href="#wmnds-general-star-empty"></use>
              </svg>
              Add to homepage
            </button>
          </div>
          <hr class="wmnds-col-1 wmnds-hide-desktop">
          <div class="wmnds-col-1 wmnds-col-md-1-2">
            <p class="wmnds-text-align-right wmnds-m-b-none">Last updated 9:30am</p>
          </div>
        </div>
        <table class="wmnds-table wmnds-live-departures__train-timetable">
          <caption class="wmnds-table__caption wmnds-screenreaders-only">
            Live departures
          </caption>
          <thead>
            <th scope="col">Train</th>
            <th scope="col">Platform</th>
            <th scope="col">Time</th>
          </thead>
          <tbody>
            <tr>
              <th scope="row" data-header="Train"><strong>Kidderminster</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">2</td>
              <td data-header="Time">
                08:21
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Worcester Forgate Street</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">2</td>
              <td data-header="Time">
                08:35
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Stratford-upon-Avon</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:41
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Worcester Forgate Street</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform"></td>
              <td data-header="Time">
                <strong class="wmnds-live-departures__train-timetable-status">Cancelled</strong>
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Stratford-upon-Avon</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:50
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="wmnds-live-departures wmnds-live-departures-tabs__arrivals">
        <p class="wmnds-text-align-right wmnds-m-b-md">Last updated 9:30am</p>
        <table class="wmnds-table wmnds-live-departures__train-timetable wmnds-live-departures__train-timetable--responsive">
          <caption class="wmnds-table__caption wmnds-screenreaders-only">
            Live arrivals
          </caption>
          <thead>
            <th scope="col">Train</th>
            <th scope="col">Platform</th>
            <th scope="col">Time</th>
          </thead>
          <tbody>
            <tr>
              <th scope="row" data-header="Train"><strong>Kidderminster</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">2</td>
              <td data-header="Time">
                08:21
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>London Marylebone</strong><span>Chiltern Railways</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:25
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Stratford-upon-Avon</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:31
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Worcester Forgate Street</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">2</td>
              <td data-header="Time">
                08:36
                <strong class="wmnds-live-departures__train-timetable-status">6 mins late</strong>
              </td>
            </tr>
            <tr>
              <th scope="row" data-header="Train"><strong>Dorridge</strong><span>West Midlands Railway</span></th>
              <td data-header="Platform">1</td>
              <td data-header="Time">
                08:40
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/live-departures/live-departures-train/_live-departures-train.njk" import wmndsLiveDeparturesTrain %}
{{
   wmndsLiveDeparturesTrain({
      showFiltered: false,
      lastUpdated: "09:30am",
      departures: [
         {
            train: "Kidderminster",
            operator: "West Midlands Railway",
            status: null,
            time: "08:21",
            platform: 2
         },
         {
            train: "London Marylebone",
            operator: "Chiltern Railways",
            platform: 1,
            time: "08:25"
         },
         {
            train: "Stratford-upon-Avon",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:31"
         },
         {
            train: "Worcester Forgate Street",
            operator: "West Midlands Railway",
            status: "Cancelled"
         },
         {
            train: "Dorridge",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:40"
         }
      ],
      arrivals: [
         {
            train: "Kidderminster",
            operator: "West Midlands Railway",
            status: null,
            time: "08:21",
            platform: 2
         },
         {
            train: "London Marylebone",
            operator: "Chiltern Railways",
            platform: 1,
            time: "08:25"
         },
         {
            train: "Stratford-upon-Avon",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:31"
         },
         {
            train: "Worcester Forgate Street",
            operator: "West Midlands Railway",
            platform: 2,
            time: "08:36",
            status: "6 mins late"
         },
         {
            train: "Dorridge",
            operator: "West Midlands Railway",
            platform: 1,
            time: "08:40"
         }
      ]
   })
}}

Nunjucks properties
NameTypeDescription
showFilteredbooleanDetermines whether to show in filtered mode
lastUpdatedstringThe time that the departures were last updated e.g. 9:30am
departuresarrayArray of objects containing the departures information
arrivalsarrayArray of objects containing the arrivals information

Options for departures

NameTypeDescription
trainstringThe train destination
operatorstringThe train operator name
platformstringThe platform number
timestringThe departure time
statusstringThe departure status e.g. '6 mins late', 'Cancelled'

Options for arrivals

NameTypeDescription
trainstringThe train destination
operatorstringThe train operator name
platformstringThe platform number
timestringThe arrival time
statusstringThe arrival status e.g. '6 mins late', 'Cancelled'

Personalised Homepage widget

What does it do?

  • Informs users of real time departures for bus, train and tram straight from the homepage

When to use it?

  • On the homepage

How it works?

  • When a user favourites a service from a bus stop, train station or tram stop page, then the service will appear in this widget
  • Users can return to the bus stop, train station to tram stop page by selecting the link
  • Users can remove favourited services by selecting the ‘Remove services’ button

Default



HTML markup
<div style="max-width: 640px;">
  <div class="wmnds-live-departures wmnds-live-departures--widget wmnds-p-md wmnds-bg-white">
    <div class="wmnds-h2 wmnds-m-t-none">My live departures</div>
    <p class="wmnds-m-b-md">Last updated 9:30am</p>
    <div class="wmnds-live-departures-widget__bus">
      <div class="wmnds-h3 wmnds-m-t-md wmnds-m-b-md">Bus</div>
      <div class="wmnds-m-b-md"><a href="#">Stourbridge, Stourbridge Interchange (Stand C)</a></div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-name">16</div>
        <div class="wmnds-live-departures__service-description">
          <strong>Stourbridge - Wolverhampton via Kingswinford</strong>
        </div>
      </div>
      <div class="wmnds-live-departures__times wmnds-m-b-md">
        <div class="wmnds-live-departures__time">4 mins</div>
        <div class="wmnds-live-departures__time">14 mins</div>
        <div class="wmnds-live-departures__time">24 mins</div>
        <div class="wmnds-live-departures__time">34 mins</div>
      </div>
      <div class="wmnds-m-b-md"><a href="#">Wolverhampton Bus Station (Stand L)</a></div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-name">16</div>
        <div class="wmnds-live-departures__service-description">
          <strong>Wolverhampton - Stourbridge via Kingswinford</strong>
        </div>
      </div>
      <div class="wmnds-live-departures__times wmnds-m-b-md">
        <div class="wmnds-live-departures__time">4 mins</div>
        <div class="wmnds-live-departures__time">14 mins</div>
        <div class="wmnds-live-departures__time">24 mins</div>
        <div class="wmnds-live-departures__time">34 mins</div>
      </div>
    </div>
    <hr>
    <div class="wmnds-live-departures-widget__train">
      <div class="wmnds-h3 wmnds-m-t-md wmnds-m-b-md">Train</div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-description">
          <a href="#">Birmingham Moor Street</a> to <a href="#">Stourbridge Junction</a>
        </div>
      </div>
      <table class="wmnds-live-departures__train-timetable">
        <caption class="wmnds-screenreaders-only">Train timetable</caption>
        <thead>
          <th scope="col">Destination</th>
          <th scope="col">Time</th>
          <th scope="col">Platform</th>
        </thead>
        <tbody>
          <tr>
            <th scope="row"><strong>Kidderminster</strong></th>
            <td>08:21</td>
            <td>2</td>
          </tr>
          <tr>
            <th scope="row"><strong>Worcester Forgate Street</strong></th>
            <td>08:25</td>
            <td>2</td>
          </tr>
        </tbody>
      </table>
    </div>
    <hr>
    <div class="wmnds-live-departures-widget__tram">
      <div class="wmnds-h3 wmnds-m-t-md wmnds-m-b-md">Tram</div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-description">
          <a href="#">Birmingham, Town Hall (Platform 2)</a>
        </div>
      </div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-name">MM1</div>
        <div class="wmnds-live-departures__service-description">
          <strong>Birmingham - Wolverhampton</strong>
        </div>
      </div>
      <div class="wmnds-live-departures__times wmnds-m-b-md">
        <div class="wmnds-live-departures__time">4 mins</div>
        <div class="wmnds-live-departures__time">14 mins</div>
        <div class="wmnds-live-departures__time">24 mins</div>
        <div class="wmnds-live-departures__time">34 mins</div>
      </div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-description">
          <a href="#">Wolverhampton St George’s</a>
        </div>
      </div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-name">MM1</div>
        <div class="wmnds-live-departures__service-description">
          <strong>Wolverhampton - Birmingham</strong>
        </div>
      </div>
      <div class="wmnds-live-departures__times wmnds-m-b-md">
        <div class="wmnds-live-departures__time">4 mins</div>
        <div class="wmnds-live-departures__time">14 mins</div>
        <div class="wmnds-live-departures__time">24 mins</div>
        <div class="wmnds-live-departures__time">34 mins</div>
      </div>
    </div>
    <hr>
    <div class="wmnds-grid wmnds-grid--spacing-2-lg">
      <div class="wmnds-col-1-2">
        <button class="wmnds-btn wmnds-btn--secondary wmnds-col-1" type="button">
          Remove services
        </button>
      </div>
      <div class="wmnds-col-1-2">
        <button class="wmnds-btn wmnds-col-1" type="button">
          Find stop or station
          <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>

Nunjucks markup
{% from "wmnds/patterns/live-departures/live-departures-widget/_live-departures-widget.njk" import wmndsLiveDeparturesWidget %}
{{
   wmndsLiveDeparturesWidget({
      editMode: false,
      lastUpdated: "9:30am",
      busStops: [
         {
            routeName: "16",
            stopName: "Stourbridge, Stourbridge Interchange (Stand C)",
            route: "Stourbridge - Wolverhampton via Kingswinford",
            times: [4, 14, 24, 34]
         },
         {
            routeName: "16",
            stopName: "Wolverhampton Bus Station (Stand L)",
            route: "Wolverhampton - Stourbridge via Kingswinford",
            times: [4, 14, 24, 34]
         }
      ],
      trainStops: [
         {
            routeStart: "Birmingham Moor Street",
            routeEnd: "Stourbridge Junction",
            stops: [
                  {
                     destination: "Kidderminster",
                     time: "08:21",
                     platform: 2
                  },
                  {
                     destination: "Worcester Forgate Street",
                     time: "08:25",
                     platform: 2
                  }
            ]
         }
      ],
      tramStops: [
         {
            routeName: "MM1",
            stopName: "Birmingham, Town Hall (Platform 2)",
            route: "Birmingham - Wolverhampton",
            times: [4, 14, 24, 34]
         },
         {
            routeName: "MM1",
            stopName: "Wolverhampton St George’s",
            route: "Wolverhampton - Birmingham",
            times: [4, 14, 24, 34]
         }
      ]
   })
}}

Nunjucks properties
NameTypeDescription
editModebooleanDetermines whether to show the widget in edit mode
lastUpdatedstringThe time that the widget was last updated e.g. 9:30am
trainStopsarrayArray of objects containing the train stop information
busStopsarrayArray of objects containing the bus stop information
tramStopsarrayArray of objects containing the tram stop information

Options for trainStops

NameTypeDescription
routeStartstringThe first station of the train route
routeEndstringThe end station of the train route
stopsarrayArray of objects containing the information for the train departures. Objects include the fields 'destination', 'time' and 'platform'.

Options for busStops

NameTypeDescription
routeNamestringThe name of the bus service e.g. MM1
routestringThe bus route description
stopNamestringThe bus stop name
timesarrayArray of departure times to show

Options for tramStops

NameTypeDescription
routeNamestringThe name of the tram service e.g. MM1
routestringThe tram route description
stopNamestringThe tram stop name
timesarrayArray of departure times to show

Edit view



HTML markup
<div style="max-width: 640px;">
  <div class="wmnds-live-departures wmnds-live-departures--widget wmnds-p-md wmnds-bg-white">
    <div class="wmnds-h2 wmnds-m-t-none">My live departures</div>
    <p class="wmnds-m-b-md">Last updated 9:30am</p>
    <div class="wmnds-live-departures-widget__bus">
      <div class="wmnds-h3 wmnds-m-t-md wmnds-m-b-md">Bus</div>
      <div class="wmnds-m-b-md"><a href="#">Stourbridge, Stourbridge Interchange (Stand C)</a></div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-name">16</div>
        <div class="wmnds-live-departures__service-description">
          <strong>Stourbridge - Wolverhampton via Kingswinford</strong>
        </div>
        <div class="wmnds-live-departures__service-remove">
          <button class="wmnds-btn wmnds-btn--destructive" title="Remove service" type="button">
            <svg class="wmnds-btn__icon">
              <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-live-departures-widget__train">
      <div class="wmnds-h3 wmnds-m-t-md wmnds-m-b-md">Train</div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-description">
          <a href="#">Birmingham Moor Street</a> to <a href="#">Stourbridge Junction</a>
        </div>
        <div class="wmnds-live-departures__service-remove">
          <button class="wmnds-btn wmnds-btn--destructive" title="Remove service" type="button">
            <svg class="wmnds-btn__icon">
              <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-live-departures-widget__tram">
      <div class="wmnds-h3 wmnds-m-t-md wmnds-m-b-md">Tram</div>
      <div class="wmnds-live-departures__service-details wmnds-m-b-md">
        <div class="wmnds-live-departures__service-description">
          <a href="#">Birmingham, Town Hall (Platform 2)</a>
        </div>
        <div class="wmnds-live-departures__service-remove">
          <button class="wmnds-btn wmnds-btn--destructive" title="Remove service" type="button">
            <svg class="wmnds-btn__icon">
              <use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <hr>
    <div class="wmnds-grid wmnds-grid--spacing-2-lg">
      <div class="wmnds-col-1-2">
        <button class="wmnds-btn wmnds-btn--secondary wmnds-col-1" type="button">
          Cancel
        </button>
      </div>
      <div class="wmnds-col-1-2">
        <button class="wmnds-btn wmnds-col-1" type="button">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/live-departures/live-departures-widget/_live-departures-widget.njk" import wmndsLiveDeparturesWidget %}
{{
   wmndsLiveDeparturesWidget({
      editMode: false,
      lastUpdated: "9:30am",
      busStops: [
         {
            routeName: "16",
            stopName: "Stourbridge, Stourbridge Interchange (Stand C)",
            route: "Stourbridge - Wolverhampton via Kingswinford",
            times: [4, 14, 24, 34]
         },
         {
            routeName: "16",
            stopName: "Wolverhampton Bus Station (Stand L)",
            route: "Wolverhampton - Stourbridge via Kingswinford",
            times: [4, 14, 24, 34]
         }
      ],
      trainStops: [
         {
            routeStart: "Birmingham Moor Street",
            routeEnd: "Stourbridge Junction",
            stops: [
                  {
                     destination: "Kidderminster",
                     time: "08:21",
                     platform: 2
                  },
                  {
                     destination: "Worcester Forgate Street",
                     time: "08:25",
                     platform: 2
                  }
            ]
         }
      ],
      tramStops: [
         {
            routeName: "MM1",
            stopName: "Birmingham, Town Hall (Platform 2)",
            route: "Birmingham - Wolverhampton",
            times: [4, 14, 24, 34]
         },
         {
            routeName: "MM1",
            stopName: "Wolverhampton St George’s",
            route: "Wolverhampton - Birmingham",
            times: [4, 14, 24, 34]
         }
      ]
   })
}}

Nunjucks properties
NameTypeDescription
editModebooleanDetermines whether to show the widget in edit mode
lastUpdatedstringThe time that the widget was last updated e.g. 9:30am
trainStopsarrayArray of objects containing the train stop information
busStopsarrayArray of objects containing the bus stop information
tramStopsarrayArray of objects containing the tram stop information

Options for trainStops

NameTypeDescription
routeStartstringThe first station of the train route
routeEndstringThe end station of the train route
stopsarrayArray of objects containing the information for the train departures. Objects include the fields 'destination', 'time' and 'platform'.

Options for busStops

NameTypeDescription
routeNamestringThe name of the bus service e.g. MM1
routestringThe bus route description
stopNamestringThe bus stop name
timesarrayArray of departure times to show

Options for tramStops

NameTypeDescription
routeNamestringThe name of the tram service e.g. MM1
routestringThe tram route description
stopNamestringThe tram stop name
timesarrayArray of departure times to show