Timetables
Bus and Tram
What does it do?
- Shows the full timetable for a bus service or tram service
When to use it?
- On a bus stop page
- On a tram stop page
How it works
- Selecting a departure time will display the full route of the bus or tram service from that time
- Users can choose a day of the week, including bank holidays
- The Warning text component informs users when the timetable was last updated and if there is an upcoming change to the timetable
- Users can download a PDF file of the timetable
- Users can see the service route page for a bus or tram by selecting the ‘View full route’ button
HTML markup
<div class="wmnds-p-lg wmnds-bg-white">
<p class="wmnds-h4 wmnds-m-b-md wmnds-m-t-none">Stourbridge - Wolverhampton via Kingswinford</p>
<div class="wmnds-warning-text ">
<svg class="wmnds-warning-text__icon">
<use xlink:href="#wmnds-general-info" href="#wmnds-general-info"></use>
</svg>
This is the latest timetable (last updated 2 July 2021)
</div>
<p class="wmnds-h4 wmnds-m-b-md">Select day of the week</p>
<div class="wmnds-col-1-2 wmnds-col-sm-auto">
<div class="wmnds-grid wmnds-grid--spacing-sm-3-md">
<div class="wmnds-col-1 wmnds-col-sm-auto">
<button class="wmnds-btn wmnds-btn--secondary wmnds-col-1 wmnds-col-sm-auto wmnds-m-b-xsm wmnds-is--active" type="button">
Monday to Friday
</button>
</div>
<div class="wmnds-col-1 wmnds-col-sm-auto">
<button class="wmnds-btn wmnds-btn--secondary wmnds-col-1 wmnds-col-sm-auto wmnds-m-b-xsm" type="button">
Saturday
</button>
</div>
<div class="wmnds-col-1 wmnds-col-sm-auto">
<button class="wmnds-btn wmnds-btn--secondary wmnds-col-1 wmnds-col-sm-auto wmnds-m-b-xsm" type="button">
Sunday
</button>
</div>
</div>
</div>
<h4>Select a departure time</h4>
<p>Show the route from this stop at the departure time</p>
<div class="wmnds-timetable">
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1010
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1010</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1013</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1016</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1019</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1022</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1025</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1028</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1031</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1110
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1110</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1113</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1116</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1119</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1122</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1125</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1128</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1131</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1210
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1210</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1213</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1216</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1219</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1222</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1225</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1228</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1231</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1310
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1310</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1313</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1316</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1319</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1322</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1325</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1328</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1331</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1410
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1410</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1413</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1416</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1419</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1422</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1425</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1428</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1431</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1510
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1510</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1513</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1516</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1519</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1522</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1525</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1528</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1531</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1610
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1610</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1613</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1616</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1619</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1622</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1625</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1628</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1631</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1710
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1710</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1713</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1716</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1719</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1722</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1725</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1728</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1731</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1810
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1810</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1813</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1816</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1819</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1822</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1825</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1828</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1831</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
1910
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1910</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1913</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1916</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1919</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1922</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1925</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1928</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">1931</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
2010
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2010</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2013</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2016</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2019</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2022</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2025</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2028</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2031</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
2110
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2110</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2113</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2116</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2119</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2122</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2125</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2128</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2131</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
2210
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2210</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2213</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2216</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2219</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2222</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2225</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2228</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2231</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wmnds-timetable__time">
<button class="wmnds-btn wmnds-btn--secondary wmnds-timetable__time-toggle" type="button">
2310
</button>
<div class="wmnds-timetable__time-details">
<div class="wmnds-timetable__time-details-content">
<button class="wmnds-btn wmnds-btn--link wmnds-timetable__time-close" type="button">
Close
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2310</strong>
<a href="#">Stop 1</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2313</strong>
<a href="#">Stop 2</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2316</strong>
<a href="#">Stop 3</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2319</strong>
<a href="#">Stop 4</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2322</strong>
<a href="#">Stop 5</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2325</strong>
<a href="#">Stop 6</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2328</strong>
<a href="#">Stop 7</a>
</li>
<li class="wmnds-timetable__route-item">
<strong class="wmnds-timetable__route-item-time">2331</strong>
<a href="#">Stop 8</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="wmnds-grid wmnds-grid--justify-between wmnds-m-t-md">
<div class="wmnds-col-1 wmnds-col-sm-2-3 wmnds-m-b-md">
<div class="wmnds-file-download">
<svg class="wmnds-file-download__icon">
<use xlink:href="#wmnds-general-file" href="#wmnds-general-file"></use>
</svg>
<div class="wmnds-file-download__desc">
<a href="#" title="link title" target="_self" class="wmnds-link wmnds-file-download__link" download="file_name.pdf">
Download ‘Full Timetable’ (PDF)
</a>
</div>
</div>
</div>
<div class="wmnds-col-1 wmnds-col-sm-1-3">
<button class="wmnds-btn wmnds-btn--primary wmnds-col-1" type="button">
View full route
</button>
</div>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/timetable/bus-and-tram/_bus-tram-timetable.njk" import wmndsBusAndTramTimetable %}
{{
wmndsBusAndTramTimetable({
routeName: "Stourbridge - Wolverhampton via Kingswinford",
lastUpdated: "2 July 2021",
departureTimes: [
{
departureTime: "1510",
route: [
{
stopDepartureTime: "1510",
stopName: "Stourbridge Interchange (Stand C)"
},
{
stopDepartureTime: "1513",
stopName: "The Hollybush (opp)"
}
]
}
]
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| routeName | string | Required. The name of the bus or tram route. |
| lastUpdated | string | Required. Date the timetable was last updated. |
| departureTimes | array | Array of objects for departure times. See departureTimes below. |
Options for departureTimes
| Name | Type | Description |
|---|---|---|
| departureTime | string | The start time for the route departure. |
| route | array | Array of objects for route stops. Accepted keys are: stopDepartureTime and stopName. |
Train
What does it do?
- Directs users to the train operator(s) website so they can view full timetables
- Helps users to find which train operator(s) run services between two rail stations
When to use it?
- On a train station page
How it works?
- Users enter their departure and arrival station
- The results will tell users which operator(s) run services between the two rail stations and link them to the train operator(s) homepage
Default
You can find full train timetables on the train company’s website. To find which train company runs your service, enter the stations you’ll travel between.
Content is loading...
Content is loading...
HTML markup
<div class="wmnds-p-lg wmnds-bg-white">
<p>You can find full train timetables on the train company’s website. To find which train company runs your service, enter the stations you’ll travel between.</p>
<div class="wmnds-col-md-3-4 wmnds-m-b-md">
<label class="wmnds-fe-label wmnds-h4 wmnds-m-t-none" for="trainTimetableFrom_train_timetable">From:</label>
<div class="wmnds-autocomplete wmnds-grid">
<!-- Search icon -->
<svg class="wmnds-autocomplete__icon">
<use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
</svg>
<!-- normal sized loader -->
<div class="wmnds-loader" role="alert" aria-live="assertive">
<p class="wmnds-loader__content">Content is loading...</p>
</div>
<!-- Autocomplete input box -->
<input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Search for a rail station" name="trainTimetableFrom_train_timetable" aria-label="Search for a rail station" type="text" id="trainTimetableFrom_train_timetable" required="false" autocomplete="off">
</div>
</div>
<div class="wmnds-col-md-3-4 wmnds-m-b-md">
<label class="wmnds-fe-label wmnds-h4 wmnds-m-t-none" for="trainTimetableTo_train_timetable">To:</label>
<div class="wmnds-autocomplete wmnds-grid">
<!-- Search icon -->
<svg class="wmnds-autocomplete__icon">
<use xlink:href="#wmnds-general-search" href="#wmnds-general-search"></use>
</svg>
<!-- normal sized loader -->
<div class="wmnds-loader" role="alert" aria-live="assertive">
<p class="wmnds-loader__content">Content is loading...</p>
</div>
<!-- Autocomplete input box -->
<input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="" placeholder="Search for a rail station" name="trainTimetableTo_train_timetable" aria-label="Search for a rail station" type="text" id="trainTimetableTo_train_timetable" required="false" autocomplete="off">
</div>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/timetable/train-timetable/_train-timetable.njk" import wmndsTrainTimetable %}
{{
wmndsTrainTimetable({
id: 'trainTimetable',
showResults: false,
autocompleteItems: ['Birmingham Moor Street', 'Leamington Spa']
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| id | string | Required. String of text used for the id in the autocomplete components. |
| showResults | boolean | If true, autocomplete imputs will display in the selected items state with information text below. |
| autocompleteItems | array | Array of selected autocomplete items to use as text. |
Results
You can find full train timetables on the train company’s website. To find which train company runs your service, enter the stations you’ll travel between.
Birmingham Moor Street
Leamington Spa
West Midlands Railway and Chiltern Railways run trains between Birmingham Moor Street and Leamington Spa. Visit their website to view timetables.
If you do not know which of these train company’s you travel with, plan a journey.
HTML markup
<div class="wmnds-p-lg wmnds-bg-white">
<p>You can find full train timetables on the train company’s website. To find which train company runs your service, enter the stations you’ll travel between.</p>
<div class="wmnds-col-md-3-4 wmnds-m-b-md">
<label class="wmnds-fe-label wmnds-h4 wmnds-m-t-none" for="trainTimetableFrom_resultsExample">From:</label>
<div class="wmnds-autocomplete__selected-item wmnds-grid wmnds-grid--justify-between wmnds-m-t-xs wmnds-m-b-md">
<strong class="wmnds-col-auto wmnds-autocomplete__selected-item-summary">Birmingham Moor Street</strong>
<button type="button" class="wmnds-autocomplete__selected-item-close">
<svg class="wmnds-autocomplete__selected-item-close-icon">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
</div>
</div>
<div class="wmnds-col-md-3-4 wmnds-m-b-md">
<label class="wmnds-fe-label wmnds-h4 wmnds-m-t-none" for="trainTimetableTo_resultsExample">To:</label>
<div class="wmnds-autocomplete__selected-item wmnds-grid wmnds-grid--justify-between wmnds-m-t-xs wmnds-m-b-md">
<strong class="wmnds-col-auto wmnds-autocomplete__selected-item-summary">Leamington Spa</strong>
<button type="button" class="wmnds-autocomplete__selected-item-close">
<svg class="wmnds-autocomplete__selected-item-close-icon">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
</div>
</div>
<div class="wmnds-inset-text">
<p><a href='#'>West Midlands Railway</a> and <a href='#'>Chiltern Railways</a> run trains between Birmingham Moor Street and Leamington Spa. Visit their website to view timetables.</p>
<p class='wmnds-m-b-none'>If you do not know which of these train company’s you travel with, <a href='#'>plan a journey</a>.</p>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/timetable/train-timetable/_train-timetable.njk" import wmndsTrainTimetable %}
{{
wmndsTrainTimetable({
id: 'trainTimetable',
showResults: false,
autocompleteItems: ['Birmingham Moor Street', 'Leamington Spa']
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| id | string | Required. String of text used for the id in the autocomplete components. |
| showResults | boolean | If true, autocomplete imputs will display in the selected items state with information text below. |
| autocompleteItems | array | Array of selected autocomplete items to use as text. |
Bus and tram route
What does it do?
- Shows the full route for a bus or tram service
When to use it?
- On a bus service route page
- On a tram service route page
How it works?
- Users can view bus or tram stop pages by selecting the link
HTML markup
<div class="wmnds-p-md wmnds-p-l-lg wmnds-p-r-lg wmnds-bg-white">
<ul class="wmnds-timetable__route">
<li class="wmnds-timetable__route-item">
<a href="#">Wolverhampton Bus Station (Stand L)</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Thornley Street (Stop AV)</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Art Gallery</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Beatties (Stop BF)</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Skinner Street</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Salop Street (Stop CS)</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Church Street (Stop CJ)</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Lea Road (adj)</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Blakenhall, Marston Road (after)</a>
</li>
<li class="wmnds-timetable__route-item">
<a href="#">Goldthorn Road (adj)</a>
</li>
</ul>
</div>
Nunjucks markup
{% from "wmnds/patterns/timetable/bus-and-tram/_bus-tram-timetable.njk" import wmndsBusAndTramRoute %}
{{
wmndsBusAndTramRoute({
stops: [
"Wolverhampton Bus Station (Stand L)",
"Thornley Street (Stop AV)",
"Art Gallery"
]
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| stops | array | List of stops to show for the route. |