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>
</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
| Name | Type | Description |
|---|---|---|
| service | array | Array of objects containing the bus service information |
Options for service
| Name | Type | Description |
|---|---|---|
| name | string | The name of the bus service e.g. 16 |
| destination | string | The bus service destination name |
| operator | string | The bus service operator name |
| times | array | Array 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 wmnds-btn__icon--left ">
<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
| Name | Type | Description |
|---|---|---|
| name | string | The name of the service e.g. 16 |
| destination | string | The bus service destination name |
| lastUpdated | string | The time of last departure update e.g. 9:30am |
| operator | string | The service operator name |
| times | array | Array 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 wmnds-btn__icon--left ">
<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
| Name | Type | Description |
|---|---|---|
| name | string | The name of the service e.g. 16 |
| destination | string | The bus service destination name |
| lastUpdated | string | The time of last departure update e.g. 9:30am |
| operator | string | The service operator name |
| times | array | Array 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
| Name | Type | Description |
|---|---|---|
| showFiltered | boolean | Determines whether to show in filtered mode |
| lastUpdated | string | The time that the departures were last updated e.g. 9:30am |
| departures | array | Array of objects containing the departures information |
| arrivals | array | Array of objects containing the arrivals information |
Options for departures
| Name | Type | Description |
|---|---|---|
| train | string | The train destination |
| operator | string | The train operator name |
| platform | string | The platform number |
| time | string | The departure time |
| status | string | The departure status e.g. '6 mins late', 'Cancelled' |
Options for arrivals
| Name | Type | Description |
|---|---|---|
| train | string | The train destination |
| operator | string | The train operator name |
| platform | string | The platform number |
| time | string | The arrival time |
| status | string | The 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 wmnds-btn__icon--left ">
<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
| Name | Type | Description |
|---|---|---|
| showFiltered | boolean | Determines whether to show in filtered mode |
| lastUpdated | string | The time that the departures were last updated e.g. 9:30am |
| departures | array | Array of objects containing the departures information |
| arrivals | array | Array of objects containing the arrivals information |
Options for departures
| Name | Type | Description |
|---|---|---|
| train | string | The train destination |
| operator | string | The train operator name |
| platform | string | The platform number |
| time | string | The departure time |
| status | string | The departure status e.g. '6 mins late', 'Cancelled' |
Options for arrivals
| Name | Type | Description |
|---|---|---|
| train | string | The train destination |
| operator | string | The train operator name |
| platform | string | The platform number |
| time | string | The arrival time |
| status | string | The 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
| Name | Type | Description |
|---|---|---|
| editMode | boolean | Determines whether to show the widget in edit mode |
| lastUpdated | string | The time that the widget was last updated e.g. 9:30am |
| trainStops | array | Array of objects containing the train stop information |
| busStops | array | Array of objects containing the bus stop information |
| tramStops | array | Array of objects containing the tram stop information |
Options for trainStops
| Name | Type | Description |
|---|---|---|
| routeStart | string | The first station of the train route |
| routeEnd | string | The end station of the train route |
| stops | array | Array of objects containing the information for the train departures. Objects include the fields 'destination', 'time' and 'platform'. |
Options for busStops
| Name | Type | Description |
|---|---|---|
| routeName | string | The name of the bus service e.g. MM1 |
| route | string | The bus route description |
| stopName | string | The bus stop name |
| times | array | Array of departure times to show |
Options for tramStops
| Name | Type | Description |
|---|---|---|
| routeName | string | The name of the tram service e.g. MM1 |
| route | string | The tram route description |
| stopName | string | The tram stop name |
| times | array | Array 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
| Name | Type | Description |
|---|---|---|
| editMode | boolean | Determines whether to show the widget in edit mode |
| lastUpdated | string | The time that the widget was last updated e.g. 9:30am |
| trainStops | array | Array of objects containing the train stop information |
| busStops | array | Array of objects containing the bus stop information |
| tramStops | array | Array of objects containing the tram stop information |
Options for trainStops
| Name | Type | Description |
|---|---|---|
| routeStart | string | The first station of the train route |
| routeEnd | string | The end station of the train route |
| stops | array | Array of objects containing the information for the train departures. Objects include the fields 'destination', 'time' and 'platform'. |
Options for busStops
| Name | Type | Description |
|---|---|---|
| routeName | string | The name of the bus service e.g. MM1 |
| route | string | The bus route description |
| stopName | string | The bus stop name |
| times | array | Array of departure times to show |
Options for tramStops
| Name | Type | Description |
|---|---|---|
| routeName | string | The name of the tram service e.g. MM1 |
| route | string | The tram route description |
| stopName | string | The tram stop name |
| times | array | Array of departure times to show |