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

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
NameTypeDescription
routeNamestringRequired. The name of the bus or tram route.
lastUpdatedstringRequired. Date the timetable was last updated.
departureTimesarrayArray of objects for departure times. See departureTimes below.

Options for departureTimes

NameTypeDescription
departureTimestringThe start time for the route departure.
routearrayArray 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.


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
NameTypeDescription
idstringRequired. String of text used for the id in the autocomplete components.
showResultsbooleanIf true, autocomplete imputs will display in the selected items state with information text below.
autocompleteItemsarrayArray 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
NameTypeDescription
idstringRequired. String of text used for the id in the autocomplete components.
showResultsbooleanIf true, autocomplete imputs will display in the selected items state with information text below.
autocompleteItemsarrayArray 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
NameTypeDescription
stopsarrayList of stops to show for the route.