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

Journey planner

Homepage

What does it do?

  • Helps users to plan a journey straight from the homepage and directs users to the full journey planner service

When to use it?

  • On the homepage

How it works?

  • The widget is collapsed by default. The widget expands to show the full journey information when the user selects the 'Add details' button. The additional travel details can be hidden when a user clicks on the 'Hide details' button
  • The 'From' and 'To' fields use the autocomplete feature for train stations and postcodes. Users can also use their current location to automatically choose their departure or arrival location
  • The ‘From’ and ’To’ fields can be switched at any time through the Switch link button
  • Users can choose a specific transport mode as well as change their departure or arrival time
  • The ‘Plan my journey’ Call to action button will send users to the full journey planner service with information on their selected journey

Default


Plan your journey

Which modes of transport will you use?
Leaving

HTML markup
<div style="max-width: 448px">
  <div class="wmnds-journey-planner ">
    <div class="wmnds-p-md">
      <h2>Plan your journey</h2>
      <form class="wmnds-journey-planner__form" name="jphome" action="//journeyplanner.wmnetwork.co.uk/Home/HandleWidgetQuery" method="GET">
        <div class="wmnds-journey-planner__from">
          <label class="wmnds-fe-label h5 wmnds-m-t-md" for="mainjp-from--collapsed">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="Enter station or postcode" name="origin" aria-label="Enter station or postcode" type="text" id="mainjp-from--collapsed" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__to">
          <div class="wmnds-journey-planner__switch">
            <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
              Switch
            </button>
            <svg class="wmnds-journey-planner__switch-icon">
              <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
            </svg>
          </div>
          <label class="wmnds-fe-label h5" for="mainjp-to--collapsed">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="Enter station or postcode" name="destination" aria-label="Enter station or postcode" type="text" id="mainjp-to--collapsed" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__how">
          <h5>Which modes of transport will you use?</h5>
          <div class="wmnds-grid wmnds-grid--spacing-3-sm">
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useBus">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </div>
            </label>
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTrain">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </div>
            </label>
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTram">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </div>
            </label>
          </div>
        </div>
        <div class="wmnds-journey-planner__when">
          <h5>Leaving</h5>
          <input type="hidden" name="journeyTimeType" value="leave" />
          <div class="wmnds-grid wmnds-grid--spacing-2-lg">
            <div class="wmnds-col-2-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-day--collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-day--collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="wmnds-col-1-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-time--collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-time--collapsed" name="SelectJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wmnds-journey-planner__submit wmnds-m-t-lg">
          <div class="wmnds-grid wmnds-grid--spacing-sm-2-lg">
            <div class="wmnds-col-1 wmnds-col-sm-1-2">
              <button class="wmnds-btn wmnds-btn--block wmnds-btn--align-left wmnds-m-b-md wmnds-btn--dark-bg" type="button">
                Add details
                <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                  <use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
                </svg>
              </button>
            </div>
            <div class="wmnds-col-1 wmnds-col-sm-1-2"">
                        











 
 
 

 
 

<button class=" wmnds-btn wmnds-btn--block wmnds-btn--align-left" type="submit">
              Plan my journey
              <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>
      </form>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/journey-planner/_journey-planner.njk" import wmndsJourneyPlanner %}

{{
   wmndsJourneyPlanner({
        isOpen: true,
        isHowOpen: false,
        isWhenOpen: false
   })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, journey planner will be expanded. Defaults to false.
isWhenOpenbooleanIf true, journey planner area to define when you want to travel will be expanded. Defaults to false.
isHowOpenbooleanIf true, journey planner area to define how (the mode of travel) do you want to travel will be expanded. Defaults to false.

Expanded

When a user selects the ‘Add details' button, the full journey details are shown

Plan your journey

Which modes of transport will you use?
Leaving

HTML markup
<div style="max-width: 448px">
  <div class="wmnds-journey-planner  wmnds-is--open">
    <div class="wmnds-p-md">
      <h2>Plan your journey</h2>
      <form class="wmnds-journey-planner__form" name="jphome" action="//journeyplanner.wmnetwork.co.uk/Home/HandleWidgetQuery" method="GET">
        <div class="wmnds-journey-planner__from">
          <label class="wmnds-fe-label h5 wmnds-m-t-md" for="mainjp-from--opened">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="Enter station or postcode" name="origin" aria-label="Enter station or postcode" type="text" id="mainjp-from--opened" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__to">
          <div class="wmnds-journey-planner__switch">
            <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
              Switch
            </button>
            <svg class="wmnds-journey-planner__switch-icon">
              <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
            </svg>
          </div>
          <label class="wmnds-fe-label h5" for="mainjp-to--opened">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="Enter station or postcode" name="destination" aria-label="Enter station or postcode" type="text" id="mainjp-to--opened" required="true" autocomplete="off">
          </div>
        </div>
        <div class="wmnds-journey-planner__how">
          <h5>Which modes of transport will you use?</h5>
          <div class="wmnds-grid wmnds-grid--spacing-3-sm">
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useBus">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </div>
            </label>
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTrain">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </div>
            </label>
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-buy-a-ticket__mode-checkbox wmnds-screenreaders-only" name="useTram">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </div>
            </label>
          </div>
        </div>
        <div class="wmnds-journey-planner__when">
          <h5>Leaving</h5>
          <input type="hidden" name="journeyTimeType" value="leave" />
          <div class="wmnds-grid wmnds-grid--spacing-2-lg">
            <div class="wmnds-col-2-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-day--opened">Day</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-day--opened" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="wmnds-col-1-3">
              <div class="wmnds-fe-group  ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="mainjp-time--opened">Time</label>
                  <select class="wmnds-fe-dropdown__select wmnds-fe-dropdown__select--secondary" id="mainjp-time--opened" name="SelectJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wmnds-journey-planner__submit ">
          <div class="wmnds-grid wmnds-grid--spacing-sm-2-lg">
            <div class="wmnds-col-1 wmnds-col-sm-1-2">
              <button class="wmnds-btn wmnds-btn--block wmnds-btn--align-left wmnds-m-b-md wmnds-btn--dark-bg" type="button">
                Hide details
                <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                  <use xlink:href="#wmnds-general-minimise" href="#wmnds-general-minimise"></use>
                </svg>
              </button>
            </div>
            <div class="wmnds-col-1 wmnds-col-sm-1-2"">
                        











 
 
 

 
 

<button class=" wmnds-btn wmnds-btn--block wmnds-btn--align-left" type="submit">
              Plan my journey
              <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>
      </form>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/journey-planner/_journey-planner.njk" import wmndsJourneyPlanner %}

{{
   wmndsJourneyPlanner({
        isOpen: true,
        isHowOpen: false,
        isWhenOpen: false
   })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, journey planner will be expanded. Defaults to false.
isWhenOpenbooleanIf true, journey planner area to define when you want to travel will be expanded. Defaults to false.
isHowOpenbooleanIf true, journey planner area to define how (the mode of travel) do you want to travel will be expanded. Defaults to false.

Widget

What does it do?

  • For users to quickly access journey information from any page of the West Midlands Network website
  • This widget directs users to the full journey planner service from the right sidebar of a page

When to use it?

  • When the content on a page is related to West Midlands Network travel modes or travel information

How it works?

  • The widget is collapsed by default, showing only the ‘From’ field. The widget expands to show the full journey information when the user selects the ‘From’ field
  • A complete list of the train stations in the West Midlands Network will automatically appear when the user selects the ’From’ or ‘To’ field. Users can also use their current location to automatically choose their departure or arrival location
  • The ‘From’ and ’To’ fields can be switched at any time through the Switch button
  • Users can choose a specific transport mode as well as change their departure or arrival time
  • The ‘Mobility and advanced search’ link will direct users to the journey planner service where they can enter advanced filters
  • The ‘Plan my journey’ Call to action button will send users to the full journey planner service with information on their selected journey

Collapsed

This is the default widget view


Plan your journey

Leave

Now

Leave

Travel by

All transport modes

Travel by

Or


HTML markup
<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget ">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.wmnetwork.co.uk/Home/HandleWidgetQuery" method="GET" name="planYourJourneySmallForm">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--collapsed--leave-collapsed--mode-collapsed">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="Enter station or postcode" name="origin" aria-label="Enter station or postcode" type="text" id="from--collapsed--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--collapsed--leave-collapsed--mode-collapsed">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="Enter station or postcode" name="destination" aria-label="Enter station or postcode" type="text" id="to--collapsed--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when ">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="leave" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--collapsed--leave-collapsed--mode-collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--collapsed--leave-collapsed--mode-collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--collapsed--leave-collapsed--mode-collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--collapsed--leave-collapsed--mode-collapsed" name="SelectJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how ">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <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/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
        isOpen: true,
        isHowOpen: false,
        isWhenOpen: false
   })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, journey planner widget will be expanded. Defaults to false.
isWhenOpenbooleanIf true, journey planner widget area to define when you want to travel will be expanded. Defaults to false.
isHowOpenbooleanIf true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to false.

Expanded

When a user selects the ‘From’ field, the full journey details are expanded


Plan your journey

Leave

Now

Leave

Travel by

All transport modes

Travel by

Or


HTML markup
<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.wmnetwork.co.uk/Home/HandleWidgetQuery" method="GET" name="planYourJourneySmallForm">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--opened--leave-collapsed--mode-collapsed">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="Enter station or postcode" name="origin" aria-label="Enter station or postcode" type="text" id="from--opened--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--opened--leave-collapsed--mode-collapsed">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="Enter station or postcode" name="destination" aria-label="Enter station or postcode" type="text" id="to--opened--leave-collapsed--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when ">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="leave" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--opened--leave-collapsed--mode-collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--opened--leave-collapsed--mode-collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--opened--leave-collapsed--mode-collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--opened--leave-collapsed--mode-collapsed" name="SelectJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how ">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <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/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
        isOpen: true,
        isHowOpen: false,
        isWhenOpen: false
   })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, journey planner widget will be expanded. Defaults to false.
isWhenOpenbooleanIf true, journey planner widget area to define when you want to travel will be expanded. Defaults to false.
isHowOpenbooleanIf true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to false.

Change departure or arrival time

Users can manually change the departure or arrival time of their journey


Plan your journey

Leave

Now

Leave

Travel by

All transport modes

Travel by

Or


HTML markup
<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.wmnetwork.co.uk/Home/HandleWidgetQuery" method="GET" name="planYourJourneySmallForm">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--opened--leave-opened--mode-collapsed">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="Enter station or postcode" name="origin" aria-label="Enter station or postcode" type="text" id="from--opened--leave-opened--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--opened--leave-opened--mode-collapsed">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="Enter station or postcode" name="destination" aria-label="Enter station or postcode" type="text" id="to--opened--leave-opened--mode-collapsed" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when  wmnds-is--open">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="leave" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--opened--leave-opened--mode-collapsed">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--opened--leave-opened--mode-collapsed" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--opened--leave-opened--mode-collapsed">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--opened--leave-opened--mode-collapsed" name="SelectJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how ">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <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/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
        isOpen: true,
        isHowOpen: false,
        isWhenOpen: false
   })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, journey planner widget will be expanded. Defaults to false.
isWhenOpenbooleanIf true, journey planner widget area to define when you want to travel will be expanded. Defaults to false.
isHowOpenbooleanIf true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to false.

Transport mode

Specific transport mode(s) can be chosen by the user to filter their journey


Plan your journey

Leave

Now

Leave

Travel by

All transport modes

Travel by

Or


HTML markup
<div style="max-width: 288px">
  <div class="wmnds-journey-planner-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Plan your journey</h2>
        <form class="wmnds-journey-planner-widget__form" action="//journeyplanner.wmnetwork.co.uk/Home/HandleWidgetQuery" method="GET" name="planYourJourneySmallForm">
          <div class="wmnds-journey-planner-widget__from wmnds-m-b-md">
            <label class="wmnds-fe-label" for="from--opened--leave-collapsed--mode-opened">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="Enter station or postcode" name="origin" aria-label="Enter station or postcode" type="text" id="from--opened--leave-collapsed--mode-opened" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__to wmnds-m-b-md">
            <div class="wmnds-journey-planner-widget__switch">
              <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                Switch
              </button>
              <svg class="wmnds-journey-planner-widget__switch-icon">
                <use xlink:href="#wmnds-general-swap" href="#wmnds-general-swap"></use>
              </svg>
            </div>
            <label class="wmnds-fe-label" for="to--opened--leave-collapsed--mode-opened">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="Enter station or postcode" name="destination" aria-label="Enter station or postcode" type="text" id="to--opened--leave-collapsed--mode-opened" required="true" autocomplete="off">
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__when ">
            <div class="wmnds-journey-planner-widget__when--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Leave</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>Now</p>
            </div>
            <div class="wmnds-journey-planner-widget__when--expanded">
              <div class="wmnds-journey-planner-widget__when-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Arrival time
                </button>
              </div>
              <h4>Leave</h4>
              <input type="hidden" name="journeyTimeType" value="leave" aria-label="leave" />
              <div class="wmnds-fe-group wmnds-m-b-sm ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="day--opened--leave-collapsed--mode-opened">Day</label>
                  <select class="wmnds-fe-dropdown__select " id="day--opened--leave-collapsed--mode-opened" name="day">
                    <option value="today" selected="true">
                      Today
                    </option>
                    <option value="tomorrow">
                      Tomorrow
                    </option>
                  </select>
                </div>
              </div>
              <div class="wmnds-fe-group wmnds-m-b-md ">
                <div class="wmnds-fe-dropdown">
                  <label class="wmnds-fe-label wmnds-screenreaders-only" for="time--opened--leave-collapsed--mode-opened">Time</label>
                  <select class="wmnds-fe-dropdown__select " id="time--opened--leave-collapsed--mode-opened" name="SelectJourneyTime">
                    <option value="0:00">0:00</option>
                    <option value="0:15">0:15</option>
                    <option value="0:30">0:30</option>
                    <option value="0:45">0:45</option>
                    <option value="1:00">1:00</option>
                    <option value="1:15">1:15</option>
                    <option value="1:30">1:30</option>
                    <option value="1:45">1:45</option>
                    <option value="2:00">2:00</option>
                    <option value="2:15">2:15</option>
                    <option value="2:30">2:30</option>
                    <option value="2:45">2:45</option>
                    <option value="3:00">3:00</option>
                    <option value="3:15">3:15</option>
                    <option value="3:30">3:30</option>
                    <option value="3:45">3:45</option>
                    <option value="4:00">4:00</option>
                    <option value="4:15">4:15</option>
                    <option value="4:30">4:30</option>
                    <option value="4:45">4:45</option>
                    <option value="5:00">5:00</option>
                    <option value="5:15">5:15</option>
                    <option value="5:30">5:30</option>
                    <option value="5:45">5:45</option>
                    <option value="6:00">6:00</option>
                    <option value="6:15">6:15</option>
                    <option value="6:30">6:30</option>
                    <option value="6:45">6:45</option>
                    <option value="7:00">7:00</option>
                    <option value="7:15">7:15</option>
                    <option value="7:30">7:30</option>
                    <option value="7:45">7:45</option>
                    <option value="8:00">8:00</option>
                    <option value="8:15">8:15</option>
                    <option value="8:30">8:30</option>
                    <option value="8:45">8:45</option>
                    <option value="9:00">9:00</option>
                    <option value="9:15">9:15</option>
                    <option value="9:30">9:30</option>
                    <option value="9:45">9:45</option>
                    <option value="10:00">10:00</option>
                    <option value="10:15">10:15</option>
                    <option value="10:30">10:30</option>
                    <option value="10:45">10:45</option>
                    <option value="11:00">11:00</option>
                    <option value="11:15">11:15</option>
                    <option value="11:30">11:30</option>
                    <option value="11:45">11:45</option>
                    <option value="12:00">12:00</option>
                    <option value="12:15">12:15</option>
                    <option value="12:30">12:30</option>
                    <option value="12:45">12:45</option>
                    <option value="13:00">13:00</option>
                    <option value="13:15">13:15</option>
                    <option value="13:30">13:30</option>
                    <option value="13:45">13:45</option>
                    <option value="14:00">14:00</option>
                    <option value="14:15">14:15</option>
                    <option value="14:30">14:30</option>
                    <option value="14:45">14:45</option>
                    <option value="15:00">15:00</option>
                    <option value="15:15">15:15</option>
                    <option value="15:30">15:30</option>
                    <option value="15:45">15:45</option>
                    <option value="16:00">16:00</option>
                    <option value="16:15">16:15</option>
                    <option value="16:30">16:30</option>
                    <option value="16:45">16:45</option>
                    <option value="17:00">17:00</option>
                    <option value="17:15">17:15</option>
                    <option value="17:30">17:30</option>
                    <option value="17:45">17:45</option>
                    <option value="18:00">18:00</option>
                    <option value="18:15">18:15</option>
                    <option value="18:30">18:30</option>
                    <option value="18:45">18:45</option>
                    <option value="19:00">19:00</option>
                    <option value="19:15">19:15</option>
                    <option value="19:30">19:30</option>
                    <option value="19:45">19:45</option>
                    <option value="20:00">20:00</option>
                    <option value="20:15">20:15</option>
                    <option value="20:30">20:30</option>
                    <option value="20:45">20:45</option>
                    <option value="21:00">21:00</option>
                    <option value="21:15">21:15</option>
                    <option value="21:30">21:30</option>
                    <option value="21:45">21:45</option>
                    <option value="22:00">22:00</option>
                    <option value="22:15">22:15</option>
                    <option value="22:30">22:30</option>
                    <option value="22:45">22:45</option>
                    <option value="23:00">23:00</option>
                    <option value="23:15">23:15</option>
                    <option value="23:30">23:30</option>
                    <option value="23:45">23:45</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__how  wmnds-is--open">
            <div class="wmnds-journey-planner-widget__how--collapsed">
              <div class="wmnds-grid wmnds-grid--justify-between">
                <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Change
                </button>
              </div>
              <p>All transport modes</p>
            </div>
            <div class="wmnds-journey-planner-widget__how--expanded">
              <h4 class="wmnds-col-1-2 wmnds-m-b-none">Travel by</h4>
              <div class="wmnds-journey-planner-widget__how-controller">
                <button class="wmnds-btn wmnds-btn--link wmnds-m-t--lg" type="button">
                  Select all
                </button>
              </div>
              <div class="wmnds-grid wmnds-grid--spacing-2-md wmnds-m-t-sm">
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useBus" checked aria-label="bus" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--bus">
                      <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                    </svg>
                    Bus
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTrain" checked aria-label="train" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--metro">
                      <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                    </svg>
                    Tram
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="checkbox" class="wmnds-screenreaders-only" name="useTram" checked aria-label="Tram" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--train">
                      <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                    </svg>
                    Train
                  </button>
                </div>
                <p class="wmnds-col-1 wmnds-m-b-sm">Or</p>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="walk" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--walk">
                      <use xlink:href="#wmnds-modes-isolated-walk" href="#wmnds-modes-isolated-walk"></use>
                    </svg>
                    Walk
                  </button>
                </div>
                <div class="wmnds-col-1-2">
                  <input type="radio" class="wmnds-screenreaders-only" name="altjp" aria-label="cycle" />
                  <button class="wmnds-btn wmnds-btn--mode wmnds-col-1 wmnds-m-b-sm" type="button">
                    <svg class="wmnds-btn__icon  wmnds-btn__coloured-icon--cycle">
                      <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
                    </svg>
                    Cycle
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="wmnds-journey-planner-widget__advanced-search">
            <a href="http://journeyplanner.networkwestmidlands.com/" title="Go to mobility and advanced search" target="_self" class="wmnds-link wmnds-m-t--lg">
              Mobility and advanced search
            </a>
          </div>
          <div class="wmnds-journey-planner-widget__submit">
            <button class="wmnds-btn wmnds-m-t-md" type="submit">
              Plan my journey
              <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/components/journey-planner-widget/_journey-planner-widget.njk" import wmndsJourneyPlannerWidget %}

{{
   wmndsJourneyPlannerWidget({
        isOpen: true,
        isHowOpen: false,
        isWhenOpen: false
   })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, journey planner widget will be expanded. Defaults to false.
isWhenOpenbooleanIf true, journey planner widget area to define when you want to travel will be expanded. Defaults to false.
isHowOpenbooleanIf true, journey planner widget area to define how (the mode of travel) do you want to travel will be expanded. Defaults to false.