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

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

Name	Type	Description
isOpen	boolean	If true, widget will be expanded upon initial load. Defaults to `false`.

Expanded (bus)

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

Name	Type	Description
isOpen	boolean	If true, widget will be expanded upon initial load. Defaults to `false`.

Expanded (train)

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

Name	Type	Description
isOpen	boolean	If 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

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

Name	Type	Description
id	string	Required. id for the card components
formTitle	string	Content card title text
mode	string	Sets 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

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

Name	Type	Description
id	string	Required. id for the card components
formTitle	string	Content card title text
mode	string	Sets 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

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

Name	Type	Description
id	string	Required. id for the card components
formTitle	string	Content card title text
mode	string	Sets 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

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

Name	Type	Description
id	string	Required. id for the card components
formTitle	string	Content card title text
mode	string	Sets 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

Stourbridge Town

1 minute walk

Stourbridge, Town Centre

1 minute walk

Stourbridge, Foster St East (adjacent)

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

Name	Type	Description
stops	array	Array of three objects containing nearest stop information

Options for stops

Name	Type	Description
mode	string	Accepted modes are 'bus', 'rail', 'metro'
name	string	Name of the stop or station
distance	string	The distance of the stop or station from the current stop