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

Banner

Normal


This is a new service - your feedback will help us to improve it.


HTML markup
<div class="wmnds-banner-container">
  <div class="wmnds-col-1">
    <p class="wmnds-banner-container__text">
      This is a new service - your
      <a href="#" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
        feedback
      </a>
      will help us to improve it.
    </p>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}

{{
   wmndsBanner({
      contentText: null,
      contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
      emergency: false,
      onPage: false,
      phase: false,
      phaseText: null
   })
}}

Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specify what content is to be shown in the banner.
emergencybooleanIf set to true the banner will display in the emergency style
onPagebooleanIf set to true the on page variant of the banner will display.
phasebooleanIf set to true the banner will display the phase indicator.
phaseTextstringText to show in the phase indicator

With phase indicator

What does it do?

  • Helps users to identify when a service is new
  • Offers users the opportunity to give feedback about a new service

When to use it?

  • When a service is new

When not to use it?

  • On a service that has matured and has a steadily positive rate of satisfaction

How it works

  • A service can be in Alpha (prototype stage) or Beta (when it is on a publicly-accessible website)
  • The survey link must point to a Hotjar or service feedback survey, with the service name within the URL. For example, /?serviceName=descriptiveName. A service can either be in Alpha (prototype stage) or Beta (when it is on a publicly accessible website).

Beta

This is a new service - your feedback will help us to improve it.


HTML markup
<div class="wmnds-banner-container">
  <div class="wmnds-col-1">
    <div class="wmnds-banner-container__phase-wrapper">
      <span class="wmnds-phase-indicator">
        Beta
      </span>
    </div>
    <p class="wmnds-banner-container__text">
      This is a new service - your
      <a href="#" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
        feedback
      </a>
      will help us to improve it.
    </p>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}

{{
   wmndsBanner({
      contentText: null,
      contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
      emergency: false,
      onPage: false,
      phase: false,
      phaseText: null
   })
}}

Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specify what content is to be shown in the banner.
emergencybooleanIf set to true the banner will display in the emergency style
onPagebooleanIf set to true the on page variant of the banner will display.
phasebooleanIf set to true the banner will display the phase indicator.
phaseTextstringText to show in the phase indicator

Emergency banner

What does it do

  • It communicates emergency information and provides advice on what to do.
  • When an emergency is no longer relevant, the content will be archived or removed.

When to use it?

  • When you need to communicate information that is urgent or critical, which will potentially affect a large group of our users. For example, if there is an emergency situation announced in Birmingham, the banner would advise all users on travel updates and guidance.
  • The emergency banner should be placed directly below the main navigation.
  • Only show one emergency banner notification at a time.

When not to use it?

  • When a warning or emergency is directly related to a task the user is completing. In this case, use the appropriate Message component to notify users of any issues.
  • If the issue is related to a service we are providing such as our customer service, you should place the Warning text and Inset text components next to the affected service, detailing the issue.
  • Any disruptions to travel will be highlighted on the home page through the Disruption indicator components.

How it works

  • The user can dismiss the Emergency banner through the 'Close' link. This will remove the current emergency banner from all pages they visit on the website.
  • The On-page variant is only shown when a user is on the Emergency advice page, which can be accessed through the 'Read our latest advice' link.

Sitewide



HTML markup
<div class="wmnds-banner-container wmnds-banner-container--emergency">
  <div class="wmnds-container wmnds-grid wmnds-grid--align-center">
    <div class="wmnds-col-xl-1-24 wmnds-col-1-2 wmnds-banner-container__emergency-icon-col">
      <svg class="wmnds-banner-container__emergency-icon-error">
        <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
      </svg>
    </div>
    <div class="wmnds-col-xl-10-24 wmnds-col-1 wmnds-banner-container__emergency-title-col">
      <h2 class="wmnds-h4 wmnds-m-b-none">Emergency notification title</h2>
    </div>
    <div class="wmnds-col-xl-10-24 wmnds-col-1 wmnds-banner-container__emergency-link-col">
      <a href="#" target="_self" class="wmnds-link wmnds-banner-container__emergency-link">
        Read our latest advice
        <svg class="wmnds-banner-container__emergency-icon wmnds-m-l-sm">
          <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
        </svg>
      </a>
    </div>
    <div class="wmnds-col-xl-3-24 wmnds-col-1-2 wmnds-banner-container__emergency-close-col">
      <button class="wmnds-banner-container__emergency-close">
        Close
        <svg class="wmnds-banner-container__emergency-icon wmnds-m-l-sm">
          <use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}

{{
   wmndsBanner({
      contentText: null,
      contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
      emergency: false,
      onPage: false,
      phase: false,
      phaseText: null
   })
}}

Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specify what content is to be shown in the banner.
emergencybooleanIf set to true the banner will display in the emergency style
onPagebooleanIf set to true the on page variant of the banner will display.
phasebooleanIf set to true the banner will display the phase indicator.
phaseTextstringText to show in the phase indicator

On-page variant


Emergency notification title


HTML markup
<div class="wmnds-banner-container wmnds-banner-container--emergency">
  <div class="wmnds-container wmnds-grid wmnds-grid--align-center">
    <div class="wmnds-col-xl-1-24 wmnds-col-1-2 wmnds-banner-container__emergency-icon-col">
      <svg class="wmnds-banner-container__emergency-icon-error">
        <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
      </svg>
    </div>
    <div class="wmnds-col-xl-20-24 wmnds-col-1 wmnds-banner-container__emergency-title-col">
      <h2 class="wmnds-h4 wmnds-m-b-none">Emergency notification title</h2>
    </div>
    <div class="wmnds-col-xl-3-24 wmnds-col-1-2 wmnds-banner-container__emergency-close-col">
      <button class="wmnds-banner-container__emergency-close">
        Close
        <svg class="wmnds-banner-container__emergency-icon wmnds-m-l-sm">
          <use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}

{{
   wmndsBanner({
      contentText: null,
      contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
      emergency: false,
      onPage: false,
      phase: false,
      phaseText: null
   })
}}

Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specify what content is to be shown in the banner.
emergencybooleanIf set to true the banner will display in the emergency style
onPagebooleanIf set to true the on page variant of the banner will display.
phasebooleanIf set to true the banner will display the phase indicator.
phaseTextstringText to show in the phase indicator

Travel mode page banner

What does it do?

  • Helps users to identify the travel mode service
  • Provides users with a short description of the travel service in the West Midlands

When to use it?

  • Only on Travel Mode Landing Pages

When not to use it?

  • On pages where the mode of travel is not operated by Transport for West Midlands, such as E-scooters

How it works

  • The image container width will expand if users are viewing the page with a browser width higher than 1280px.
  • The image within the container will zoom to fill the size of the image container.
  • The image will be hidden on mobile devices. Our previous research found mobile users do not see the value of images on mobile pages.
  • The image, modal icon and the Transport for West Midlands logo variant will change for each travel mode landing page.


HTML markup
<div class="wmnds-travel-mode-page-banner wmnds-travel-mode-page-banner--bus">
  <div class="wmnds-container">
    <div class="wmnds-travel-mode-page-banner__content">
      <div class="wmnds-travel-mode-page-banner__copy">
        <h2>Bus in the West Midlands</h2>
        <p>It’s easy to travel by bus in the West Midlands. Buses are frequent, with many routes operating late into the evening and on Sundays.</p>
      </div>
      <div class="wmnds-travel-mode-page-banner__logos">
        <svg>
          <use xlink:href="#wmnds-modes-bg-bus" href="#wmnds-modes-bg-bus"></use>
        </svg>
        <img src="https://designsystem.tfwm.org.uk/img/logos/WM Bus/Landscape/White.png" alt="West Midlands Bus">
      </div>
    </div>
  </div>
  <div class="wmnds-travel-mode-page-banner__image wmnds-hide-mobile" style="background-image: url(/img/component-images/banner/bus-banner-img.png);">
    <svg class="wmnds-travel-mode-page-banner__svg-background" viewBox="0 0 40 200">
      <path d="M0,0v200h6.03l32.87-93.5c1.48-4.21,1.48-8.79,0-12.99L6.03,0H0z" />
    </svg>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/travel-mode-page-banner/_travel-mode-page-banner.njk" import wmndsTravelModePageBanner %}

{{
  wmndsTravelModePageBanner({
    title: "Buses in the West Midlands",
    contentHTML: "<p>It’s easy to travel by bus in the West Midlands. Buses are frequent, with many routes operating late into the evening and on Sundays.</p>",
    image: "/img/component-images/banner/bus-banner-img.png",
    mode: "bus"
  })
}}

Nunjucks properties
NameTypeDescription
titlestringRequired. Title content to use in the banner.
contentHTMLstringRequired. HTML content to use in the banner.
imagestringRequired. Url for the image to be displayed in the banner.
modestringTransport mode the banner relates to. This will determine the icon and background colour which is displayed. Accepted values are bus, rail, metro, roads, walk, cycle and eScooter. If not set, will default to bus.



HTML markup
<div class="wmnds-travel-mode-page-banner wmnds-travel-mode-page-banner--cycle">
  <div class="wmnds-container">
    <div class="wmnds-travel-mode-page-banner__content">
      <div class="wmnds-travel-mode-page-banner__copy">
        <h2>Cycling and walking in the West Midlands</h2>
        <p>Cycling and walking is great exercise. There are plenty of places to explore in the West Midlands.</p>
      </div>
      <div class="wmnds-travel-mode-page-banner__logos">
        <svg>
          <use xlink:href="#wmnds-modes-bg-cycle" href="#wmnds-modes-bg-cycle"></use>
        </svg>
        <svg>
          <use xlink:href="#wmnds-modes-bg-walk" href="#wmnds-modes-bg-walk"></use>
        </svg>
        <img src="https://designsystem.tfwm.org.uk/img/logos/WM Cycle + Walk/Landscape/White.png" alt="West Midlands eScooter">
      </div>
    </div>
  </div>
  <div class="wmnds-travel-mode-page-banner__image wmnds-hide-mobile" style="background-image: url(/img/component-images/banner/bus-banner-img.png);">
    <svg class="wmnds-travel-mode-page-banner__svg-background" viewBox="0 0 40 200">
      <path d="M0,0v200h6.03l32.87-93.5c1.48-4.21,1.48-8.79,0-12.99L6.03,0H0z" />
    </svg>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/travel-mode-page-banner/_travel-mode-page-banner.njk" import wmndsTravelModePageBanner %}

{{
  wmndsTravelModePageBanner({
    title: "Buses in the West Midlands",
    contentHTML: "<p>It’s easy to travel by bus in the West Midlands. Buses are frequent, with many routes operating late into the evening and on Sundays.</p>",
    image: "/img/component-images/banner/bus-banner-img.png",
    mode: "bus"
  })
}}

Nunjucks properties
NameTypeDescription
titlestringRequired. Title content to use in the banner.
contentHTMLstringRequired. HTML content to use in the banner.
imagestringRequired. Url for the image to be displayed in the banner.
modestringTransport mode the banner relates to. This will determine the icon and background colour which is displayed. Accepted values are bus, rail, metro, roads, walk, cycle and eScooter. If not set, will default to bus.

Purple branded banner

What does it do?

  • Helps user to identify the brand or a service provider

When to use it?

  • Only on Swift product landing pages such as Swift Go, PAYG, Swift and tickets and TfWM corporate landing page

When not to use it?

  • On informational content pages

How it works

  • The banner container width will expand if users are viewing the page with a browser width higher than 1280px
  • User can add/remove text and call to action button
  • User can add a logo in the title


HTML markup
<div class="wmnds-branded-banner">
  <div class="wmnds-container">
    <div class="wmnds-grid wmnds-grid--spacing-lg-2-xl wmnds-m-t-sm wmnds-m-b-sm">
      <div class="wmnds-col-1 wmnds-col-md-2-3">
        <h1 class="wmnds-branded-banner__title">
          <svg class="wmnds-swift-logo-inline">
            <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
          </svg>
          and tickets
        </h1>
        <p class="wmnds-h3">We sell lots of tickets for bus, train and tram travel in the West Midlands</p>
        <p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p>
      </div>
    </div>
    <div class="wmnds-col-1">
      <a href="#" title="link title" target="_self" class="wmnds-btn wmnds-btn--dark-bg">
        Find a ticket
        <svg class="wmnds-btn__icon wmnds-btn__icon--right">
          <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
        </svg>
      </a>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/branded-banner/_branded-banner.njk" import wmndsBrandedBanner %}

{{
  wmndsBrandedBanner({
    title: "<svg class=\"wmnds-swift-logo-inline\"><use xlink:href=\"#wmnds-swift-full-logo\" href=\"#wmnds-swift-full-logo\"></use></svg> and tickets",
    contentCol1: "<p class=\".wmnds-h3\">We sell lots of tickets for bus, train and tram travel in the West Midlands</p><p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p>",
    transportModals: ["Bus", "Train", "Tram", "Park and ride"],
    ctaButton: {
      contentText: 'Find a ticket',
      link: '#',
      linkTitle: 'Find a ticket'
    }
  })
}}

Nunjucks properties
NameTypeDescription
titlestringRequired. HTML content to use as the title in the banner.
contentCol1stringRequired. HTML content to use in the first column of the banner.
contentCol2stringHTML content to use in the second column of the banner. If left blank, this column will not display.
breadcrumbItemsarrayArray of breadcrumb items to show in the banner. See the items property under Breadcrumb.
ctaButtonobjectCall to action link (displayed as a button) to use in the banner. If not supplied, no button will be displayed.

Options for ctaButton

NameTypeDescription
contentTextstringRequired. Text to use within the button.
linkstringRequired. Link for the button.
linkTitlestringText to use as the link title.
linkTargetstringTarget attribute for the link. Defaults to "_self"

Variant with transport modals



HTML markup
<div class="wmnds-branded-banner">
  <div class="wmnds-container">
    <div class="wmnds-grid wmnds-grid--spacing-lg-2-xl wmnds-m-t-sm wmnds-m-b-sm">
      <div class="wmnds-col-1 wmnds-col-md-2-3">
        <h1 class="wmnds-branded-banner__title">
          <svg class="wmnds-swift-logo-inline">
            <use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
          </svg> pay as you go
        </h1>
        <p class="wmnds-h3">The cashless way to buy tickets on the bus and tram</p>
        <p>A Swift card is a smartcard for public transport in the West Midlands. You load a Swift pay as you go card with credit to pay for journeys.</p>
        <div class="wmnds-branded-banner__modals wmnds-m-b-lg">
          <div class="wmnds-branded-banner__modal">
            <svg class="wmnds-branded-banner__icon  wmnds-branded-banner__icon--bus">
              <use xlink:href="#wmnds-modes-bg-bus" href="#wmnds-modes-bg-bus"></use>
            </svg>
            Bus
          </div>
          <div class="wmnds-branded-banner__modal">
            <svg class="wmnds-branded-banner__icon  wmnds-branded-banner__icon--train">
              <use xlink:href="#wmnds-modes-bg-rail" href="#wmnds-modes-bg-rail"></use>
            </svg>
            Train
          </div>
          <div class="wmnds-branded-banner__modal">
            <svg class="wmnds-branded-banner__icon  wmnds-branded-banner__icon--tram">
              <use xlink:href="#wmnds-modes-bg-metro" href="#wmnds-modes-bg-metro"></use>
            </svg>
            Tram
          </div>
          <div class="wmnds-branded-banner__modal wmnds-branded-banner__icon--p-r">
            <svg class="wmnds-branded-banner__icon">
              <use xlink:href="#wmnds-modes-bg-p-r" href="#wmnds-modes-bg-p-r"></use>
            </svg>
            Park and ride
          </div>
        </div>
      </div>
    </div>
    <div class="wmnds-col-1">
      <a href="#" title="Get a Swift Pay as you go" target="_self" class="wmnds-btn wmnds-btn--dark-bg">
        Get a Swift Pay as you go
        <svg class="wmnds-btn__icon wmnds-btn__icon--right">
          <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
        </svg>
      </a>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/branded-banner/_branded-banner.njk" import wmndsBrandedBanner %}

{{
  wmndsBrandedBanner({
    title: "<svg class=\"wmnds-swift-logo-inline\"><use xlink:href=\"#wmnds-swift-full-logo\" href=\"#wmnds-swift-full-logo\"></use></svg> and tickets",
    contentCol1: "<p class=\".wmnds-h3\">We sell lots of tickets for bus, train and tram travel in the West Midlands</p><p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p>",
    transportModals: ["Bus", "Train", "Tram", "Park and ride"],
    ctaButton: {
      contentText: 'Find a ticket',
      link: '#',
      linkTitle: 'Find a ticket'
    }
  })
}}

Nunjucks properties
NameTypeDescription
titlestringRequired. HTML content to use as the title in the banner.
contentCol1stringRequired. HTML content to use in the first column of the banner.
contentCol2stringHTML content to use in the second column of the banner. If left blank, this column will not display.
breadcrumbItemsarrayArray of breadcrumb items to show in the banner. See the items property under Breadcrumb.
ctaButtonobjectCall to action link (displayed as a button) to use in the banner. If not supplied, no button will be displayed.

Options for ctaButton

NameTypeDescription
contentTextstringRequired. Text to use within the button.
linkstringRequired. Link for the button.
linkTitlestringText to use as the link title.
linkTargetstringTarget attribute for the link. Defaults to "_self"

Homepage

What does it do?

  • Provides a visual illustration of our most popular transport modes
  • Highlights a welcome message for visitors of the West Midlands Network site

When to use it?

  • On the homepage

When not to use it?

  • On pages where the mode of travel is not operated by Transport for West Midlands, such as E-scooters

How it works

  • The banner image will change on each page refresh. There are three images that will be shown in the banner, one for bus, train and tram
  • The welcome message requires a Primary Purple highlight to provide sufficient colour contrast against the banner image

Bringing transport
together


HTML markup
<div class="wmnds-homepage-banner" style="background-image: url(/img/component-images/banner/homepage-banner-img.png);">
  <div class="wmnds-container">
    <h1 class="wmnds-homepage-banner__title">
      <span class="wmnds-homepage-banner__title-content">Bringing transport <br>together</span>
    </h1>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/banner/homepage-banner/_homepage-banner.njk" import wmndsHomepageBanner %}

{{
  wmndsHomepageBanner({
    titleHTML: "Bringing transport <br>together",
    image: "/img/component-images/banner/homepage-banner-img.png",
  })
}}

Nunjucks properties
NameTypeDescription
titleTextstringTitle text to use in the banner.
titleHTMLstringHTML title content to use in the banner. If titleText is provided, the titleHTML argument will be ignored.
imagestringUrl for the image to be displayed in the banner.