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

Find a stop or station

Homepage

What does it do?

  • Helps users to find a bus stop, train station and tram stop near them

When to use it?

  • On the homepage

How it works?

  • This will direct users to the Find a stop or station service
  • Users can select more than one travel mode
  • Users will need to enter a postcode, road name or place of interest if they select bus or train.
  • If only tram is selected, users will go straight to the tram route page

Default


Find a station or stop

See live departures, disruptions, timetables and nearest stops or stations.

Select your transport mode


HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-stop-station-widget ">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a station or stop</h2>
        <div class="wmnds-find-stop-station__content">
          <p>See live departures, disruptions, timetables and nearest stops or stations.</p>
        </div>
        <form class="wmnds-find-stop-station-widget__form">
          <p class="wmnds-m-b-md">
            Select your transport mode
          </p>
          <div class="wmnds-find-stop-station-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
            <div class="wmnds-col-1-3">
              <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </button>
            </div>
            <div class="wmnds-col-1-3">
              <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </button>
            </div>
            <div class="wmnds-col-1-3">
              <a href="#/" title="link title" target="_self" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}

{{
   wmndsFindTimetableWidget({
      isOpen: true
    })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, widget will be expanded upon initial load. Defaults to false.

Expanded (bus)


Find a station or stop

See live departures, disruptions, timetables and nearest stops or stations.

Select your transport mode


HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-stop-station-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a station or stop</h2>
        <div class="wmnds-find-stop-station__content">
          <p>See live departures, disruptions, timetables and nearest stops or stations.</p>
        </div>
        <form class="wmnds-find-stop-station-widget__form">
          <p class="wmnds-m-b-md">
            Select your transport mode
          </p>
          <div class="wmnds-find-stop-station-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
            <div class="wmnds-col-1-3">
              <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-is--active" type="button">
                <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </button>
            </div>
            <div class="wmnds-col-1-3">
              <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </button>
            </div>
            <div class="wmnds-col-1-3">
              <a href="#/" title="link title" target="_self" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </a>
            </div>
          </div>
          <div class="wmnds-find-stop-station-widget__services">
            <label class="wmnds-fe-label" for="autocompletestationStop">Enter a postcode, road name or place of interest</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" name="autocompletestationStop" aria-label="Search" type="text" id="autocompletestationStop" required="false" autocomplete="off">
            </div>
            <button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1-2 wmnds-m-t-md wmnds-btn--align-left" type="submit">
              Search
              <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>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}

{{
   wmndsFindTimetableWidget({
      isOpen: true
    })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, widget will be expanded upon initial load. Defaults to false.

Expanded (train)


Find a station or stop

See live departures, disruptions, timetables and nearest stops or stations.

Select your transport mode


HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-stop-station-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a station or stop</h2>
        <div class="wmnds-find-stop-station__content">
          <p>See live departures, disruptions, timetables and nearest stops or stations.</p>
        </div>
        <form class="wmnds-find-stop-station-widget__form">
          <p class="wmnds-m-b-md">
            Select your transport mode
          </p>
          <div class="wmnds-find-stop-station-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
            <div class="wmnds-col-1-3">
              <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center" type="button">
                <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </button>
            </div>
            <div class="wmnds-col-1-3">
              <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-is--active" type="button">
                <svg class="wmnds-btn__icon wmnds-btn__icon--left ">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </button>
            </div>
            <div class="wmnds-col-1-3">
              <a href="#/" title="link title" target="_self" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </a>
            </div>
          </div>
          <div class="wmnds-find-stop-station-widget__services">
            <label class="wmnds-fe-label" for="autocompletetrainOpen">Enter a postcode, road name or place of interest</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" name="autocompletetrainOpen" aria-label="Search" type="text" id="autocompletetrainOpen" required="false" autocomplete="off">
            </div>
            <button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1-2 wmnds-m-t-md wmnds-btn--align-left" type="submit">
              Search
              <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>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}

{{
   wmndsFindTimetableWidget({
      isOpen: true
    })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, widget will be expanded upon initial load. Defaults to false.

Travel mode landing pages

What does it do?

  • Helps users to find a bus stop, train station or tram stop near them

When to use it?

  • On the bus landing page
  • On the train landing page
  • On the tram landing page

How it works?

  • This will direct users to the Find a stop or station service
  • The transport mode will be pre-selected for the user based on the landing page they come from
  • Users will need to enter a postcode, road name or place of interest

Bus


Find a bus stop


HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-stop-station-sidebar wmnds-find-stop-station-sidebar--bus">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a bus stop</h2>
        <div class="wmnds-m-b-md">
          <label class="wmnds-fe-label" for="autocompletesidebarBus">Enter a postcode, road name or place of interest</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" name="autocompletesidebarBus" aria-label="Search" type="text" id="autocompletesidebarBus" required="false" autocomplete="off">
          </div>
        </div>
        <button class="wmnds-btn wmnds-col-1 wmnds-btn--align-left" type="button">
          Search
          <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/find-stop-station-widget/find-stop-station-sidebar/_find-stop-station-sidebar.njk" import wmndsFindStopStationSidebar %}

{{
   wmndsFindStopStationSidebar({
      id: "sidebarBus",
      formTitle: "Find a bus stop",
      mode: "bus"
   })
}}

Nunjucks properties
NameTypeDescription
idstringRequired. id for the card components
formTitlestringContent card title text
modestringSets the color code for the content card border. Accepted values are 'bus', 'rail' and 'metro'. If not set the default stop or station widget will display.

Train


Find a train station


HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-stop-station-sidebar wmnds-find-stop-station-sidebar--rail">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a train station</h2>
        <div class="wmnds-m-b-md">
          <label class="wmnds-fe-label" for="autocompletesidebarTrain">Enter a postcode, road name or place of interest</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" name="autocompletesidebarTrain" aria-label="Search" type="text" id="autocompletesidebarTrain" required="false" autocomplete="off">
          </div>
        </div>
        <button class="wmnds-btn wmnds-col-1 wmnds-btn--align-left" type="button">
          Search
          <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/find-stop-station-widget/find-stop-station-sidebar/_find-stop-station-sidebar.njk" import wmndsFindStopStationSidebar %}

{{
   wmndsFindStopStationSidebar({
      id: "sidebarBus",
      formTitle: "Find a bus stop",
      mode: "bus"
   })
}}

Nunjucks properties
NameTypeDescription
idstringRequired. id for the card components
formTitlestringContent card title text
modestringSets the color code for the content card border. Accepted values are 'bus', 'rail' and 'metro'. If not set the default stop or station widget will display.

Tram


Find a tram stop


HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-stop-station-sidebar wmnds-find-stop-station-sidebar--metro">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a tram stop</h2>
        <div class="wmnds-m-b-md">
          <label class="wmnds-fe-label" for="autocompletesidebarTram">Enter a postcode, road name or place of interest</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" name="autocompletesidebarTram" aria-label="Search" type="text" id="autocompletesidebarTram" required="false" autocomplete="off">
          </div>
        </div>
        <button class="wmnds-btn wmnds-col-1 wmnds-btn--align-left" type="button">
          Search
          <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/find-stop-station-widget/find-stop-station-sidebar/_find-stop-station-sidebar.njk" import wmndsFindStopStationSidebar %}

{{
   wmndsFindStopStationSidebar({
      id: "sidebarBus",
      formTitle: "Find a bus stop",
      mode: "bus"
   })
}}

Nunjucks properties
NameTypeDescription
idstringRequired. id for the card components
formTitlestringContent card title text
modestringSets the color code for the content card border. Accepted values are 'bus', 'rail' and 'metro'. If not set the default stop or station widget will display.

Station and stop pages

What does it do?

  • Helps users to find a bus stop, train station or tram stop near them

When to use it?

  • On a bus stop page
  • On a train station page
  • On a tram stop page

How it works?

  • This will direct users to the Find a stop or station service
  • The bus, train and tram transport modes will be pre-selected for the user on the results page
  • Users will need to enter a postcode, road name or place of interest

Find a stop or station


HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-stop-station-sidebar ">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a stop or station</h2>
        <div class="wmnds-m-b-md">
          <label class="wmnds-fe-label" for="autocompletestopStation">Enter a postcode, road name or place of interest</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" name="autocompletestopStation" aria-label="Search" type="text" id="autocompletestopStation" required="false" autocomplete="off">
          </div>
        </div>
        <button class="wmnds-btn wmnds-col-1 wmnds-btn--align-left" type="button">
          Search
          <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/find-stop-station-widget/find-stop-station-sidebar/_find-stop-station-sidebar.njk" import wmndsFindStopStationSidebar %}

{{
   wmndsFindStopStationSidebar({
      id: "sidebarBus",
      formTitle: "Find a bus stop",
      mode: "bus"
   })
}}

Nunjucks properties
NameTypeDescription
idstringRequired. id for the card components
formTitlestringContent card title text
modestringSets the color code for the content card border. Accepted values are 'bus', 'rail' and 'metro'. If not set the default stop or station widget will display.

Nearest stops and stations

What does it do?

  • Helps users to find a bus stop, train station or tram stop closest to the stop or station page they are on

When to use it?

  • On a bus stop page
  • On a train station page
  • On a tram stop page

How it works?

  • The nearest three bus stops, train stations or tram stops from the page location will be shown

Nearest stops or stations

1 minute walk

HTML markup
<div style="max-width: 448px">
  <div class="wmnds-nearest-stop-station">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Nearest stops or stations</h2>
        <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-nearest-stop-station__stop">
          <div class="wmnds-col-auto">
            <svg class="wmnds-nearest-stop-station__icon wmnds-nearest-stop-station__icon--rail">
              <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
            </svg>
          </div>
          <div class="wmnds-col-auto">
            <div><a href="#/">Stourbridge Town</a></div>
            <span>1 minute walk</span>
          </div>
        </div>
        <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-nearest-stop-station__stop">
          <div class="wmnds-col-auto">
            <svg class="wmnds-nearest-stop-station__icon wmnds-nearest-stop-station__icon--bus">
              <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
            </svg>
          </div>
          <div class="wmnds-col-auto">
            <div><a href="#/">Stourbridge, Town Centre</a></div>
            <span>1 minute walk</span>
          </div>
        </div>
        <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-nearest-stop-station__stop">
          <div class="wmnds-col-auto">
            <svg class="wmnds-nearest-stop-station__icon wmnds-nearest-stop-station__icon--metro">
              <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
            </svg>
          </div>
          <div class="wmnds-col-auto">
            <div><a href="#/">Stourbridge, Foster St East (adjacent)</a></div>
            <span>1 minute walk</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/nearest-stop-station/_nearest-stop-station.njk" import wmndsNearestStopStation %}

{{
   wmndsNearestStopStation({
      stops: [
         {
         mode: "rail",
         name: "Stourbridge Town",
         distance: "1 minute walk"
         },
         {
         mode: "bus",
         name: "Stourbridge, Town Centre",
         distance: "1 minute walk"
         },
         {
         mode: "metro",
         name: "Stourbridge, Foster St East (adjacent)",
         distance: "1 minute walk"
         }
      ]
   })
}}

Nunjucks properties
NameTypeDescription
stopsarrayArray of three objects containing nearest stop information

Options for stops

NameTypeDescription
modestringAccepted modes are 'bus', 'rail', 'metro'
namestringName of the stop or station
distancestringThe distance of the stop or station from the current stop