Patterns

Facilities

Station facilities

What does it do?

Shows users what facilities are available at a train station
Shows users what accessible facilities are available at a train station

When to use it?

On a train station page

How it works?

If a facility is not available at a station, then it won't be shown in the list

HTML markup

<div class="wmnds-facilities wmnds-grid wmnds-grid--spacing-md-2-md wmnds-bg-white wmnds-p-lg">
  <div class="wmnds-facilities__section wmnds-col-1-1 wmnds-col-md-1-2">
    <h3 class="wmnds-facilities__title">Station facilities</h3>
    <ul class="wmnds-facilities__list">
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-seating" href="#wmnds-facilities-seating"></use>
        </svg>
        Seated area
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-toilets" href="#wmnds-facilities-toilets"></use>
        </svg>
        Toilets
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-baby-changing" href="#wmnds-facilities-baby-changing"></use>
        </svg>
        Baby changing
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-wifi" href="#wmnds-facilities-wifi"></use>
        </svg>
        Wifi
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
        </svg>
        Cycle storage
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-modes-isolated-cycle" href="#wmnds-modes-isolated-cycle"></use>
        </svg>
        Cycle stands: 28
      </li>
    </ul>
  </div>
  <div class="wmnds-facilities__section wmnds-col-1-1 wmnds-col-md-1-2">
    <h3 class="wmnds-facilities__title">Accessibility</h3>
    <ul class="wmnds-facilities__list">
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-step-free-access" href="#wmnds-facilities-step-free-access"></use>
        </svg>
        Step-free access
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-ramp" href="#wmnds-facilities-ramp"></use>
        </svg>
        Ramp for train access
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-induction-loop" href="#wmnds-facilities-induction-loop"></use>
        </svg>
        Induction loop
      </li>
      <li class="wmnds-facilities__list-item">
        <svg class="wmnds-facilities__icon">
          <use xlink:href="#wmnds-facilities-key-scheme" href="#wmnds-facilities-key-scheme"></use>
        </svg>
        National key toilets available
      </li>
    </ul>
  </div>
</div>

Nunjucks markup

{% from "wmnds/patterns/facilities/_facilities.njk" import wmndsFacilities %}

{{
   wmndsFacilities({
      parkingExample: false
    })
}}

Station parking

What does it do?

Shows users if car parking is available at a train station
Tells users who operates the car park

When to use it?

On a train station page

Park and ride

Owned by West Midlands Combined Authority

Spaces: 310
Blue badge spaces: 14
Shared occupancy spaces: 10
Electric charging spaces: 4

Parking is available on a first come, first served basis

West Midlands Combined Authority operates a considerate parking policy to ensure all sites are accessible and used in the most appropriate way.

Find information on how Park and Ride works.

HTML markup

<div class="wmnds-facilities wmnds-bg-white wmnds-p-lg">
  <h3 class="wmnds-facilities__title">Park and ride</h3>
  <p class="wmnds-p-t-xsm">Owned by <a href="#">West Midlands Combined Authority</a></p>
  <ul class="wmnds-facilities__list">
    <li class="wmnds-facilities__list-item">
      <svg class="wmnds-facilities__icon">
        <use xlink:href="#wmnds-facilities-taxi-rank" href="#wmnds-facilities-taxi-rank"></use>
      </svg>
      Spaces: 310
    </li>
    <li class="wmnds-facilities__list-item">
      <svg class="wmnds-facilities__icon">
        <use xlink:href="#wmnds-facilities-blue-badge-parking" href="#wmnds-facilities-blue-badge-parking"></use>
      </svg>
      Blue badge spaces: 14
    </li>
    <li class="wmnds-facilities__list-item">
      <svg class="wmnds-facilities__icon">
        <use xlink:href="#wmnds-facilities-shared-occupancy-parking" href="#wmnds-facilities-shared-occupancy-parking"></use>
      </svg>
      Shared occupancy spaces: 10
    </li>
    <li class="wmnds-facilities__list-item">
      <svg class="wmnds-facilities__icon">
        <use xlink:href="#wmnds-facilities-electric-charging" href="#wmnds-facilities-electric-charging"></use>
      </svg>
      Electric charging spaces: 4
    </li>
  </ul>
  <div class="wmnds-inset-text wmnds-m-b-lg">
    Parking is available on a first come, first served basis
  </div>
  <p>West Midlands Combined Authority operates a considerate parking policy to ensure all sites are accessible and used in the most appropriate way.</p>
  <p class="wmnds-m-b-none">Find information on how <a href="#">Park and Ride</a> works.</p>
</div>

Nunjucks markup

{% from "wmnds/patterns/facilities/_facilities.njk" import wmndsFacilities %}

{{
   wmndsFacilities({
      parkingExample: false
    })
}}